Build A MERN Stack App in 5 Days (Day 4: Connecting to the backend)
Tags: react, mongodb, webdev, javascript
Published: 2022-03-29 04:02:00

Hello and Welcome to Day 4!
Up to this point, we have setup our backend, designed the Sidebar, Header & Widgets components and implemented Login & Logout functionalities for our user with Redux & Firebase Google Auth.

Today, we will:
- Design 'Modal' to Add Question
- Make request to backend to add question to DB

Let's get started!

<h2> Add Question </h2>
Our Question has 3 fields: description, imageUrl (optional) and user. The user field will be accessible from our Redux global store once the user signs in. Then, we want to display a 'Modal' once the user clicks on the 'Add Question' button in the *Header* where the user can enter the description & imageUrl and submit the question. Let's go ahead and:
- Install the dependencies we will use today 
- Add a proxy to our backend server in 'package.json' in client
- Create states to keep track of input fields:


![install](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fjqluqw7h0xtd3c9tqiz.png)

![states](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xaw54ezj20zh61cq5k7.png)

![proxy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68k8d1l3rg6witnkhala.png)

_Note: You can use any library of your choice to create the modal or create a custom 'Modal' component yourself_

Let's create the function to make the request to the backend to submit our question:

![add](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rb4fy2lpocmq3lad4k09.png)

<h2> Design the Modal </h2>

On clicking the 'Add Question' button, we set the 'isModalOpen' state to true and display our modal:

![set](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/piz6sl1qv3dpi9rhe1w2.png)

Our final version of the Modal in the app looks like this:

![mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8fhsoe0nazvp4nu59cen.png)

It can be divided into the following sections:
- Top (containing the texts Add Question & Share Link)
- Middle (containing Avatar and Dropdown)
- Inputs & Image Preview
- Buttons to Submit Question & Close Modal.

![top](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nj8rp9rtbf6l1pognuj8.png)

![middle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6btac2t1c3bfz0zlt4c.png)

![inputs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzf9x4uku2fqzb86kpvi.png)

![buttons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1hhqa7ux4jqz5vhwq0q.png)

Let's go ahead and test our Modal!
Run 'npm start' in the terminal from the 'client' directory.
The app should run on localhost:3000. Login and click on the 'Add Question' button and the Modal should pop up! Go ahead and Add a Question.

![will](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xr83yoo37354t1kf4lpz.png)

If we go and check our MongoDB database,we see that the Question has been added to our database successfully!

![db add](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inprffzex2uu92s6iazw.png)

With the 'Add Question' functionality out of the way, the only functionality we are missing is to 'Add Answer'.

In the next and final part of the series, we will:
- Add functionality to Submit Answer
- Design our Feed
- Polish and wrap up our application!

<h3> Homework </h3>
- Design your own custom Modal component
- Add a custom alert to display 'Question Added' when you submit the question

See you in the final part!