SpaceChat - a realtime chat app that allows you to chat with your friends in pairs as well as in groups

Overview

SpaceChat πŸš€

SpaceChat is a realtime chat app that allows you to chat with your friends in pairs as well as in groups!

Here is a live demo

https://spacechatapp.herokuapp.com/


About 🎯

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!

Project Stack πŸ’‘

The project at its core is built on MERN Stack which stands for (MongoDB, ExpressJS, ReactJS and NodeJS)

  • ReactJS - ReactJS is a javascript library created by Facebook. This library lets you create beautiful web pages in couple of minutes!
  • NodeJS - NodeJS is something that allows you to write javascript code on a server! Traditionally, javascript was only available for frontend design purpose however, with NodeJS, you can use javascript for backend purpose too!
  • ExpressJS - ExpressJS is a framework that drastically reduces the amount of backend code we write in NodeJS. It is highly flexible and makes things a lot easier!
  • MongoDB - MongoDB is a NoSQL Database that unlike SQL, stores data in form of collections!

Project Features πŸ”₯

  • A user can create and login to his or her account
  • A user can search for his friends
  • A user can send them message in realtime
  • A user can create group chat with unlimited number of users
  • A user can edit group name and remove others from group
  • A user can view profile of other people


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!

Screenshots (Desktop) πŸ’»

Screenshots (Mobile) πŸ“±

Supporting Libraries / Frameworks / Packages used Β  πŸ› 

  • Socket.io - Socket.io is a library that in simple words allows you to send and recieve data from server without having need to refresh the page, using the concept of WebSockets!
  • MaterialUI - MaterialUI is a ReactJS library developed by google that lets you create beautiful UI elements in a quick go!
  • React Router DOM - React Router DOM is a NPM package that easily lets you tell the app about which web page or screen component to render depending upon a particular URL
  • Mongoose - Mongoose is a library that enables you to easily implement MongoDB in your code
  • Lottie React - Lottie React is an npm package that lets you render Lottie JSON animations on the web page
  • Axios - Axios is an NPM package that lets you easily send HTTP requests to a particular URL
  • JsonWebToken - It is a package that lets you make use of JWT authentication in your app
  • BCryptJS - This is an NPM package that lets you encrypt the passwords before you store them on the server
  • DotENV - This NPM package lets you securely create environment variables in .env file

Project Setup πŸ“

If you want to clone this project and customize it further, you need to do a couple of tasks first:

  • Create an account on Mongo DB Cloud if you don't have any hosting to create the database. Or install MongoDB on your hosting in case you have one
  • Create an account on Cloudinary. It is the place where we will store the profile pictures of all the users.
  • Clone this project. You can directly download the source code, or you can use the CLI in terminal
  • Once successful, open your terminal in the project folder and write npm install
  • Then, go to the frontend directory by typing cd frontend and then again, write npm install
  • After this, in the root folder of the project, create a new file with the exact name of ".env"
  • In the .env file, write:

PORT = 5000
MONGO_URI=mongodb+srv://YOUR_MONGO_CLOUD_USERNAME:[email protected]/Cluster0?retryWrites=true&w=majority
NODE_ENV=development
JWT_CODE=abc123xyz987
  • In signupFunctions.js, inside const configureProfilePicture function, change fetch() url to https://api.cloudinary.com/v1_1/YOUR_CLOUDINARY_ACCOUNT_USERNAME/image/upload and ensure you have enabled unsigned uploads on your cloudinary console
  • In endpoints.js in frontend folder, change BASE_URL to localhost:5000/
  • In server.js in backend folder, set const io cors origin url to localhost:5000/
  • Save the file and then in frontend and backend terminal, write npm start and enjoy the project :)

Production Build πŸ’»

  • To build the project for production purpose, In .env file, set NODE_ENV to production
  • In terminal, open the frontend folder and write npm run build
  • Once the build is completed, move back to root directory of folder by writing cd .. and then start the server again to test the code in production mode

Project Purpose 🏁

The purpose of this project is to demonstrate how a person can

