DEV Community

Cover image for Build A MERN Stack App in 5 Days (Day 5: Finishing Up)
rohanjsx
rohanjsx

Posted on

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:

post

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

post

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

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

states

quill

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

top

modal

utility

toggle

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

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

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

Top comments (1)

Collapse
 
dcavusoglu profile image
Duygu Çavuşoğlu

thank you Rohan, learned a lot