Chat App

This is a full-stack chat application built using React (with TypeScript) for the frontend and Node.js with Express for the backend. Real-time messaging is enabled using Socket.IO.

Features

• Real-time messaging using Socket.IO.
• User-friendly frontend built with React and TypeScript.
• Responsive UI design.
• Backend with Node.js and Express.
• WebSocket integration for bi-directional communication.
• Clean and modular codebase.

Tech Stack

Frontend

• React: UI Library.
• TypeScript: For type safety and better developer experience.
• React-Bootstrap: For styling components.

Backend

• Node.js: Runtime environment.
• Express: Web framework.
• Socket.IO: Real-time communication library.

Database

• MongoDB: For storing user and chat data.

---

Getting Started

Follow these steps to set up the project locally.

Prerequisites

Ensure you have the following installed:

• Node.js
• npm or yarn
• MongoDB (if you are running the database locally)

Installation

1. Clone the Repository:

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

2. Install Dependencies:

   For the frontend:

   cd frontend
   npm install

   For the backend:

   cd backend
   npm install

3. Set Up Environment Variables:

   • Navigate to the backend directory and create a .env file by copying the contents from .env.sample. Replace the placeholder values with your configuration.

   • Navigate to the frontend directory and create a .env file by copying the contents from .env.sample. Replace the placeholder values with your configuration.

   Ensure that all required variables are properly set for both the backend and frontend to avoid runtime issues.

4. Start the Application:

   Open two terminals: one for the backend and one for the frontend.

   Backend:

   cd backend
   npm run dev

   Frontend:

   cd frontend
   npm start

5. Access the App: Visit http://localhost:3000 in your browser.