Popqorn.app — własny produkt, od pierwszej linijki kodu

„Twoje popkulturowe uniwersum”: platforma dla kinomanów łącząca bazę filmów i seriali, społeczność i grywalizację. Ten projekt pokazuje, co się dzieje, gdy jedna osoba odpowiada za całość — od koncepcji i projektu interfejsu, przez architekturę, po utrzymanie działającego produktu.

TypeScript — 100% kodu
React
Vite
styled-components
Supabase — auth, Realtime, RLS
TMDB API
i18next — PL/EN
PWA

Otwórz popqorn.app Wróć do projektów

Moja rola Autor całości: koncepcja, design, frontend, backend

Typ projektu Własny produkt (SPA/PWA), model freemium

Status Działający produkt w rozwoju, przed oficjalną premierą

Punkt wyjścia

Chciałem zbudować coś więcej niż kolejny projekt do portfolio: pełnoprawny, działający produkt, z prawdziwymi użytkownikami, kontami, treścią i modelem rozwoju. Padło na temat, który znam i lubię — filmy i seriale. Tak powstał Popqorn: miejsce, w którym śledzisz to, co oglądasz, budujesz swój profil kinomana i dzielisz się opiniami ze znajomymi.

Architektura i decyzje techniczne

Popqorn jest napisany w 100% w TypeScript — od komponentów interfejsu po logikę domenową. Aplikację buduje Vite, interfejs renderuje React ze stylami w styled-components. Zamiast klasycznego backendu z CMS-em wybrałem Supabase: uwierzytelnianie (w tym logowanie przez Google i Discord), bazę danych z izolacją uprawnień na poziomie wierszy (Row Level Security) i synchronizację stanu na żywo (Realtime). Dane o filmach i serialach dostarcza API TMDB.

PWA — aplikację można zainstalować na telefonie jak natywną;
dwie wersje językowe (PL/EN) — pełna internacjonalizacja na i18next;
tryb ciemny i jasny — ten sam wzorzec, który znajdziesz na tej stronie;
mobile-first — interfejs projektowany od telefonu w górę.

Kluczowe funkcje

Baza i odkrywanie

Wyszukiwarka filmów, seriali i ludzi kina, strony gatunków, zestawienia popularności oraz agregacja „Gdzie obejrzeć” — jedna karta pokazuje, na której platformie streamingowej dany tytuł jest dostępny.

Społeczność i grywalizacja

Globalna Ściana Aktywności z wpisami, ankietami i czatem na żywo, znajomi i rankingi kinomanów, kreator Tier List (przeciąganie plakatów między poziomami, zapis automatyczny) oraz system XP z 35 odznakami — od „Konesera Horrorów” po „Maratończyka”.

Popqorn Cypher

Wbudowany komunikator z szyfrowaniem end-to-end: czaty grupowe, statusy obecności i weryfikacja numeru bezpieczeństwa rozmówcy. Treść wiadomości nie trafia do trwałego magazynu w postaci jawnej.

Model freemium

Rdzeń aplikacji jest darmowy; dobrowolne wsparcie przez Buy Me a Coffee odblokowuje status VIP/Premium — plakietkę przy nazwie, rekomendacje z modułu AI, pełną personalizację widgetów profilu i głos w planach rozwoju.

Czego ten projekt dowodzi

potrafię zaprojektować i dowieźć cały produkt — nie tylko pojedynczą stronę czy widok;
panuję nad architekturą rosnącej aplikacji: typy, moduły, stan w czasie rzeczywistym, uprawnienia;
myślę o użytkowniku końcowym: wydajność, dostępność, wersje językowe, tryb ciemny, instalacja na telefonie;
rozumiem produkt, nie tylko kod: model freemium, roadmapa, zbieranie zgłoszeń od użytkowników.

← Wszystkie projekty Następne case study: Baza Filmowa →