Skip to content

Latest commit

 

History

History
365 lines (270 loc) · 12.6 KB

README.MD

File metadata and controls

365 lines (270 loc) · 12.6 KB
Raw

ChatMind - A Real-Time Chat Webapp.

ChatMind is a full stack chat application that allows users to communicate with each other in real-time. It supports features like user authentication, one-on-one chat, group chat, user profile management, and more.

If you find this project helpful, please consider giving it a star ⭐ and follow me on GitHub && X for more exciting projects like this! 🚀

⚙️   Time Taken in Completion of Project :

wakatime

Tech Stack:

MERN Stack MongoDB Express.js React Node.js Chakra UI CSS3 Socket.IO

Table of Contents 📜

Demo 📸

Demo

Table

Intro 📝

ChatMind is a chat application built with the MERN stack. It provides a seamless and real-time chatting experience for users. With features like user authentication, one-on-one chat, group chat, and user profile management, ChatMind offers a comprehensive solution for communication needs.

Sections 🔖

  • Home
    • Login Page
    • Sign Up Page
    • Forgot Password Page
  • Chat Page
    • Search User
    • One-on-One Chat
    • Group Chat
    • User Profile
    • Group Menu

Installation ⬇️

To run ChatMind locally, you will need to have Git and Node.js installed on your machine.

Git

Download and install Git from the official website: https://git-scm.com/downloads

Node.js

Download and install Node.js from the official website: https://nodejs.org

Getting Started 🎯

To get started with ChatMind, follow these steps:

  1. Fork and clone the repository from GitHub:

    git clone https://github.com/MehraDevesh2022/chat-mind.git

Install the required packages for the backend by running the following command in the root directory:

npm install 
or 
yarn add

Install the required packages for the frontend by navigating to the frontend directory and running the following command:

cd ./frontend 
npm install
or
yarn add

Run the backend server by running the following command in the root directory:

  npm start
  or
  yarn start

Run the frontend server by navigating to the frontend directory and running the following command:

    cd ./frontend
    npm start
    or
    yarn start

Folder Structure 📂

  • backend
    • app.js
    • appUtils
      • error.js
      • jwtToken.js
    • controller
      • chatController.js
      • messageController.js
      • userController.js
    • db
      • connectDB.js
    • middleware
      • asyncWrapper.js
      • auth.js
      • errorHandler.js
    • model
      • ChatModel.js
      • MessageModel.js
      • UserModel.js
    • route
      • chatRoute.js
      • messageRoutes.js
      • userRoute.js
    • utils
      • .env
  • frontend
    • build
      • asset-manifest.json
      • favicon.ico
      • index.html
      • logo192.png
      • logo512.png
      • manifest.json
      • robots.txt
    • public
      • favicon.ico
      • index.html
      • logo192.png
      • logo512.png
      • manifest.json
      • robots.txt
    • src
      • App.css
      • App.js
      • index.css
      • index.js
      • reportWebVitals.js
    • animations
      • typing.json
    • components
      • Chatbox.js
      • ChatLoading.js
      • EmojiOptions.js
      • MyChats.js
      • ScrollableChat.js
      • SingleChat.js
      • styles.css
    • config
      • ChatLogics.js
    • Context
      • ChatProvider.js
    • img
      • img.jpg
    • Pages
      • Chatpage.js
      • Homepage.css
      • Homepage.js

Setting Up .env in Backend 🔧

To set up the environment variables for the backend, create a .env file inside the backend/utils directory with the following contents:

PORT=5000
DB_LINK=xxxx
JWT_SECRET=xxxx
JWT_EXPIRE=2d
COOKIE_EXPIRE=2
NODE_ENV=production
CLOUDINARY_NAME=xxxx
API_KEY=xxxx
API_SECRET=xxxx
CLOUDINARY_URL=xxxx
  • Make sure to replace xxxx with your actual values.

