Echo - Social Media Platform (Frontend)

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.

🌟 Key Features

🔐 Authentication & Security

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

💬 Real-time Chat System

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

📞 Video & Audio Calling

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

📱 Social Features

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

🎨 Modern UI/UX

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

🏗️ Technical Architecture

Core Technologies

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

State Management

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

Real-time Features

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

Form Handling & Validation

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

Media & File Processing

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

3D Graphics & Visuals

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

📁 Project Structure

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

🚀 Getting Started

Prerequisites

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

Installation

Clone the repository

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

Install dependencies
```
npm install
```
Environment Configuration The app automatically switches between environments:
- Development: http://localhost:5000/api
- Production: https://api.echo.linkpc.net/api
Start development server
```
npm start
```
Opens http://localhost:3000 in your browser.

Available Scripts

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)

🌐 API Integration

Axios Configuration

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

Socket.io Configuration

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

📱 Component Architecture

Layout System

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

Feature Modules

Authentication Flow

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

Real-time Chat

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

Social Features

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

Video Calling System

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

🎨 Styling & Theming

Material-UI Integration

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

CSS Architecture

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

🔧 Custom Hooks

Data Management Hooks

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

UI State Hooks

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

WebRTC Hooks

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

🚀 Performance Optimizations

React Query Strategies

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

Code Splitting & Lazy Loading

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

Image & Media Optimization

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

🔒 Security Implementation

Authentication Security

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

Data Protection

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

📱 Progressive Web App Features

PWA Implementation

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

Mobile Optimization

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

🌟 Advanced Features

3D Graphics Integration

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

Real-time Notifications

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

Advanced UI Components

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

🧪 Testing Strategy

Testing Setup

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

Test Coverage

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

📦 Build & Deployment

Production Build Process

npm run build

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

Deployment Options

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

Environment Management

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

🔧 Development Tools

Code Quality

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

Development Experience

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

🤝 Contributing

Development Setup

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

Code Style Guidelines

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

📋 Dependencies

Production Dependencies

{
  "@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"
}

📄 License

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

🔗 Related Projects

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

📞 Support & Contact

Getting Help

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

Maintainer

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! 🌟

Name		Name	Last commit message	Last commit date
Latest commit History 95 Commits
public		public
src		src
.gitignore		.gitignore
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

Folders and files

Latest commit

History

Repository files navigation