Real-time Chat Application

A full-stack real-time chat application built with React, Socket.io, Express, and Node.js.

Features

• Real-time messaging using WebSockets
• Join and leave chat rooms
• Display active users in each room
• Message timestamps
• Typing indicators
• Responsive design with Tailwind CSS
• Dark mode support

Tech Stack

Frontend

• React
• Vite
• Socket.io-client
• React Router
• Tailwind CSS
• date-fns

Backend

• Node.js
• Express
• Socket.io
• CORS

Getting Started

Prerequisites

• Node.js (v16+)
• npm or yarn

Installation

1. Clone the repository

git clone <repository-url>
cd chat-app

2. Install frontend dependencies

npm install

3. Install backend dependencies

cd server
npm install
cd ..

Running the Application

1. Start the backend server

cd server
npm run dev

2. In a new terminal, start the frontend

npm run dev

3. Open your browser and navigate to http://localhost:5173

Deployment

Frontend (Vercel)

1. Push your code to a GitHub repository
2. Import the project in Vercel
3. Set the build command to npm run build
4. Set the output directory to dist

Backend (Render)

1. Create a new Web Service in Render
2. Connect your GitHub repository
3. Set the build command to cd server && npm install
4. Set the start command to cd server && npm start
5. Add environment variables:
   • NODE_ENV=production
   • CLIENT_URL=<your-frontend-url>

License

This project is licensed under the MIT License.