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
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!
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
Hope you had fun & learned something new in this 5-part series!
Thank you for reading along!
Top comments (1)
thank you Rohan, learned a lot