A modern, real-time social media platform built with React, featuring instant messaging, video calling, post sharing, and user connections. Echo provides a seamless social experience across all devices with a mobile-first design approach.

• JWT-based authentication with automatic token refresh
• Secure login/signup with email verification
• Password reset functionality with email tokens
• Protected routes and session management

• Instant messaging with Socket.io
• Group and private conversations
• Message read receipts and online status
• Offline message notifications
• Real-time typing indicators

• WebRTC-powered video calls
• Audio-only calling option
• Call notifications and management
• Ice candidate exchange for peer connections

• Create and share posts with media
• Like, comment, and interact with posts
• Follow/unfollow users with connection management
• User profiles with customizable information
• Real-time activity feeds

• Material-UI design system
• Responsive design (mobile-first)
• Dark theme with custom styling
• Smooth animations and transitions
• 3D graphics with Three.js integration

• React 18.3.1 - Component-based UI framework
• Material-UI 6.5.0 - Modern design system and components
• TanStack React Query 5.84.1 - Data fetching, caching, and synchronization
• Socket.io Client 4.8.1 - Real-time bidirectional communication
• React Router DOM 7.1.1 - Client-side routing and navigation
• Axios 1.7.9 - HTTP client with interceptors and auto-retry

• React Query for server state management and caching
• Custom hooks for component-specific logic
• Local state with React hooks (useState, useEffect)
• Redux Toolkit for complex global state scenarios

• Socket.io for instant messaging and notifications
• WebRTC for peer-to-peer video/audio calling
• Real-time user status tracking (online/offline)

• Formik 2.4.6 - Robust form state management
• Yup 1.6.1 - Schema-based form validation
• Material-UI form components with custom styling

• React Player 2.16.0 - Video and audio playback
• React Cropper 2.3.3 - Advanced image editing
• Browser Image Compression 2.0.2 - Client-side image optimization
• ColorThief 2.6.0 - Dominant color extraction from images

• Three.js 0.172.0 - 3D rendering engine
• React Three Fiber 8.17.12 - React integration for Three.js
• React Three Drei 9.120.8 - Useful helpers and abstractions
• Spline React 4.0.0 - 3D design tool integration

