Full Chat - React JS

Chat application with message and events history using Node.js, Socket.IO and ReactJS as final Project for BCDV1017 - Full Stack Development IV from Blockchain Development program from George Brown College.

This application was developed using React as frontend, but also you can check this application implemented using Pug template here.

Development and challenges | How to run | Resources | Technologies | Credits

📏 Development pipeline and challenges

This project is an extension from this another project implemented using Pug. You may check the whole development pipeline there if you want. Here I will just talk about the differences and new challenges.

As mentioned in the previous project, I have started creating a wireframe in Figma. Just add another page for admin login and you can check the result here.
One of the main differences between use a frontend framework or libray such as React, Angular or Vue instead of a template like Pug, is that you must turn your backend into a API properly. What I mean with that? Using Pug you send a rendered HTML from backend to the client, something like that:
```
exports.index = async (req, res, next) => {
    const roomsList = await room.find();
    res.render('rooms',
    {
        title: 'Rooms',
        roomsList: roomsList
    });
}
```
In the code above, a view called index will get roomsList data and render to the client. Using React, things get easier to the backend, which is resposible only to send data in JSON format, like as follows:
```
exports.index = async (req, res, next) => {
    const roomsList = await room.find();
    res.send({ roomsList });
}
```
As you can imagine, detaching of backend and frontend becomes clearer and easier to manage. It was time to turn all controllers from backend into "data emitters".
Due to admin login to access messages and events history, I have decided to use a new and better way to manage authentication than my previous projects. This article helped me a lot to understand how token authentication works, specially JWT. So I was able to implement token authentication in the backend and, in frontend development step, I was able to manage tokens using React-cookie.
Backend done and having pug template from previous project, I have started to convert all interface to React. It was the first time I was working with React to build a bigger project, so I admit that I did not took the best practices to build reusable components. Indeed, all pages were actually made simply with a single or a few components.

Although I have employed few components, it did not prevent me to learn better and apply modern tools such as hooks and react navigation. Also, after build most of the project, I discovered a fantastic project called Scrimba, where I was able to took a free React Hooks Course. It allowed me to learn more about hooks and React.memo, which made it possible to optimize my code.

🏃 How to run

Open your terminal in the folder you want to clone the project

# Clone this repo
git clone https://github.com/LorranSutter/FullChat-React.git

# Go to the project
cd FullChat-React

# Go to each folder and install dependencies
cd backend
npm install

cd ../frontend
npm install

Now you will need two opened terminals to run the project. One for the backend and another one for the frontend or mobile.

Backend will run on http://localhost:5000/

Frontend will run on http://localhost:3000/

# Go to backend
cd backend

# Run the project
npm start

## In the another terminal ##

# Go to frontend
cd frontend

# Run the project
npm start

If you want to use your own mongodb account, replace the following variable with your own mongo URL:

# Go to backend/db/config.js
MONGOURI = <your-url>

Then you may populate your database using the following command:

cd backend

node populatedb.js

📖 Resources

React auth - understanding JWT with React and Express
Token Authentication - understanding JWT
Figma - digital design and prototyping tool
Scrimba - platform for learning how to code
Learn React Hooks - scrimba course

💻 Technologies

ReactJS - frontend library
React navigation - routing and navigation for react apps
React Icons - icons library
React-cookie - cookie interaction for React applications
JWT.IO - JSON Web Tokens to allow, decode, verify and generate JWT
Express.js - web application framework
Moment.js - parsing, validating, manipulating and displaying dates and times
Mongoose - object data modeling (ODM) library for MongoDB and Node.js
Socket.IO - real time engine using web sockers
Async - library to perform asynchronous operations
ESlint - pluggable JS linter
Nodemon - monitor and restart server after changes

LorranSutter / FullChat-React

Full Chat - React JS

📏 Development pipeline and challenges

🏃 How to run

📖 Resources

💻 Technologies

🍪 Credits

About

Languages