Hangout is a realtime chat application built on MERN stack. User can login using Google and send/receive message(with timestamp) in realtime in chat rooms. MongoDB(NoSQL) used for cloud storage of conversations. Pusher for realtime update.
- Material-UI - React UI framework
- Redux - State container for JS
- React - JS library
- Pusher - Realtime chat
- Express - Node.js framework
- Postman - API testing
- MongoDB Atlas - NoSQL cloud database
- Firebase - Google authentication
- Heroku - Deloyment
- Google Authentication
- Avatar/profile pic same as Google account
- Create rooms and message (with timestamp)
- Messages visible with sender's avatar
- Logout by clicking on your avatar
Step 1: Clone the code into a fresh folder
$ git clone https://github.com/bmbshlly/mern-hangout.git
$ cd mern-hangout
Step 2: Create a Virtual Environment and install Dependencies
Create a new Virtual Environment for the project and activate it. If you don't have the virtualenv command yet, you can find installation instructions here.
$ virtualenv venv
$ source venv/bin/activate
Next, we need to install the server dependencies, which are listed in package.json.
(venv) $ npm install
Next, we need to build react project to static files, which are listed in client.
(venv) $ cd client
(venv) $ npm install
(venv) $ npm run build
We can find index.html in build.
Step 3: Run application
Now we're ready to start our server using Nodemon:
(venv) $ nodemon server.js
Open http://localhost:9000 (port number is prompted) to view it in your browser. The app will automatically reload if you make changes to the code. You will see the build errors and warnings in the console.
Try hosted app here.