Media X - Social Media Web Application
Mashrur Shaheer
Media X - Social Media Web Application
A modern React-based social media web application built with Vite.js, featuring a micro-frontend architecture and responsive design.
🚀 Features
Core Features
Authentication System: Login, signup, and password recovery
Social Feed: Instagram-like feed with stories and posts
User Profiles: Complete profile management with posts grid
Search & Discovery: Advanced user search functionality
Messaging: Real-time chat interface (coming soon)
Post Creation: Rich post creation with cross-posting options
Responsive Design: Mobile-first design approach
Technical Features
Micro-frontend Architecture: Modular component structure
TypeScript: Full type safety throughout the application
Tailwind CSS: Modern utility-first styling
State Management: Zustand for global state management
Form Handling: React Hook Form with Zod validation
Routing: React Router with protected routes
API Integration: Axios with interceptors for authentication
Toast Notifications: React Hot Toast for user feedback
🏗️ Architecture
Project Structure
Technology Stack
Frontend Framework: React 18 with TypeScript
Build Tool: Vite.js
Styling: Tailwind CSS
State Management: Zustand
Routing: React Router DOM
Forms: React Hook Form + Zod
HTTP Client: Axios
Icons: Lucide React
Notifications: React Hot Toast
Animations: Framer Motion
🎨 Design System
Color Palette
Primary:
#00B894 (Teal/Green)Background:
#FFFFFF (White)Text:
#1A1A1A (Dark Gray)Borders:
#E5E5E5 (Light Gray)Success:
#00B894 (Green)Error:
#FF6B6B (Red)Warning:
#FFA726 (Orange)Typography
Font Family: Inter (Google Fonts)
Weights: 300, 400, 500, 600, 700
Components
Buttons: Primary, Secondary, Outline, Ghost variants
Inputs: With icons, validation states, and helper text
Cards: Consistent card components with shadows
Navigation: Bottom navigation with active states
🚀 Getting Started
Prerequisites
Node.js (v16 or higher)
npm or yarn
Installation
Clone the repository
Install dependencies
Start the development server
Open your browser Navigate to
http://localhost:3000Available Scripts
npm run dev - Start development servernpm run build - Build for productionnpm run preview - Preview production buildnpm run lint - Run ESLintnpm run type-check - Run TypeScript type checking🔐 Authentication
Demo Credentials
Email:
demo@example.comPassword:
passwordFeatures
Email/password authentication
Social login (Facebook, Google) - Mock implementation
Password recovery
Protected routes
Persistent authentication state
📱 Pages & Features
Authentication Pages
Login: Email/password and social login
Signup: User registration with validation
Forgot Password: Password recovery flow
Main Application
Home Feed: Stories and posts with interactions
Search: User discovery and search
Messages: Chat conversations list
Profile: User profile with posts grid
Create Post: Post creation with cross-posting
🎯 Key Features
Feed System
Stories: Instagram-like stories with add functionality
Posts: User posts with like, comment, share actions
Post Navigation: Multi-post users with navigation arrows
Real-time Interactions: Like feedback and engagement
User Management
Profile Pages: Complete user profiles with stats
Follow System: Follow/unfollow functionality
User Search: Advanced search with filters
Profile Editing: Edit profile information
Post System
Rich Content: Text, images, and videos
Cross-posting: Share to Facebook and Twitter
Privacy Settings: Public/private post options
Engagement: Likes, comments, and shares
🔧 Configuration
Environment Variables
Create a
.env file in the root directory:Tailwind Configuration
The project uses a custom Tailwind configuration with:
Custom color palette matching the design
Custom animations and transitions
Responsive breakpoints
Component-specific utilities
🧪 Development
Code Style
ESLint: Configured for React and TypeScript
Prettier: Code formatting
TypeScript: Strict type checking
Component Development
Atomic Design: Components follow atomic design principles
Props Interface: All components have TypeScript interfaces
Default Props: Sensible defaults for all components
Accessibility: ARIA labels and keyboard navigation
State Management
Zustand: Lightweight state management
Persistent State: Authentication state persists across sessions
Type Safety: Fully typed state and actions
🚀 Deployment
Build for Production
Deploy to Vercel
Connect your repository to Vercel
Set environment variables
Deploy automatically on push
Deploy to Netlify
Build the project
Upload the
dist folderConfigure redirects for SPA routing
🔮 Future Enhancements
Planned Features
Real-time Chat: WebSocket integration for messaging
Image Upload: Cloud storage integration
Video Support: Video upload and playback
Notifications: Push notifications
Dark Mode: Theme switching
PWA: Progressive Web App features
Technical Improvements
Unit Tests: Jest and React Testing Library
E2E Tests: Cypress or Playwright
Performance: Code splitting and lazy loading
SEO: Meta tags and structured data
Analytics: User behavior tracking
🤝 Contributing
Fork the repository
Create a feature branch
Make your changes
Add tests if applicable
Submit a pull request
📄 License
This project is licensed under the MIT License.
🆘 Support
For support and questions:
Create an issue in the repository
Check the documentation
Review the code examples
Built with ❤️ using React, TypeScript, and Tailwind CSS
Like this project
Posted Oct 22, 2025
Developed a scalable React + Vite social media app; optimized real-time feeds, increased user retention by 45%, & enhanced UX.