Project Architecture and Structure πŸ“‚


# 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
└──

Deploying Project on Heroku βœ”οΈ

It is super easy to deploy the project on heroku!

  • Make sure you have comitted your project using git after running the npm run build command.
  • Then, create an account on www.heroku.com
  • Install heroku CLI. For windows, you can simply download it and in case of linux, in terminal, write:
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 :)

Note ‼️

  • The heroku website link that I have provided for this project on the top may run slow when you open it for the first time. It is also possible that you may see an empty red snackbar. This is because of slow internet connection or timeout error. This error will go away on its own if you wait for 1-2 minutes after opening the heroku link and then reload the web page
  • WebSockets / Realtime Communication Feature will not work on mobile devices as websockets are not forwarded by the http proxy. If you want to establish realtime communication on mobile devices, you can create an android or iOS app to do so and use the websocket libraries to achieve realtime communication
  • Sometimes you may see that the message sent is appearing twice in the chat! This may be possibly due to either slow internet connection or slow server. However, to get rid of this error, you can simply refresh the page!

Contact

For any queries, you can mail me at [email protected]

You might also like...

How to build a chat using Lambda + WebSocket + API Gateway? (nodejs)

How to build a chat using Lambda + WebSocket + API Gateway? (nodejs)

Description Source code for the lambda function from the screencast How to build a chat using Lambda + WebSocket + API Gateway? (nodejs) The reactjs c

Dec 28, 2022

WebRTC based peer to peer video calling and messaging web app build with MERN stack.

talkhouse WebRTC based peer to peer video calling and messaging web app build with MERN stack. Demo Libraries used React for frontend Socket.io as sig

Nov 26, 2022

soketi is your simple, fast, and resilient open-source WebSockets server

soketi is your simple, fast, and resilient open-source WebSockets server

soketi soketi is your simple, fast, and resilient open-source WebSockets server. πŸ“£ Blazing fast speed ⚑ The server is built on top of uWebSockets.js

Jan 4, 2023

A group listening chat app that utilizes the spotify api to enable the users to queue, pause, change songs, as well as chat with each other

Next.js + Tailwind CSS Example This example shows how to use Tailwind CSS (v3.0) with Next.js. It follows the steps outlined in the official Tailwind

Dec 19, 2021

The Chat'Inn is a simple and minimal realtime chat application whose database is powered by firebase and firestore.

The Chat-in The Chat'Inn is a simple and minimal realtime chat application whose database is powered by firebase and firestore. The frontend part is c

Aug 8, 2022

A Tailwind plugin that allows to create multiple groups utilities such as group-card or group-1 and works with Tailwind 3 features and all variations.

Tailwind Labeled Groups A plugin that allows to create multiple groups utilities such as group-card or group-1 and works with Tailwind 3 features and

Nov 21, 2022

chain-syncer is a module which allows you to synchronize your app with any ethereum-compatible blockchain/contract state. Fast. Realtime. Reliable.

Chain Syncer Chain Syncer is a JS module which allows you to synchronize your app with any ethereum-compatible blockchain/contract state. Fast. Realti

Dec 15, 2022

This Photoshop script exports all top-level layers and groups to cropped PNG and JPEG files and creates a file usable in Tumult Hype 4 based on your Photoshop document.

This Photoshop script exports all top-level layers and groups to cropped PNG and JPEG files and creates a file usable in Tumult Hype 4 based on your Photoshop document.

Export To Hype (Photoshop Edition) This Photoshop script exports all top-level layers and groups to cropped PNG and JPEG files and creates a file usab

Nov 9, 2022

A Node.js library to calculate Uniswap V3 ratios (prices) from token pairs.

UniV3Prices A Node.js library to calculate Uniswap V3 ratios (prices) and liquidity (reserves). Features This library will allow you to: Calculate pri

Dec 29, 2022

Resolve parallel promises in key-value pairs whilst maintaining type information

async-kv Resolves promises in key-value pairs maintaining type information. Prerequisites NodeJS 12 or later Installation npm i async-kv yarn add asyn

Feb 17, 2022

