Stos Technologiczny
Przegląd nowoczesnych technologii napędzających archtekturę mediaflip.io.
Zbudowany dla wydajności, skalowalności i bezpieczeństwa w świecie danych.
Next.js 15
Renderowanie stron po stronie serwera i trasy API
PostgreSQL & Prisma
Przechowywanie danych aplikacji za pomocą relacyjnej bazy danych
Redis & BullMQ
Pamięć podręczna i kolejkowanie zadań w tle
Chakra UI v3
Biblioteka elementów interfejsu użytkownika
TypeScript
Język programowania zapewniający kontrolę typów w kodzie
tRPC & React Query
Komunikacja i przesyłanie danych między serwerem a przeglądarką
NextAuth.js
Uwierzytelnianie i logowanie użytkowników
Zustand
Biblioteka do zarządzania stanem w React i Next.js
Framer Motion
Obsługa animacji interfejsu
Server-Sent Events
Asynchroniczna komunikacja i powiadomienia w czasie rzeczywistym oparta na Redis Pub/Sub
Bielik Guard
Mechanizm weryfikacji jakości treści — polski klasyfikator bezpieczeństwa
Gorse
Silnik rekomendacji treści opartej na Go
Integracje zewnętrzne
Główne usługi i API podłączone do platformy.
- reCAPTCHA Enterprise
- Google Analytics
- Google AdSense
- Gemini API (opisy, tagowanie, tłumaczenia, ewaluacja memów)
- Google Indexing API (powiadomienia Google Search Engine o stworzeniu lub aktualizacji treści)
Stripe
- Płatności (checkout i subskrypcje)
- Webhooki
Cloudflare
- API AI (opisy, tagowanie, tłumaczenia, ewaluacja memów)
- R2 Storage (zdalne backupy multimediów)
OAuth
- Google — logowanie społecznościowe
- Meta (Facebook) — logowanie społecznościowe
- Discord — logowanie społecznościowe
- Microsoft — SSO enterprise (Azure AD)
Resend
- API e-maili transakcyjnych
Grafana Labs
- Faro RUM i obserwowalność Alloy (monitoring błędów występujących po stronie klienta)
IndexNow
- Powiadomienia wyszukiwarek o stworzeniu lub aktualizacji treści
Tor Project
- Lista węzłów wyjściowych Tor (ochrona przed nadużyciami)
GitHub
- Container Registry (ghcr.io)
- Actions (CI/CD)
Traefik / Let's Encrypt
- Reverse proxy i routing
- Automatyczne certyfikaty SSL
Szczegóły Techniczne
Kluczowe filary architektury:
Skalowalność
Bezpieczeństwo
Wydajność
Serwis działa na bazie Next.js 15, co pozwala na generowanie stron po stronie serwera (SSR) i ich optymalizację pod kątem wyszukiwarek (SEO). Interfejs użytkownika został napisany w TypeScript przy użyciu biblioteki Chakra UI v3 w celu zapewnienia responsywnego wyglądu na telefonach i komputerach.
Dane są zapisywane w bazie PostgreSQL przy użyciu Prisma ORM. Redis obsługuje kolejkowanie zadań w tle w BullMQ. Dodatkowo w architekturze wykorzystano Server-Sent Events (SSE) we współpracy z Redis Pub/Sub do przesyłania powiadomień w czasie rzeczywistym.
Automatyczna moderacja treści i przypisywanie tagów do memów są obsługiwane przez modele językowe uruchamiane przez Cloudflare Workers AI. Stan aplikacji w przeglądarce jest kontrolowany przez bibliotekę Zustand. Całość została skonteneryzowana w Dockerze i wdrożona w chmurze z Docker Swarm wraz z automatyzacją wdrożeń przez GitHub CI/CD.