A full-stack Gen Z social media platform with real-time chat, AI-powered content, dynamic themes, and a drag-and-drop meme generator.
Existing social platforms are optimized for algorithmic engagement and ad revenue, not genuine connection or creative expression. Younger users (Gen Z) increasingly seek platforms that prioritize playfulness, real-time interaction, and visual customization over passive content consumption.
GemiChat feature with real-time messaging, typing indicators, and read receipts powered by Firestore's snapshot listeners. Messages are optimized for high-frequency updates.
Google Gemini integration suggests Gen Z slang and contextual responses. Uses Google Genkit SDK for structured AI output with safety guardrails.
Baby Pink, Ocean Blue, Sunshine Yellow, Midnight Dark, and Forest Green themes. CSS custom properties enable runtime theme switching without re-renders.
Drag-and-drop meme creation interface with template library, custom text overlay, and direct sharing to the platform feed. Canvas API for image composition.
Firebase Auth with email/password and Google sign-in. Protected routes with middleware. Session management with HTTP-only cookies.
Progressive Web App with service worker, manifest, offline fallback, and install prompt. Optimized for mobile-first usage patterns.
App Router, Server Components, React Server Actions, ISR
Full type safety across the entire codebase
Firestore (NoSQL), Auth, Storage, real-time listeners
Utility-first styling with custom design system
Accessible primitives for dialogs, dropdowns, and modals
AI SDK for structured Gemini API integration
Firestore cost scaling: Real-time listeners create read-heavy workloads. With many concurrent users, Firestore reads could become expensive.
Implemented pagination with cursor-based queries. Batched real-time listeners with debouncing. Used Firestore's offline persistence to cache reads locally.
AI response latency: Gemini API calls add 1-3 seconds of latency, which feels sluggish in a chat context.
Used optimistic UI with streaming responses where possible. Pre-fetched common slang suggestions. Added typing indicators to mask latency.
Theme persistence: Users expect their theme preference to persist across sessions and devices.
Stored theme preference in Firestore user document with localStorage fallback for anonymous users. Theme is applied before first paint to prevent flash.
Building a real-time social platform requires careful attention to the data flow architecture. Firestore's real-time listeners are powerful but require disciplined read-cost management. The AI integration (Gemini for slang suggestions) added significant user delight but required thoughtful UX design to handle latency gracefully. Server Components in Next.js 15 provided excellent initial load performance, but the real-time features necessitated a hybrid server/client architecture. Theme customization proved to be one of the most appreciated features — users enjoy personalization even in simple forms.
Add short-form video content with vertical format support, similar to Instagram Stories or TikTok.
Explore ActivityPub federation for interoperability with Mastodon and the broader Fediverse.
Implement AI-powered content moderation using Gemini for automated flagging of inappropriate content.
Provide users with engagement analytics: post views, follower growth, and content performance metrics.