Build A MERN Stack App in 5 Days (Day 5: Finishing Up)

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

Design the Feed

The post component in our final version of the app looks like this:

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:

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:

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

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

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

Conclusion

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!

Features to improve the App:

• 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

Resources

• Code Repo
• TailwindCSS
• Redux
• Axios

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