Practice often and challenge yourself! Another project of mine🏋🏾
Tags: webdev, beginners, react, node
Published: 2020-08-14 12:19:22

My first project was not yet finished and a comment shows up in my notification list. This comment recommend I try https://devchallenges.io/challenges.

This is such a nice discovery for me who hate designing things myself and always struggle to find an idea that motivates me.

So I registered and picked this challenge up :

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h7kavjnvfxvvkosl1zg5.png)

Let's get that chat group project done 👍.

## 1. Planning the app

### a. Idea
Here, we are building an app where people can join chat groups and talk together. Simple and efficient just as I like it!

### b. Features
-Authentication.
-Create a channel with name and description.
-Join any channel.
-Show channel's other members.
-Send message and browse through other member's messages.
-Search for group.

### c. Frontend
Once again frontend will be build on React. I'm considering using [Material UI](https://material-ui.com/) for this project because I heard of it recently and it looks great.
-(/) Everything happens here.
-(/auth) sign up and login.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k1svvl1dp0jaw7j75mnl.png)

### d. Backend
Node/Express for building a Rest API and MongoDB for storing data.
-(POST)(api/users/signup) sign up.
-(POST)(api/users/login) login.
-(GET)(api/users/:groupId) Fetch members of a group.
-(GET)(api/groups) Fetch all groups.
-(POST)(api/groups) Create a new group.
-(GET)(api/messages/:groupId) Fetch messages of a group.
-(POST)(api/messages/:groupId) Add a new message.

## 2. Process

### a. Frontend
```npx create-react-app ```

I am getting started by cleaning up directories and files. Thereafter, I initialize a new GitHub repository. 

Time to install dependencies: react-router-dom, @material-ui/core and axios.

Ok at this point I literally spend hours watching tutorials and reading [Material UI](https://material-ui.com/) docs.

I did not realize how cool this component library was but It is not as easy as I thought to get started with.

I decided to start "the easy way", I mean using a pre-built template and customize it. So, here comes my authentication page:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tfweg6vbdz9fjcqcun7g.png)

After some design adjustments I focused on the input validation which is in my opinion really decent. (It probably deserves to be refactored tho 😅)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2z1z5p667kdp1j870svi.png)

Right now, I feel kind of guilty because my login pages never looked so great but it is all thanks to an external library...

I will now have to implement a global state management to redirect authenticated user to the main page and for that I'll go for React Context API.

I am done with the overall design, it was great learning core concepts of Material-UI and final design looks great 😇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/04452veamujkp4dapwqx.png)

A lot of data passed through props, it is becoming a little messy in there...

The main page is divided in two pieces, the darker one is displaying a list of groups and members and the second part is the actual chat component.

I don't think that was the best way to achieve this but I set an interval that fetch potential new messages from my backend every 5 seconds.

### b.Backend
Let's build an API ! This is by far my favorite part of the development process.

``` npm init ```
``` npm install --save cors express body-parser mongoose jsonwebtoken etc... ```

As always, I start by creating my directories (routes, controllers, models, middlewares, ...) and then I dive in my app.js file where I enable cors.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r9ad69b8pgwumfb46hka.png)

Since I started building my frontend with the sign up/login page, I am going to work on my personal authentication system first.

A simple middleware that uses express-validator for input validation, connect to the MongoDB database and send a token back to the frontend.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iktyvzpgp3x59d5rq0w6.png)

Moving forward and implementing features one by one, always using the same pattern:
1. Adding a middleware to listen to a certain path.
2. Building a route for the given path.
3. Connecting to custom controllers.
4. Importing a new model if necessary.

## 3. Build & Deploy

After switching to environment variables, I deploy my Node app on [Heroku](https://heroku.com/).

Thanks to React script I can simply run ``` npm run build ``` and then deploy on [Firebase](https://firebase.google.com/).

[Project 2 is now live!](https://fullstack-project2-chat.web.app/) 🔥 (Open in [chrome](https://www.google.com/intl/fr/chrome/) for optimal user experience)

**Note :** 
If you are considering having a look to the live version, please remember I'm still learning and there are probably plenty of issues/bugs...

As always, I'd love to have feedback and tips from you! 😇


Source code: {% github KillianFrappartDev/fullstack-project2 no-readme %}