Skip to content

Latest commit

 

History

History
126 lines (94 loc) · 3.26 KB

README.md

File metadata and controls

126 lines (94 loc) · 3.26 KB

Chirpy-Chat

A real-time chat application built using the MERN stack (MongoDB, Express, React, Node.js) and Socket.IO for real-time communication.

Deployed link: chirpy-chat

Features

  • Group messaging: Users can create groups and send messages to multiple participants.
  • Personal messaging: Users can have one-on-one conversations with other users.
  • User search: Users can search for other users and initiate conversations.
  • Emoji support: Users can send emojis in their messages.
  • Admin privileges: Only administrators can add people to groups.
  • Authentication and authorization: JWT-based authentication system to ensure secure access.
  • Toast notifications: React-Toastify for displaying user-friendly notifications.

Installation

  • Clone the repository:

bash

git clone https://github.com/your-username/chat-application.git
  • Change to the project directory:
cd chat-application
  • Install dependencies:
npm install

Configure the application:

Update the .env files in both frontend and backend

  • For frontend;
REACT_APP_URL=http://localhost:4000
  • For backend:
PORT=4000
MONGODB_URI= your mondodburl
JWT_SECRET=yoursecret
JWT_LIFETIME= 40m

Start the development server:

    npm run dev

Open your browser and navigate to http://localhost:3000 to access the application.

Technologies Used

  • Front-end:
    • React: JavaScript library for building user interfaces.
    • Socket.IO: Real-time communication library.
    • React-Toastify: Library for displaying toast notifications.
    • HTML5 and CSS3: Markup and styling of the application.
  • Back-end:
    • Node.js: JavaScript runtime environment.
    • Express: Web application framework for Node.js.
    • MongoDB: NoSQL database for storing user information and chat messages.
    • Socket.IO: Real-time communication library.
    • Bcrypt: Library for password hashing and verification.
    • Validator: Library for input validation.

File Structure

├── frontend
│   ├── public
│   └── src
│       ├── components
│       ├── config
│       ├── context
│       ├── pages
│       ├── App.js
│       └── index.js
├── backend
│   ├── controllers
│   ├── middleware
│   ├── models
│   ├── routes
│   ├── index.js
│   └── .env
└── README.md

Usage:

  • Register a new account:

    • Open the application in your browser.
    • Enter your name, email, and password.
    • Click on the "Register" button
    • Click on the "Submit" button to register your account.

  • Log in:

    • Enter your email and password.
    • Click on the "Submit" button to log in.

  • Start a new conversation:

    • Search for the user you want to chat with.
    • Click on the user's name to open the conversation.

  • Join or create a group:

    • Only administrators can add people to groups.
    • Create a new group or select an existing group.
    • Add users to the group to enable group messaging.

Contributing

All contributions are welcome.