Frontend/
├── public/                   # Static assets and HTML template
│   ├── index.html           # Main HTML file
│   ├── manifest.json        # PWA manifest
│   └── favicon.ico          # App icon
├── build/                   # Production build output
│   ├── static/              # Optimized assets
│   └── index.html           # Production HTML
└── src/                     # Source code
    ├── components/          # Reusable UI components
    │   ├── BottomNavigation/  # Mobile navigation
    │   ├── Calling/           # Video call interface
    │   ├── ChangePassword/    # Password management
    │   │   ├── ForgetPassword.js
    │   │   ├── UpdatePassword.js
    │   │   ├── ValidateToken.js
    │   │   └── Steps/         # Multi-step password reset
    │   ├── ChatPage/          # Chat interface components
    │   │   ├── Chat.js        # Main chat container
    │   │   ├── ChatSection.js # Message display area
    │   │   ├── ChatInput.js   # Message input component
    │   │   ├── ChatList.js    # Conversation list
    │   │   ├── Messages.js    # Message rendering
    │   │   └── CallingModal.js # Call initiation modal
    │   ├── LeftSidebar/       # Navigation sidebar
    │   │   ├── LGSidebar.js   # Large screen sidebar
    │   │   └── MDSidebar.js   # Medium screen sidebar
    │   ├── Login/             # Authentication components
    │   ├── Navbar/            # Top navigation
    │   │   ├── Navbar.js      # Main navigation bar
    │   │   ├── SearchDropdown.js
    │   │   └── SearchList.js
    │   ├── PostPage/          # Post-related components
    │   │   ├── Post.js        # Main post feed
    │   │   ├── PostCard.js    # Individual post display
    │   │   ├── CommentSection.js
    │   │   ├── AddComment.js
    │   │   └── PostLoading.js # Loading skeletons
    │   ├── Profile/           # User profile components
    │   │   ├── Profile.js     # Main profile page
    │   │   ├── ProfileHeader.js
    │   │   ├── About.js       # Profile about section
    │   │   ├── Connections.js # Followers/Following
    │   │   └── DeleteAccountModal.js
    │   ├── RightSidebar/      # Quick chat sidebar
    │   │   ├── LGQuickChat.js # Large screen quick chat
    │   │   ├── MDQuickChat.js # Medium screen quick chat
    │   │   └── QuickMessages.js
    │   ├── Signup/            # User registration
    │   └── uploadPost/        # Post creation components
    │       ├── UploadPost.js  # Main upload interface
    │       ├── PostCreator.js # Post composition
    │       ├── ImageCropper.js # Image editing
    │       └── Controls.js    # Upload controls
    ├── hooks/                 # Custom React hooks
    │   ├── useUser.js         # User authentication & data
    │   ├── useFeedPosts.js    # Post feed management
    │   ├── useChatMessages.js # Chat message handling
    │   ├── useConversationList.js # Chat conversations
    │   ├── useConversationSelection.js # Chat selection
    │   ├── useSelectedChatUser.js # Active chat user
    │   └── useConnections.js  # User relationships
    ├── utils/                 # Utility functions
    │   ├── socket.js          # Socket.io configuration
    │   └── webRTC.js          # WebRTC implementation
    ├── assets/                # Static assets
    │   ├── Echo.png           # Main logo
    │   ├── Login.jpg          # Authentication backgrounds
    │   ├── ChatBG.jpeg        # Chat background
    │   ├── female.jpg         # Default avatars
    │   └── male.jpg
    ├── App.js                 # Main application component
    ├── App.css               # Global styles
    ├── axiosInstance.js       # HTTP client configuration
    ├── index.js               # Application entry point
    └── index.css              # Base styles

• Node.js 16+ and npm/yarn
• Backend API server running
• Modern web browser with WebRTC support

1. Clone the repository

   git clone https://github.com/akashkhedar/Echo-Frontend.git
   cd Echo-Frontend

2. Install dependencies

   npm install

3. Environment Configuration The app automatically switches between environments:

   • Development: http://localhost:5000/api
   • Production: https://api.echo.linkpc.net/api

4. Start development server

   npm start

   Opens http://localhost:3000 in your browser.

• npm start - Run development server with hot reload
• npm run build - Build optimized production bundle
• npm test - Run Jest test suite
• npm run eject - Eject from Create React App (irreversible)

• Environment-based URLs with automatic switching
• Token refresh mechanism for expired JWTs
• Request/Response interceptors for error handling
• Credentials inclusion for authentication

• Auto-reconnection with exponential backoff
• Room management for chat conversations
• Event-based communication for real-time features
• Transport fallbacks (WebSocket → Polling)

• HomeLayout.js - Main application wrapper with navigation
• Responsive Grid - CSS Grid for adaptive layouts
• Breakpoint Management - Mobile, tablet, desktop optimizations

• Multi-step registration with email verification
• Password reset workflow with token validation
• Session persistence with automatic refresh
• Protected route guards for authenticated areas

• Conversation management with pagination
• Message encryption/decryption utilities
• File upload integration with progress tracking
• Typing indicators and read receipts

• Infinite scroll post feed with virtual scrolling
• Optimistic updates for instant user feedback
• Image upload with client-side compression
• User search with debounced API calls

• WebRTC peer connections with STUN/TURN servers
• Call signaling through Socket.io
• Media device management (camera/microphone)
• Call state management with cleanup

• Custom theme with brand colors and typography
• Responsive breakpoints for all screen sizes
• Component overrides for consistent styling
• Emotion styling for dynamic styles

• Component-scoped styles with CSS modules
• Global theme variables for consistency
• Mobile-first responsive design
• Performance-optimized animations

