MERN: Full-stack VR Chat Application

Introduction

The MERN stack which consists of A-frame, Mongo DB, Express.js, Node.js, and React.js is a popular stack for building full-stack web-based applications because of its simplicity and ease of use. In recent years, with the explosive popularity and the growing maturity of the JavaScript ecosystem, the MERN stack has been the goto stack for a large number of web applications. This stack is also highly popular among newcomers to the JS field because of how easy it is to get started with this stack.

This repo consists of a VR Chat Application built with the MERN stack. I built this sometime back when I was trying to learn the stack and I have left it here for anyone new to the stack so that they can use this repo as a guide.

This is a full-stack VR chat application that can be up and running with just a few steps. The backend is built with Express.js and Node.js. Real-time message broadcasting is developed using Socket.IO.

Features

This application provides users with the following features

• A Global Chat which can be used by anyone using the application to broadcast messages to everyone else.
• A VR Chat functionality where users can chat in VR.
• Real-time updates to the user list, conversation list, and conversation messages

How to use

You can have this application up and running with just a few steps because it has both the frontend and the backend in a single repository. Follow the steps below to do so.

1. Clone this repo
2. Once you have the repo, you need to install its dependencies. So using a terminal, move into the root directory of the project and execute npm install to install the dependencies of the Node.js server and then run npm run client-install to install the dependencies of the frontend. The second command is a custom command that I wrote to simplify the installation process.
3. This application uses MongoDB as its Database. So make sure you have it installed. You can find detailed guides on how to do so here. Once installed, make sure that your local MongoDB server is not protected by any kind of authentication. If there is authentication involved, make sure you edit the mongoURI in the config/keys.js file.
4. Finally, all you have to do is simply run npm run dev. If this command fails, try installing the package concurrently globally by running npm install -g concurrently and then running the dev command.
5. The frontend of the application will be automatically opened in your web browser and you can test it away.