Skip to content

Latest commit

 

History

History
107 lines (83 loc) · 2.76 KB

README.md

File metadata and controls

107 lines (83 loc) · 2.76 KB
Raw

ChatSphere: Realtime Chat Application

ChatSphere

Overview

ChatSphere is a Realtime Chat Application built using the MERN stack (MongoDB, Express.js, React.js, Node.js). It features message channels, direct messaging, emoji support, file uploads, and real-time interactions.

Features

  • Realtime Messaging
  • Message Channels & Direct Messages
  • Emoji Support
  • File Uploads and Downloads
  • Responsive UI

Dependencies

Frontend

  • vite: For building and bundling the application
  • react-router-dom: For routing
  • tailwindcss: For styling
  • fetch: For making HTTP requests
  • context API: For state management
  • Socket.IO: For real-time communication
  • Redux Toolkit: For state management
  • cookie: For authentication

Backend

  • express: For creating the server
  • mongoose: For interacting with MongoDB
  • cors: For handling Cross-Origin Resource Sharing
  • dotenv: For managing environment variables
  • zod: For user validation
  • bcryptjs: For hashing passwords
  • jsonwebtoken: For authentication
  • nodemon: For automatic server restarts during development

Environment Variables

Client (.env file)

VITE_API_URL="http://localhost:3000"

Server (.env file)

PORT=3000
ORIGIN="http://localhost:5173"
DATABASE_URL=
JWT_KEY=""
CLOUDINARY_CLOUD_NAME=""
CLOUDINARY_API_KEY=""
CLOUDINARY_API_SECRET=""

Setup Instructions

  1. Clone the repository: 
    git clone https://github.com/vivekPatil45/ChatSphere.git
cd ChatSphere
  2. Install dependencies for backend: 
     cd server
 npm install
  3. Install dependencies for frontend: 
     cd ../client
 npm install
  4. Run the application:
    • Start the backend server: 
          cd server
    npm start
    • Start the frontend development server: 
        cd ../client
  npm start

Technologies Used

  • MongoDB: Database
  • Express.js: Web framework for Node.js
  • React.js: Frontend library
  • Node.js: JavaScript runtime
  • Vite: Development server and build tool
  • Tailwind CSS: Utility-first CSS framework
  • Socket.IO: Real-time communication

Deployment

Deploy the dist directory from the client folder to your hosting platform of choice. Ensure that your backend server is also deployed and properly configured.

For more details, visit the ChatSphere GitHub repository.