• useUser - Authentication state and user data
• useFeedPosts - Post feed with infinite scroll and caching
• useChatMessages - Chat messages with real-time updates
• useConversationList - Chat conversations with user status

• useConversationSelection - Chat conversation selection
• useSelectedChatUser - Active chat user management
• useConnections - User follow/unfollow relationships

• Custom WebRTC management for call initialization
• Media stream handling for camera/microphone
• Peer connection lifecycle management

• Intelligent caching with stale-while-revalidate
• Background refetching for fresh data
• Optimistic updates for instant UI feedback
• Query invalidation on mutations

• Route-based code splitting for smaller bundles
• Component lazy loading with React.lazy
• Dynamic imports for third-party libraries

• Client-side image compression before upload
• Responsive image loading with srcset
• Lazy loading for images and videos
• Progressive JPEG support

• JWT token management with secure storage
• Automatic token refresh before expiration
• CSRF protection with SameSite cookies
• XSS prevention with input sanitization

• Input validation with Yup schemas
• API request sanitization
• Secure WebRTC with STUN servers
• Content Security Policy headers

• Service Worker for offline functionality
• App manifest for install prompts
• Push notifications for chat messages
• Background sync for offline actions

• Touch-friendly interfaces with proper tap targets
• Swipe gestures for navigation
• Viewport optimization for all devices
• Battery-efficient animations and updates

• Three.js scenes for interactive elements
• Spline design integration for 3D models
• Performance monitoring for 3D rendering
• Fallbacks for low-performance devices

• Toast notification system with Notistack
• In-app notification center
• Sound alerts for messages and calls
• Push notification API integration

• Virtual scrolling for large lists
• Infinite scroll with intersection observer
• Drag and drop file uploads
• Advanced image cropping with multiple aspect ratios

• Jest for unit and integration tests
• React Testing Library for component testing
• User event simulation for interaction testing
• Mock service worker for API mocking

• Component rendering and behavior
• Custom hooks functionality
• API integration testing
• WebRTC connection testing

npm run build

• Bundle optimization with tree shaking
• Asset optimization (images, fonts, etc.)
• Source maps for debugging
• Performance budgets enforcement

• Static hosting (Netlify, Vercel, GitHub Pages)
• CDN distribution for global performance
• Docker containerization for consistent deployment
• CI/CD pipeline integration with GitHub Actions

• Automatic environment detection
• API endpoint configuration
• Feature flag management
• Environment-specific optimizations

• ESLint for code linting
• Prettier for code formatting
• Husky for git hooks
• Lint-staged for pre-commit checks

• Hot reload for instant feedback
• Error boundaries for graceful error handling
• Development tools integration
• Browser extension compatibility

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Install dependencies (npm install)
4. Make your changes
5. Run tests (npm test)
6. Commit changes (git commit -m 'Add amazing feature')
7. Push to branch (git push origin feature/amazing-feature)
8. Open a Pull Request

• Follow ESLint configuration
• Use TypeScript for new components
• Write comprehensive tests
• Document complex logic

{
  "@emotion/react": "^11.14.0",
  "@emotion/styled": "^11.14.0",
  "@mui/icons-material": "^6.3.1",
  "@mui/material": "^6.5.0",
  "@tanstack/react-query": "^5.84.1",
  "axios": "^1.7.9",
  "formik": "^2.4.6",
  "react": "^18.3.1",
  "react-router-dom": "^7.1.1",
  "socket.io-client": "^4.8.1",
  "three": "^0.172.0",
  "yup": "^1.6.1"
}

This project is licensed under the MIT License - see the LICENSE file for details.

• Echo Backend - Express.js API server
• Echo Mobile - React Native mobile app

• 📚 Check the documentation
• 🐛 Report bugs via GitHub Issues
• 💬 Join our Discord community

• Akash Khedar - @akashkhedar
• Email: akashkhedar@example.com
• LinkedIn: Akash Khedar

Built with ❤️ using React, Material-UI, and modern web technologies.

Echo - Where social connections come alive! 🌟