todrawn.com
Streszczenie
todrawn.com to produkt full-stack do tworzenia treści, którego centrum stanowi Scribe zamieniający tekst, kod i odręczne szkice w filmy rysowane klatka po klatce w przeglądarce. Współdzielone tablice są przestrzenią do rysowania, diagramów, obrazów i wspólnego dopracowywania. Zbudowałem produkt end to end, a to case study skupia się na trybie tablic: API w Java 21 i Spring Boot, klient kanwy w Next.js, React i TypeScript, PostgreSQL dla trwałych danych, Redis dla krótkotrwałej koordynacji, WebSockets dla aktualizacji na żywo oraz Stripe dla płatności. Produkt działa pod adresem todrawn.com. Darmowy plan transakcyjnie egzekwuje limity: trzy posiadane tablice, pięć obrazów na tablicę, cztery osoby na tablicę i dwa eksporty Scribe dziennie według UTC. Dostępne dowody opisują architekturę i limity, ale nie zawierają ruchu, opóźnień ani wyników przychodowych.
Zweryfikowane fakty
- Prywatne repozytorium whiteboard ma zapisane 421 commitów.
- Produkt łączy Scribe ze współdzielonymi tablicami pod adresem todrawn.com.
- Stack trybu tablic obejmuje Java 21, Spring Boot, Next.js, React, PostgreSQL, Redis, WebSockets i Stripe.
- Limity FREE są egzekwowane transakcyjnie: 3 posiadane tablice, 5 obrazów, 4 osoby i 2 eksporty Scribe dziennie według UTC.
Problem
Tryb współdzielonych tablic musi synchronizować rysowanie i stan między podłączonymi klientami, a jednocześnie obsługiwać konta, tablice i subskrypcje w jednym produkcie. Ta architektura łączy te potrzeby w jednej wdrożonej aplikacji.
Odpowiedzialność
Zbudowałem projekt end to end. Zakres obejmuje API w Spring Boot i Spring Security, doświadczenie kanwy w Next.js i Konva, aktualizacje czasu rzeczywistego, obsługę danych w PostgreSQL i Redisie, płatności Stripe oraz skonteneryzowaną ścieżkę dostarczania.
Decyzje i kompromisy
- WebSockets: aktualizacje tablicy trafiają w czasie rzeczywistym do podłączonych klientów.
- PostgreSQL i Redis: PostgreSQL przechowuje tablice i dane kont, a Redis wspiera szybki, krótkotrwały stan.
- Konva: renderer kanwy działa po stronie frontendu, tam gdzie zachodzą interakcje rysowania.
- Dostarczanie: Docker, GitHub Actions i Google Cloud Run tworzą ścieżkę budowania i hostingu, a Stripe jest zintegrowany w backendzie Spring Boot.
Publiczny opis projektu nie podaje opóźnień, ruchu ani skali, dlatego rezultat opisuję jakościowo.
Architektura techniczna
- Backend: Java 21, Spring Boot i Spring Security obsługują API, uwierzytelnianie i autoryzację.
- Frontend: Next.js, React i TypeScript dostarczają interfejs, z Tailwind CSS i Konva dla kanwy.
- Dane: PostgreSQL jest systemem głównym dla tablic, kont i powiązanych danych, a Redis służy do krótkotrwałego stanu.
[ Next.js / React / Konva ] <--WebSocket--> [ Spring Boot API ]
↓
[ PostgreSQL ] [ Redis ]Rezultat
Rezultatem jest działający produkt todrawn.com z trybem Scribe do tworzenia odręcznie rysowanych wideo i współdzielonymi tablicami, z subskrypcjami Stripe, skonteneryzowaną aplikacją, automatyzacją dostarczania przez GitHub Actions i backendem uruchomionym w Google Cloud Run.
Czego się nauczyłem
Budowa produktu end to end połączyła interakcje frontendu, transport czasu rzeczywistego, trwałość danych, uwierzytelnianie, płatności i wdrażanie w jednym systemie. Wyraźnie pokazała też granicę między trwałymi danymi w PostgreSQL a krótkotrwałą koordynacją w Redisie. Publiczne materiały opisują architekturę i adres produkcji, ale nie zawierają historii wydajności ani incydentów.
Jak to zweryfikowano: Otwórz działający produkt ↗