Sociální síť Aware

O Aplikaci: Proč a jak byla vytvořena?

Toto je můj největší projekt – full-stack aplikace postavená na Next.js. Uživatelé se nejprve musí přihlásit nebo zaregistrovat, přičemž je k dispozici možnost přihlášení přes Google, autentifikaci zajišťuje Lucia. Samozřejmostí je real-time validace formulářů díky knihovně React Hook Form. Pro feed jsem využil knihovnu React Query, která umožňuje efektivní fetching dat, jejich ukládání do cache a revalidaci dat podle potřeby. Díky React Query je implementováno také infinite loading a optimistic updates. To znamená, že při akcích, jako je lajkování nebo sledování uživatele, se změna stavu okamžitě projeví na klientovi ještě před odesláním requestu do databáze. Aplikace podporuje vytváření příspěvků s obrázky nebo videi (s limitem velikosti souboru), přičemž upload je řešen přes knihovnu UploadThing. Součástí je také funkce drag-and-drop, která usnadňuje nahrávání souborů. Příspěvky lze komentovat díky plně funkčnímu systému komentářů. Vyhledávání je možné pomocí hashtagů (#example) nebo examples (@example). Funkce trending hashtags byla navržena tak, aby hashtagy byly cachovány každé 3 hodiny. Uživatelé mohou upravovat svou profilovou stránku, měnit profilový obrázek (s možností oříznutí přímo v aplikaci) a aktualizovat své bio. Fungují také notifikace – uživatelé jsou informováni o nových sledujících, lajkech na jejich příspěvcích, examples nebo příchozích zprávách. Aplikace obsahuje i DM systém, který je integrován přes třetí stranu, Stream. Ten nabízí bohatou škálu funkcí, jako jsou skupinové chaty, nahrávání souborů, reakce na zprávy a další. Mám také nastavený cron job, který každých 24 hodin automaticky maže nahrané soubory, které nebyly použity (například když uživatel nahrál obrázek k příspěvku, ale příspěvek nakonec neodeslal). Poslední přidanou funkcí je možnost repostování.

Funkce a technologie

• Tech Stack: Next.js 15, TypeScript, Tailwind CSS
• Server/ client komponenty
• React Query pro efektivní fetching dat
• Optimistické aktualizace pro plynulou práci uživatele
• Nekonečné načítání příspěvků (infinite scroll)
• Nahrávání souborů (fotky, videa)
• Systém lajků (likeSystem)
• Funkce sledování uživatelů (followSystem)
• Systém komentářů
• Notifikační systém
• Soukromé zprávy (DMs)
• Ukládání příspěvků do záložek (bookmarks)
• Autentizace (NextAuth nebo vlastní řešení)
• Postgres DB konfigurace s Prisma ORM
• Podpora hashtagů (#) a examples (@)
• Fulltextové vyhledávání
• Caching a optimalizace výkonu
• Responzivní design pro mobily
• Tmavý a světlý motiv (next-themes)
• Deplayment na vercel.com