Media X - Social Media Web Application

Mashrur Shaheer

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

web-client/
โ”œโ”€โ”€ src/
โ”‚ โ”œโ”€โ”€ components/ # Reusable UI components
โ”‚ โ”‚ โ”œโ”€โ”€ ui/ # Base UI components (Button, Input, etc.)
โ”‚ โ”‚ โ”œโ”€โ”€ layout/ # Layout components (Header, Navigation)
โ”‚ โ”‚ โ””โ”€โ”€ auth/ # Authentication components
โ”‚ โ”œโ”€โ”€ modules/ # Feature-based modules
โ”‚ โ”‚ โ”œโ”€โ”€ auth/ # Authentication module
โ”‚ โ”‚ โ”œโ”€โ”€ feed/ # Feed and posts module
โ”‚ โ”‚ โ”œโ”€โ”€ profile/ # User profiles module
โ”‚ โ”‚ โ”œโ”€โ”€ messaging/ # Messaging module
โ”‚ โ”‚ โ””โ”€โ”€ explore/ # Search and discovery module
โ”‚ โ”œโ”€โ”€ shared/ # Shared utilities and services
โ”‚ โ”‚ โ”œโ”€โ”€ stores/ # Global state stores
โ”‚ โ”‚ โ”œโ”€โ”€ services/ # API services
โ”‚ โ”‚ โ””โ”€โ”€ utils/ # Utility functions
โ”‚ โ”œโ”€โ”€ hooks/ # Custom React hooks
โ”‚ โ”œโ”€โ”€ types/ # TypeScript type definitions
โ”‚ โ””โ”€โ”€ assets/ # Static assets

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
git clone <repository-url>
cd web-client
Install dependencies
npm install
# or
yarn install
Start the development server
npm run dev
# or
yarn dev
Open your browser Navigate to http://localhost:3000

Available Scripts

npm run dev - Start development server
npm run build - Build for production
npm run preview - Preview production build
npm run lint - Run ESLint
npm run type-check - Run TypeScript type checking

๐Ÿ” Authentication

Demo Credentials

Email: demo@example.com
Password: password

Features

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:
VITE_API_URL=http://localhost:3001/api

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

npm run build

Deploy to Vercel

Connect your repository to Vercel
Set environment variables
Deploy automatically on push

Deploy to Netlify

Build the project
Upload the dist folder
Configure 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.