Chat-Room

Screencast from 21-11-23 12:19:26 AM IST.webm

Summary

Introducing Chat-Room, a full-stack application crafted with React.js, Vite, and MDB Bootstrap on the frontend, seamlessly integrated with Node.js and Express.js on the backend. User authentication is securely handled through JWT tokens, while data finds its home in a MongoDB database. Real-time communication is facilitated by Socket.io, a renowned JavaScript library. This web application excels in providing real-time text-based communication

Technology Stack

  • Frontend: React.js, Vite, MDB Bootstrap
  • Backend: Node.js, Express.js, MongoDB
  • WebSocket: Socket.io
  • Authentication: JWT Tokens

Screenshots

Screenshot from 2023-11-21 00-01-30

Screenshot from 2023-11-21 00-32-09

Getting Started

Prerequisites:

  • Node.js installed on your system
  • A package manager like npm
  • A MongoDB database set up

Installation:

  1. Clone the repository:

    git clone https://github.com/s4chin-verma/Chat-Room.git
    
  2. Open the project folder in your code editor.

  3. Environment Variables

    Before running the frontend or backend, make sure to set up your environment variables. Create a .env file in the respective directories and define the following variables:

    • PORT: Set the server port, e.g., PORT = 4000
    • MONGO_URL: Specify your MongoDB connection URL, e.g., MONGO_URL = mongodb://localhost:27017/mydatabase
    • JWT_SECRET: Set your JSON Web Token secret, e.g., JWT_SECRET = mysecretkey
  4. Open the terminal of your code editor.

  5. Start the frontend development server:

    cd to-do
    npm install
    npm run dev
    This will launch the frontend application on http://localhost:5173.
    
  6. Start the backend server:

    cd server
    npm install
    npx nodemon index.js
    

Contributing

Contributions to this project are welcome! If you'd like to contribute, please follow these steps:

  1. Fork the project.
  2. Create a new branch for your feature or bug fix.
  3. Make your changes and commit them.
  4. Push your changes to your fork.
  5. Create a pull request to this repository.

Contact

If you have any questions or feedback, feel free to reach out to me:

Feel free to connect with me or follow for updates!

Happy Development πŸ‘πŸ˜ΊπŸ–€

Top categories

Loading Svelte Themes