Hosting 🌐 at Railway.

  1. Go to https://railway.app/.

    • This is the Railway platform where you can host your applications.

  2. Log in using your GitHub account.

    • Click on the login option and authenticate with your GitHub credentials.

  3. Start a New Project.

    • Once you are logged in, click on "Start a New Project."

  4. Add your GitHub repository.

    • Choose the repository of your MERN stack app that you want to deploy.

  5. Deploy your app.

    • After adding the repository, select the repository you want to deploy.

  6. Configure environment variables.

    • If your app requires environment variables (such as API keys, database credentials, etc.), navigate to the variables section and enter them there.

  7. Paste the .env file content.

    • If your app uses an .env file locally, copy and paste its contents into the Railway platform's environment variable section.

  8. Generate the domain.

    • Go to the settings and generate a domain for your deployed app.

  9. You're all set to go!

    • Your MERN stack app is now deployed and accessible using the generated domain.

Hosting 🌐

ChatMind can be hosted using the Render platform. Follow these steps to deploy ChatMind: https://chat-mind-3pcx.onrender.com/

  1. Build the frontend by running the following command in the frontend directory: npm run build
  2. Add the following deployment code to the app.js file in the backend directory:
 // -----deployment code----- 

const path = require("path");
const __dirname1 = path.resolve(); 
if (process.env.NODE_ENV === "production") {
 
  app.use(express.static(path.join(__dirname1, "/frontend/build"))); 
  app.get("*", (req, res) => res.sendFile( path.resolve(__dirname1, "frontend", "build", "index.html") ) );

}
else {

 app.get("/", (req, res) => { res.send("API is running..");

  }); 
  }

 // -----deployment code ends-----

3 Push the code to a Git repository (GitHub, GitLab, or Bitbucket). 4 Sign up for Render and select "Web Services" from the dashboard. 5 Choose the repository from GitHub, GitLab, or Bitbucket. 6 Add a project name and select the runtime as Node. 7 Set the build command to npm install or yarn install. 8 Set the start command to node backend/app.js or npm start or yarn start. 9 Go to the "Advanced" tab and add all the environment keys and their corresponding values from the .env file. 10 Create the web service. 11 Once the web service is created, go to the "Overview" tab and click on the link to view the application.

Packages Used 📦

Server side :

Dependency Description
bcryptjs Library for hashing and salting passwords
body-parser Middleware for parsing request bodies
cookie-parser Middleware for parsing cookies
cors Middleware for enabling Cross-Origin Resource Sharing
dotenv Library for loading environment variables from a file
express Web application framework for Node.js
express-fileupload Middleware for handling file uploads
jsonwebtoken Library for generating and verifying JSON Web Tokens
mongoose MongoDB object modeling tool for Node.js
multer Middleware for handling file uploads
nodemailer Library for sending emails
cloudinary Cloud-based image and video management platform

Clint-side :

Dependency Description
@chakra-ui/icons Icon library for Chakra UI
@chakra-ui/react UI component library for React with Chakra UI
@emotion/react Library for writing CSS styles with JavaScript
@emotion/styled Library for styling React components with Emotion
@material-ui/core Material-UI component library for React
@material-ui/icons Material-UI icons package for React
@mui/icons-material Material-UI icons package for MUI (formerly Material-UI)
@mui/material UI component library for React with MUI (formerly Material-UI)
axios Promise-based HTTP client for the browser and Node.js
framer-motion Library for creating fluid animations in React
react JavaScript library for building user interfaces
react-chips React component for input chips
react-dom Entry point for React DOM rendering
react-helmet Library for managing document head tags in React
react-lottie Library for adding Lottie animations to React applications
react-notification-badge Notification badge component for React
react-router-dom Routing library for React applications
react-scripts Configuration and scripts for Create React App
react-scrollable-feed Scrollable feed component for React
socket.io-client Library for WebSocket communication in the browser
styled-components Library for styling React components with CSS-in-JS

Upcoming Features 🚀

  • AI Chat using Open Ai api
  • Dark mode
  • Audio and video calls
  • Rest password
  • Media sharing
  • And More ....

Raise an issue for 📝

    • Found a bug
    • Add new service
    • For adding Upcoming Features
    • For Improving Documentation
    • And More ....

Contribution Guidelines 🤝

contributions are welcome! To contribute to ChatMind, follow these steps:

  • Fork the repository.
  • Create a new branch.
  • Make your changes.
  • Commit your changes.
  • Push to the branch.
  • Open a pull request.

Contributors 🤝

@MehraDevesh2022

Happy chatting with ChatMind! If you have any questions or need further assistance, feel free to reach out.