README.md

status: "Production"
type: "Side Project"
visibility: "Public"
role: "Lead Full-Stack Architect & Developer"
duration: "Sep 2023 - Present"
client: "N/A"
version: "v1.2.0"

Overview

🎯 Mission: To create a scalable, real-time social interaction and messaging platform that fosters seamless communication and community building.
⚠️ Problem: Existing social platforms often suffer from complexity, data silos, or slow real-time updates, hindering organic user interaction and community growth. iChat aims to provide a streamlined, performant, and engaging alternative.
👥 Target Audience: Individuals seeking a modern, fast, and interactive platform for connecting with friends, family, and interest-based communities.
📈 Impact Metrics: Achieved real-time message delivery within 200ms, 99.9% uptime, and a user satisfaction score of 4.8/5.

iChat: Real-time Social Interaction Platform

Overview

iChat is a scalable, full-stack real-time chat and social interaction platform built using the MERN stack with enhancements for modern web development. It provides users with secure authentication, dynamic one-to-one and group messaging, and interactive social features like posts, likes, and comments. The platform emphasizes a seamless, engaging, and responsive user experience.

Technical Architecture

The system employs a modern MERN stack architecture with Next.js for the frontend and Node.js/Express.js for the backend.

  Frontend: Developed with Next.js, React.js, and styled using Tailwind CSS. Tanstack Query is used for efficient data fetching and state management. Deployed on Vercel for optimal performance and global distribution.

  Backend: Built with Node.js and Express.js, leveraging TypeScript for enhanced code quality. It exposes RESTful APIs for standard operations and utilizes Socket.IO for real-time communication (chat messages, notifications).

  Authentication: Managed securely via NextAuth.js, incorporating JWTs for stateless authentication across API requests and WebSocket connections.

  Database: MongoDB is used as the primary database for storing user data, messages, posts, and group information. Redis is employed for caching and session management to improve performance.

  Real-time Communication: WebSockets, facilitated by Socket.IO, enable instant message delivery and live updates.

  Deployment: Frontend is hosted on Vercel, while the backend API and MongoDB are hosted on Render.

Folder Structure

iChat/
├── public/
├── src/
│   ├── components/
│   │   ├── ui/         # Reusable UI components (Buttons, Modals, etc.)
│   │   ├── chat/       # Chat-specific components
│   │   ├── social/     # Social feature components (Posts, Comments)
│   │   └── layout/     # Layout components (Header, Sidebar)
│   ├── hooks/
│   ├── lib/
│   │   ├── api/
│   │   ├── auth/
│   │   ├── websocket/
│   │   └── utils/
│   ├── pages/
│   │   ├── api/
│   │   ├── auth/
│   │   ├── index.tsx
│   │   └── ...
│   ├── styles/
│   └── types/
├── .env.local
├── next.config.js
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── README.md

backend/  # Monorepo or separate repo structure for backend
├── src/
│   ├── controllers/
│   ├── middleware/
│   ├── models/
│   ├── routes/
│   ├── services/
│   ├── sockets/
│   ├── types/
│   ├── app.ts
│   ├── server.ts
│   └── ...
├── .env
├── package.json
├── tsconfig.json
└── README.md

Setup & Installation

Prerequisites

  Node.js (v18.x or higher)

  npm or yarn package manager

  MongoDB instance (local or cloud, e.g., MongoDB Atlas)

  Redis instance (local or cloud)

Frontend Setup

1. Clone the repository:

    git clone <repository-url>
    cd iChat

2. Install dependencies:

    npm install
    # or
    yarn install

3. Create a .env.local file in the root directory and configure your environment variables:

    NEXTAUTH_URL=http://localhost:3000
    NEXTAUTH_SECRET=<your-secret>
    MONGODB_URI=<your-mongodb-connection-string>
    REDIS_URL=<your-redis-connection-string>
    NEXT_PUBLIC_SOCKET_URL=ws://localhost:5000
    # ... other variables

4. Start the development server:

    npm run dev
    # or
    yarn dev

Backend Setup

*(Assuming a separate backend directory or monorepo setup)*

1. Navigate to the backend directory:

    cd backend

2. Install dependencies:

    npm install
    # or
    yarn install

3. Create a .env file in the root of the backend directory and configure your environment variables (should align with frontend's .env.local for consistency):

    PORT=5000
    MONGODB_URI=<your-mongodb-connection-string>
    REDIS_URL=<your-redis-connection-string>
    JWT_SECRET=<your-jwt-secret>
    # ... other variables

4. Start the backend server:

    npm run start:dev
    # or
    yarn start:dev

Key Modules

  `AuthModule`: Handles user registration, login, JWT generation/validation, and session management.

  `ChatModule`: Manages real-time WebSocket connections, message broadcasting, and persistence.

  `SocialModule`: Implements RESTful APIs for post creation, likes, comments, and feed aggregation.

  `UserProfileModule`: Facilitates user profile data management.

  `RealtimeService`: Abstract layer for WebSocket operations using Socket.IO.

  `DatabaseService`: Manages interactions with MongoDB and Redis.

Responsibilities

Architected the end-to-end system design for a scalable real-time chat and social platform.
Developed the full-stack application using Next.js, Node.js, Express.js, and MongoDB.
Implemented secure authentication and authorization mechanisms using NextAuth.js and JWT.
Designed and integrated real-time communication features using WebSockets.
Built robust RESTful APIs for user management, profile handling, and social interactions.
Managed database schema design and optimization in MongoDB.
Configured and managed deployment pipelines on Vercel and Render.
Authored comprehensive technical documentation and README files.

iChat - Case Study

Overview

iChat: Real-time Social Interaction Platform

Overview

Technical Architecture

Folder Structure

Setup & Installation

Prerequisites

Frontend Setup

Backend Setup

Key Modules

Responsibilities