Chatty - Real-Time Messaging with React & Socket.IO

Build this project step by step with our detailed video walkthrough on Google Drive. Join the conversation!

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 🖼️ Assets
6. 🚀 Contributing

🚨 Video Walkthrough

This repository contains the code for a real-time chat application, demonstrated in a comprehensive video tutorial. Watch the walkthrough to learn how to build this app from scratch in a beginner-friendly way!

Video

🤖 Introduction

Chat-App is a modern, real-time messaging platform built with React, Socket.IO, Node.js, and Express. Featuring JWT-based authentication, 10+ customizable themes, and a sleek, responsive UI, it supports private and group chats, image sharing, and real-time notifications. Whether you're connecting with friends or collaborating with teams, Chat-App delivers a seamless and secure communication experience.

⚙️ Tech Stack

• React: A JavaScript library for building fast, interactive user interfaces with reusable components.
• Socket.IO: Enables real-time, bidirectional communication between clients and servers using WebSockets.
• Node.js: A runtime environment for executing JavaScript on the server, powering the backend.
• Express: A minimalist web framework for Node.js, used to build robust APIs for the chat app.
• Tailwind CSS: A utility-first CSS framework for designing custom, responsive interfaces efficiently.
• JWT: JSON Web Tokens for secure user authentication and session management.
• bcrypt: A library for hashing passwords to ensure secure storage.
• MongoDB: A NoSQL database for storing user data, chat history, and messages.

🔋 Features

👉 Real-Time Messaging: Instant chat with Socket.IO-powered WebSockets for seamless communication.
👉 JWT Authentication: Secure user sign-up and login with token-based validation.
👉 Customizable Themes: Choose from 10+ beautiful themes, including light and dark modes.
👉 Private & Group Chats: Engage in one-on-one or group conversations with ease.
👉 Image Sharing: Share images directly in chats for richer interactions.
👉 Real-Time Notifications: Get instant alerts for new messages and updates.
👉 Responsive Design: Enjoy a consistent experience across desktops, tablets, and mobiles.
👉 Secure Backend: Robust token validation and user session management.
👉 Modern UI/UX: Clean, intuitive interface built with Tailwind CSS and CSS Modules.
👉 Scalable Architecture: Modular codebase for easy maintenance and scalability.

🤸 Quick Start

Follow these steps to set up the Chat-App locally on your machine.

Prerequisites

Ensure you have the following installed:

• Git
• Node.js
• npm

Cloning the Repository

git clone https://github.com/yourusername/chat-app.git
cd chat-app

Installation

Install dependencies for both backend and frontend:

# Backend
cd server
npm install

# Frontend
cd ../client
npm install

Set Up Environment Variables

Create a .env file in the /server directory with the following:

PORT=5000
JWT_SECRET=your_jwt_secret
MONGO_URI=your_mongodb_connection_string

Replace your_jwt_secret with a secure key and your_mongodb_connection_string with your MongoDB connection string from MongoDB Atlas.

Running the Project

Start the backend and frontend servers:

# Backend
cd server
npm run dev

# Frontend (in a new terminal)
cd client
npm run dev

Open http://localhost:3000 in your browser to view the app.

🖼️ Assets

Explore the Chat-App's design with these demo images:

Light Theme

Dark Theme

Additional assets and snippets are available in the video walkthrough.

🚀 Contributing

We welcome contributions! To get started:

1. Fork the repository.
2. Create a new branch: git checkout -b feature/your-feature-name.
3. Make your changes and commit: git commit -m "Add your feature".
4. Push to the branch: git push origin feature/your-feature-name.
5. Open a pull request.

Please report bugs or suggest improvements via GitHub Issues.