Web Apps
Social App | منصة التواصل الاجتماعي
Modern Real-Time Social Media Platform & Community Hub
Overview
Social App is a modern, high-performance social media platform engineered with React 19, TypeScript 6, Vite 8, Tailwind CSS v4, and TanStack React Query v5. Designed to deliver sub-second interactions and seamless client-side responsiveness across all devices. Key features include: 1. **Authentication & Route Security**: JWT-based authentication flow with user registration, login, and granular route guards (ProtectedRoute & ProtectedRouteAuth). 2. **Dynamic Posts Feed**: Full CRUD operations for user posts with live image upload previews, quick emoji picker, and real-time cache invalidation. 3. **Interactive Comments System**: Nested comment threads, top-comment preview on feed cards, instant creation, and ownership-based edit/delete permissions. 4. **Profile & Avatar Customization**: Dedicated user profile hub, My Posts management tab, and custom avatar selector. 5. **Notifications Center**: Dedicated interaction feed tracking likes, comments, and mentions with unread badges. 6. **Real-Time Offline Detection**: Network state monitoring with an animated banner alerting users to connectivity changes. 7. **Dual-Theme Engine**: Complete Dark and Light mode support with automatic system preference detection and localStorage persistence.
Key Features
Built With
Architecture Preview
React 19 & TypeScript 6 Architecture
Built on React 19 paired with strict TypeScript 6 and Vite 8 for instantaneous HMR and optimized production bundles.
TanStack React Query v5 Server State
Optimistic updates, automated background re-fetching, and instant cache invalidation upon post or comment mutation.
Tailwind CSS v4 & Zero-Runtime Theming
Dynamic CSS variable-based theming engine powering smooth, flicker-free dark and light mode transitions.
Zod Schema Validation & Axios Interceptors
Type-safe runtime form validation with React Hook Form, paired with centralized Axios request/response interceptors.
The Challenge
Building a fluid social networking experience requires handling unpredictable server latency, complex CRUD operations across posts and comments, multi-level authentication states, and instant UI feedback without page reloads.
The Approach
I architected the application using React 19 and TanStack React Query v5 to decouple server caching from client state, implemented strict Zod validation for all form submissions, and engineered a dual-theme responsive UI with Tailwind CSS v4.
The Outcome
Delivered a lightning-fast social app with sub-second navigation, zero runtime typing errors, robust offline detection, and seamless multi-device responsiveness.
Gallery
