Twitter Clone (Wasi Genius) 🐦

A full-stack, production-level Twitter Clone built with modern web technologies. This project demonstrates advanced skills in scalable backend development, responsive frontend engineering, authentication, real-time features, and clean code architecture.

Table of Contents

• Demo
• Features
• Architecture
• Tech Stack
• Project Structure
• Setup & Installation
• API Documentation
• Contact

---

Overview Demo

---

Features

• Authentication & Authorization
  • Secure JWT-based login/sign up
  • Protected routes and session management
  • Hashed passwords and password comparison using Bcrypt

Authentication.Authorization.Demo.mp4

• User Profiles
  • View, edit, and update profile details
  • Upload avatar and banner images
  • View user, liked, and bookmarked posts

User.Profiles.Demo.mp4

• Posts
  • Create and delete posts
  • Like, comment, repost, and bookmark posts
    • Delete comments and undo bookmarks and likes
  • Upload viewable images

Posts.Demo.mp4

• Follow System
  • Follow/unfollow users
  • View followers and following
  • Personalized feed based on followed users
  • Who to follow panel

Follow.System.Demo.mp4

• Notifications
  • Real-time notifications for follows, likes, comments, and bookmarks
  • Delete one notification at a time or all notifications at once

Notifications.Demo.mp4

• Responsive UI
  • Mobile and desktop compatible design
  • Skeleton loaders for improved UX
  • Real time data fetching and UI changes

Responsive.UI.Demo.mp4

• Utilities
  • Date formatting
  • Custom hooks for state management
  • Seamless database integration and mutation

---

Architecture

The project is organized into a backend and front end:

• Backend (Node.js, Express, MongoDB)

  • RESTful API design
  • Modular controllers, models, and routes
  • Middleware for authentication and error handling
  • MongoDB for scalable data storage

• Frontend (React, Vite)

  • Component-based architecture
  • Custom hooks for business logic
  • Context API for global state
  • Optimized for performance and accessibility

---

Tech Stack

Layer	Technology	Purpose
Frontend	React, Vite, CSS Modules	UI, SPA, Fast Dev Experience
Backend	Node.js, Express	API, Business Logic
Database	MongoDB, Mongoose	Data Storage & Modeling
Auth	JWT, Custom Middleware, Bcrypt	Secure Authentication
Utilities	ESLint, Custom Hooks	Code Quality, State Management

---

Project Structure

Twitter-Clone/
├── backend/
│   ├── controllers/        # API logic
│   ├── db/                 # DB connection
│   ├── lib/                # Utility functions
│   ├── middleware/         # Auth & error handling
│   ├── models/             # Mongoose schemas
│   └── routes/             # API endpoints
├── frontend/
│   ├── public/             # Static assets
│   └── src/
│       ├── components/     # Reusable UI
│       ├── hooks/          # Custom hooks
│       ├── pages/          # Route-based pages
│       └── utils/          # Helper functions
└── package.json

---

Setup & Installation

Prerequisites

• Node.js (v18+ recommended)
• npm
• MongoDB (local or Atlas)

Backend

cd backend
npm install
# Create a .env file with MONGODB_URI and JWT_SECRET
npm start

Frontend

cd frontend
npm install
npm run dev

Environment Variables

Create a .env file in backend/:

MONGODB_URI=your-mongodb-uri
JWT_SECRET=your-jwt-secret
CLOUDINARY_CLOUD_NAME=your-cloudinary-name
CLOUDINARY_API_KEY=6=your-cloudinary-api-key
ClOUDINARY_API_SECRET=your-cloudinary-api-secret

---

API Documentation

The backend exposes RESTful endpoints for authentication, posts, users, and notifications. Sample endpoints:

• POST /api/auth/signup - Register a new user
• POST /api/auth/login - Login and receive JWT
• GET /api/posts - Fetch posts for feed
• POST /api/posts - Create a new post
• GET /api/users/:id - Get user profile
• POST /api/users/:id/follow - Follow a user
• GET /api/notifications - Get notifications

---

Contact

Created by Wasi Genius
Feel free to reach out via LinkedIn or email for collaboration or questions.

---