Full-Stack Real-Time Chat Application

A modern real-time chat application built with React.js frontend and Node.js backend, featuring Socket.io for real-time messaging, MongoDB for data storage, and Cloudinary for image uploads.

🚀 Features

• Real-time messaging with Socket.io
• User authentication with JWT tokens
• Image sharing with Cloudinary integration
• Online/Offline status indicators
• Message seen/unseen functionality
• Responsive design with Tailwind CSS
• Profile management with image uploads
• Search functionality for users
• Mobile-friendly interface

🛠️ Tech Stack

Frontend

• React.js 19 - UI library
• Vite - Build tool
• Tailwind CSS - Styling
• React Router - Navigation
• Socket.io Client - Real-time communication
• Axios - HTTP requests
• React Hot Toast - Notifications

Backend

• Node.js - Runtime environment
• Express.js - Web framework
• Socket.io - Real-time communication
• MongoDB - Database
• Mongoose - ODM
• JWT - Authentication
• Bcrypt - Password hashing
• Cloudinary - Image storage
• CORS - Cross-origin requests

📁 Project Structure

Chat-App/
├── client/                 # React frontend
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── pages/         # Page components
│   │   ├── context/       # React context providers
│   │   ├── assets/        # Static assets
│   │   └── lib/           # Utility functions
│   ├── public/            # Public assets
│   └── package.json       # Frontend dependencies
├── server/                # Node.js backend
│   ├── controllers/       # Route controllers
│   ├── models/           # Database models
│   ├── routes/           # API routes
│   ├── lib/              # Utility functions
│   ├── middleware/       # Custom middleware
│   └── package.json      # Backend dependencies
└── README.md

🚀 Quick Start

Prerequisites

• Node.js (v18 or higher)
• MongoDB Atlas account or local MongoDB
• Cloudinary account (for image uploads)

Installation

1. Clone the repository

   git clone https://github.com/Placeboguy/fullstack-chat234243.git
   cd fullstack-chat234243

2. Install backend dependencies

   cd server
   npm install

3. Install frontend dependencies

   cd ../client
   npm install

4. Set up environment variables

   Create .env file in the server directory:

   MONGODB_URI=your_mongodb_connection_string
   JWT_SECRET=your_jwt_secret_key
   CLOUDINARY_CLOUD_NAME=your_cloudinary_name
   CLOUDINARY_API_KEY=your_cloudinary_api_key
   CLOUDINARY_API_SECRET=your_cloudinary_api_secret
   PORT=5000

   Create .env file in the client directory:

   VITE_BACKEND_URL=http://localhost:5000

5. Start the application

   Start backend server:

   cd server
   npm start

   Start frontend development server:

   cd client
   npm run dev

6. Open your browser

   • Frontend: http://localhost:5173
   • Backend: http://localhost:5000

🌐 Deployment

This application is configured for deployment on Render (recommended for real-time applications):

Backend Deployment (Render)

1. Connect your GitHub repository to Render
2. Create a new Web Service
3. Set root directory to server
4. Add environment variables
5. Deploy

Frontend Deployment (Render)

1. Create a new Static Site
2. Set root directory to client
3. Build command: npm install && npm run build
4. Publish directory: dist

Note: Update the CORS settings in server.js and .env.production with your actual deployment URLs.

📱 Features Walkthrough

Authentication

• Sign up with email, password, and profile details
• Login with email and password
• JWT-based session management
• Automatic logout on token expiration

Real-time Chat

• Instant messaging with Socket.io
• Online status indicators
• Message timestamps
• Image sharing capabilities
• Seen/unseen message status

User Interface

• Responsive design for all devices
• Search users functionality
• Profile management
• Clean, modern UI with Tailwind CSS

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Prathamesh_Singh

• GitHub: @Prathamesh-Singh

🙏 Acknowledgments

• Socket.io for real-time communication
• Cloudinary for image hosting
• MongoDB for database
• React and Node.js communities

---

Happy Chatting! 💬