Build A MERN Stack App in 5 Days (Day 5: Finishing Up)
Tags: javascript, react, webdev, mongodb
Published: 2022-03-30 03:28:03

Hello & welcome to the final chapter of this series!
In the previous parts,we:
- Setup the backend
- Designed the stateless components in the frontend
- Setup Redux & Firebase Auth
- Connected our frontend to backend to add & fetch questions.

The only functionality remaining to complete our app is to 'Add Answer'. So, in this tutorial we will:
- Add axios request to 'Add Answer'
- Create a Modal to 'Add Answer'
- Design our Posts component and Feed
- Conclusion

<h2> Design the Feed </h2>
The post component in our final version of the app looks like this:

![post](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67936ql1s1g8ty8w29do.png)

Upon clicking the 'Answer' button, we want a Modal to pop-up with an area to write our answer and submit it. So, let's setup our app accordingly. Let's go ahead and make a request to fetch all the posts from our backend in our 'Feed' and pass them as props to the 'Post' component as such:

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

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

Let's design the 'Post Component'! As we saw in the image above, our Post component can be divided into 4 parts:
- Top (containing User avatar and name)
- Middle (containing the Question, the Answer button & Image'
- Buttons (Utility buttons for Like, Dislike, Share, Comment
- Button to toggle show/hide answers

We will be using the 'react-quill' , 'react-time-ago' and 'react-html-parser' libraries in the Post component. Additionally, we need to create a function to handle answer submission:

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

Additionally, we will have state variables to control our state:


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

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

Now, we can go ahead and design the Post component:

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

![modal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6lcug82zj6gfidqhg0c0.png)

![utility](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rxqgb0fsj2fjywsk8n6.png)

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

Now, if we click on the 'Answer' button we will have our Modal pop-up with our quill where we can submit our answer!

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

<h3> Conclusion </h3>

And with that, we have a fully-functional MERN stack social app with the functionalities of Add Question, Add Answer & Google Sign-In! Feel free to build upon this prototype and add your own features and fully customize this app and turn it into a complete social application!

<h4> Features to improve the App: </h4>
- Add a Categories model & filter Posts by Category
- Add features to like, comment and share
- Add features to fetch all posts from a specific user

<h4> Resources </h4>
- [Code Repo](https://github.com/kishibe-rohan/kysymys)
- [TailwindCSS](https://tailwindcss.com/)
- [Redux](https://redux.js.org/)
- [Axios](https://axios-http.com/docs/intro)

Hope you had fun & learned something new in this 5-part series!
Thank you for reading along!