Create coupled parent-child component pairs with composition API.

vue-coupled Background See discussion here. This package serves as a POC that: Allows any level of component encapsulation for child components. Suppo

Jul 1, 2022

A bot that will snipe ETH or BSC pairs when liq added. Fast efficient, simple and free

Buy early gems with custom gas fee, slippage, amount. Auto approve token after buy. Sell buyed token with custom gas fee, slippage, amount. Sell token

Dec 23, 2022

This is a Simple Realtime Chat app using Firebase.

Realtime Web Chatapp A Simple Realtime Chat app using Firebase View Demo Β· Report Bug Β· Request Feature About The Project This is a simple Realtime Ch

Oct 25, 2022

Open-sourced version of Orbis groups.

Documentation: Orbis SDK This example is built using the Orbis SDK that developers can use to created decentralized and composable social applications

Dec 24, 2022

SSB private groups with ssb-db2

ssb-tribes2 TODO TODO Installation npm install ssb-tribes2 Usage in ssb-db2 Requires Node.js 12 or higher Requires secret-stack@^6.2.0 Requires ssb-db

Dec 15, 2022

The simplest implementation of Golang channels, selects and wait groups

The simplest implementation of Golang channels, selects and wait groups

TypeScript Channels The simplest implementation of Golang channels, selects and wait groups Installation You can use one of the following package mana

Dec 8, 2022
Owner
Ishant Chauhan
I love solving real world problems using my programming skills!
Ishant Chauhan
Node.js library to receive live stream chat events like comments and gifts in realtime from TikTok LIVE.

TikTok-Live-Connector A Node.js library to receive live stream events such as comments and gifts in realtime from TikTok LIVE by connecting to TikTok'

David 399 Jan 4, 2023
Website to display chats and gifts in realtime from your TikTok LIVE stream. Demo project for TikTok-Live-Connector library.

TikTok-Chat-Reader A chat reader for TikTok LIVE utilizing TikTok-Live-Connector and Socket.IO to forward the data to the client. This demo project us

David 104 Dec 31, 2022
Chotu Chat Room is a minimal, distraction-free chat application

Chotu Chat Room is a minimal, distraction-free chat application. We have some predefined channels that anyone can join. No registration/login required.

Chotu Projects 8 Sep 19, 2022
simple chat app created with nextjs, express, tailwindcss, and WebSockets

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Erfan Hanifezade 10 Sep 10, 2022
Create a Real-time Chat App using React and Socket.io

React And Socket.io ChatApp MIT Licence MIT License Copyright (c) 2021 Ali Ahmad Permission is hereby granted, free of charge, to any person obtaining

Ali Ahmad 2 Jan 10, 2022
A simple web app that people can chat and send images into.

Typsnd Typsnd. Type, send. It's as simple as that. Typsnd is a simple web app that people can chat and send images into. It is based on Express.JS, No

null 10 Nov 10, 2022
video-chat-app Fully functional one-to-one video calling feature.

video-chat-app Fully functional one-to-one video calling feature.

suraj ✨ 7 Oct 10, 2022
Mini Projeto de um chat-app usando o protocolo WebSocket atravΓ©s da lib 'ws' do node.js

CHAT-APP-WEBSOCKET Mini Projeto de um chat-app usando o protocolo WebSocket atravΓ©s da lib 'ws' do node.js Obs o intuito deste projeto nΓ£o Γ© o fronten

Vinicius dos Santos Rodrigues 4 Jul 14, 2022
This server is made to serve the MSN-Messenger app develop by Gabriel Godoy. This applications is capable to register users and messages in order implements a real time chat.

?? MSN-Messenger-Server Node.js server for real time chat About | Installations | How to Use | Documentation | Technologies | License ?? About This se

Guilherme Feitosa 7 Dec 20, 2022
Chat with your gpg contacts without leaving the terminal

chatty GPG encrypted, ephemeral, real time chatting in the terminal Features End to end encrypted Passwordless Real time vim like keybindings Requirem

Navdeep Saini 33 Jun 7, 2022