Social Network React
Category:React
Tags: Axios Emotion Feature-based Architecture Firebase GitHub Actions Hooks JWT Lazy Loading Material Design Material UI OpenAI API React React Hook Form React Router React Testing Library Realtime API Stripe TanStack Query TypeScript Unit Test Vite Vitest WebSocket Zod Zustand
The frontend of the social media platform is a responsive single-page application that allows users to interact with the backend API to create profiles, publish posts, follow other users, and engage in real-time chat. The frontend is built using React 19 and TypeScript, with Vite for development and production builds. Navigation is managed by React Router v7 with lazy-loaded routes and RequireAuth guards, while TanStack Query handles server data (feed, profiles, friends, chat history, notifications) and Zustand stores keep client state in sync with the backend API. You can see a description of the backend here.
The user interface is modern, clean, and intuitive, with MUI (Material UI) v7 providing a consistent look and feel across all pages. Feature-level styling is kept minimal per project conventions—mostly MUI theme tokens and the sx prop. On the home page, users see an infinite-scrolling feed of posts and can create new posts with text and images. Search covers users and posts with pagination. Profile pages show avatar, name, friends and post counts, with options to edit profile details, send friend requests, and start a chat. Form validation on auth and profile screens uses React Hook Form with Zod schema resolvers; the authenticated user profile is cached in localStorage encrypted with CryptoJS.
Key real-time features include WebSocket-based chat (useChatSocket) for private messaging and a notification WebSocket (useNotificationSocket) that updates the unread badge in the navbar. JWT secures login, signup, chat, notifications, and profile editing; protected routes use RequireAuth app="social". Overall, the platform provides a powerful, modern, and intuitive interface for seamless interaction with the Django REST API—profiles, posts, friends, trends, search, chat, and notifications. Live demo: react.karnaukh-webdev.com/social/home.