A modern React social media application demonstrating scalable architecture, real-world features, and production deployment.
This production-ready frontend showcases modern React development with scalable state management, interactive social features, and performance-focused UI design.
Developed as The Odin Project – Full Stack Final Project, the application integrates with a RESTful backend and implements features commonly found in modern social platforms, including follows, likes, comments, infinite scrolling feeds, and Progressive Web App capabilities.
Live Demo: https://social-media-punith1117.netlify.app/explore
(~30 seconds backend server restart time due to free tier hosting)
Backend Repository: https://github.com/Punith1117/social-media-backend
Use the following credentials to explore the app:
Username: pun
Password: 1Abcd
- Core Features
- Technical Architecture
- Performance & Scalability
- Development Process
- Quick Start
- Project Structure
- API Integration
- Deployment & DevOps
Create, delete, and edit posts
Seamless content loading with intersection observer.
Personalize your profile with photo uploads and edits.
Discover and follow other users with debounced search.
- Secure JWT Flow: Token expiration detection with automatic cleanup
- Profile System: Profile photo upload and deletion with localStorage persistence
- Form Validation: Real-time validation with clear error states
- Content Management: Full CRUD operations for posts (300 character limit)
- Interactive Features: Like and unlike posts with optimistic UI updates
- Comment System: Paginated comments with a 100 character limit
- Follow Network: Follow and unfollow users with follower statistics
- User Discovery: Search functionality with debounced API requests
- Responsive Design: Adaptive layouts for both mobile and desktop
- Infinite Scrolling: Intersection Observer API for seamless feed loading
- Smart Navigation: Protected routes with authentication guards
- Performance Features: Loading states, error handling, and back-to-top navigation
- Native Sharing: Web Share API with clipboard fallback
- Offline Support: Service worker caching for improved reliability
- Installable App: PWA install support with custom icons
- Cross Platform: Standalone experience with responsive layouts
Production Features: Core features across authentication, social engagement, UX, and PWA capabilities
- React 19 with modern functional components and hooks
- Styled Components for scoped styling with centralized themes
- Custom Hooks for reusable logic (
useDebounced,useFeed,useFollow) - Context API for global authentication and profile state
- Global State handled via Context Providers
- Local Component State managed with
useState - Persistence Layer using
localStorage - Optimistic Updates for instant UI responsiveness
- Centralized API Service Layer
- JWT Authentication Handling
- RESTful Endpoints with Proper HTTP Methods
- Multipart File Uploads for Profile Images
- Infinite Scrolling reduces initial data payload
- Debounced Search prevents excessive API calls
- Optimistic UI Updates improve user responsiveness
- Efficient Component Structure reduces unnecessary re-renders
- Lazy Loading for code splitting and faster initial load
- Pagination for handling large datasets efficiently
- Graceful Error Handling prevents UI crashes
- Loading States with text indicators during async operations
- Service Worker Caching enables offline reliability
- ESLint for consistent code style and error detection
- Reusable Component Architecture
- Robust Error Handling with try-catch blocks and user feedback
- Centralized Theme System supporting dark/light mode
- Git Version Control with conventional commits
- Vite Build Tool for fast development and optimized production builds
- Testing Infrastructure ready for unit and integration tests
- JWT Authentication with token expiration handling
- Input Validation on forms and API requests
- Token Storage using localStorage
- Token Cleanup on expiration and logout
Note: Tokens are stored in localStorage, which is vulnerable to XSS attacks. For production environments, HttpOnly cookies would be preferable.
- Semantic HTML5 for screen reader compatibility
- ARIA Labels on interactive elements
- Keyboard Navigation support
- Focus Management for modal dialogs
- Color Contrast meeting WCAG standards
- Node.js 20+
- npm
- Running backend API
# Clone repository
git clone https://github.com/Punith1117/social-media-frontend.git
cd social-media-frontend
# Install dependencies
npm install
# Setup environment variables
cp .env.example .env
# Edit .env with your configuration:
VITE_API_BASE_URL=http://localhost:3000
VITE_APP_NAME=Social Media App
# Start development server
npm run dev
# Build and preview production build
npm run build && npm run previewpublic/: Static assets and index.htmlsrc/: Source code for the applicationsrc/components/: Reusable React componentssrc/context/: Global state management with Context APIsrc/hooks/: Custom React hooks for reusable logicsrc/pages/: Page-level components for routingsrc/services/: API service layer for data fetchingsrc/utils/: Utility functions for miscellaneous tasks
src/services/api.js: Centralized API service layer with Axios configurationJWT Authentication: Bearer token handling and automatic cleanup- RESTful Endpoints: Standard HTTP methods for CRUD operations
netlify.toml: Netlify configuration for deploymentvite.config.js: Vite configuration for development and production builds