A socket.io based real time chat app where you can perform one-to-one chats as well as group chats! Built using MERN stack, this project implements all core functionalities like User Authentication, Web Sockets, CRUD Operations, Routing and much more!
APACHE-2.0 License
SpaceChat is a realtime chat app that allows you to chat with your friends in pairs as well as in groups!
https://spacechatapp.herokuapp.com/
SpaceChat lets you create an account on the server! Once successful, you can click on the + button in chat panel, search for your friends and start chatting with them!
The project at its core is built on MERN Stack which stands for (MongoDB, ExpressJS, ReactJS and NodeJS)
SpaceChat offers realtime communication! This is achieved using the power of socket.io which is a popular library to establish bidirectional low-latency communication between client and server!
SpaceChat lets you create one to one chats as well as group chats! All you need to do is to create on Group Chat tab in the create chat dialog box then type the group name and add the group members using their username or email, and then you are good to go!
If you want to clone this project and customize it further, you need to do a couple of tasks first:
PORT = 5000
MONGO_URI=mongodb+srv://YOUR_MONGO_CLOUD_USERNAME:[email protected]/Cluster0?retryWrites=true&w=majority
NODE_ENV=development
JWT_CODE=abc123xyz987
The purpose of this project is to demonstrate how a person can
# Root Package
.
├── backend # All our backend code
| ├── config # Configuration files like db.js to configure MongoDB
| ├── constants # Files with some constant data like default profile picture url
| ├── controllers # Files that contain all our logic corresponding to specific routes
│ ├── middlewares # Contains files like authMiddleware which will check whether user is authenticated or not on any incoming request
│ ├── models # Files that define the structure of each user, chat and message in MongoDB
│ ├── routes # Defines endpoints of our backend
│ ├── util # Utility files for generating JWT token and enhancing the workflow of project
│ └── server.js # Main backend file that starts our server and binds everything together
|
├── frontend # All our frontend code
| ├── build # Folder that binds our backend code for production purpose, to generate it, use npm run build
│ ├── public # Contains files that can be accessed publically such as index.html
│ └── src # Our core frontend code consisting of all views and react components
|
|
└── ProcFile # [Optional] Used to deploy the app on heroku
# ReactJS frontend -> src
.
├── src # Our core frontend code consisting of all views and react components
| ├── data # Contains data files for lottie json animations, color codes and themes
| ├── constants # Contains constant files like auth configurations and url endpoints
| ├── components # Contains UI component files for dialog boxes, snackbars, single user in inbox etc
│ ├── pages # Contains files to represent the screen for each route like LandingPage.js for '/', HomePage.js for '/home' etc
│ ├── logic # Contains folders and files to represent the frontend business logic for fetching data from our backend API
│ ├── util # Contains utility functions for formatting strings and dates
│ ├── styles # Contains javascript style configurations for dialog boxex / modals
│ ├── stylesheets # Contains CSS files for each view component
│ ├── App.css # CSS file to provide a common styling to our app such as font family and box sizing
│ ├── index.css # Currently of no use, however you can use it to provide a global style to your app
│ ├── App.js # Our main frontend ReactJS file that is executed when server starts
│ ├── AppContext.js # ReactJS ContextAPI file to allow all components access a particular react state easily
│ └── index.js # A ReactJS file to render all the data on web page
└──
It is super easy to deploy the project on heroku!
sudo snap install --classic heroku
And then, in VSCode Terminal, write:
cd frontend
npm run build
cd ..
heroku login
heroku create YOURAPPNAME
git push heroku master
And then open your heroku URL to see the website running live :)
For any queries, you can mail me at [email protected]