Day 18 Progress Journal: Implementing Frontend for Like and Unlike Functionality (MERN Stack Instagram Clone)

Today's achievement centered around developing the frontend for the like and unlike feature, which enhances user engagement by enabling direct interaction with posts through likes.

Steps and Achievements:

1. 
   

   UI Design for Like/Unlike:

   
   
   
   
   
   • Designed a like button that clearly shows whether a post is liked, featuring a heart icon that switches between filled and outlined styles.
   
   
   • Placed the like button next to the post content for easy access and a user-friendly experience.
   
   
   • Utilized CSS Flexbox for proper alignment, ensuring the button is well-positioned in relation to the post content and other actions (like comment and share).
   
   
   
   


2. 
   

   State Management:

   
   
   
   
   
   • Employed React state to monitor the like status of each post. The UI updates dynamically to reflect changes after a successful like/unlike action.
   
   
   • Incorporated state management for the like count, which refreshes in real-time as users engage with the like button.
   
   
   
   


3. 
   

   API Integration:

   
   
   
   
   
   • Connected the like and unlike API endpoints created earlier to the frontend.
   
   
   • Used axios to send POST requests to the backend when users click the like/unlike button, including the post ID and user token.
   
   
   • Implemented loading indicators while awaiting server responses, ensuring a seamless user experience without interruptions.
   
   
   
   


4. 
   

   Conditional Rendering:

   
   
   
   
   
   • Applied conditional rendering to change the appearance of the like button based on the user's interaction with the post.
   
   
   • Showed the updated like count immediately after user interaction, offering instant feedback.
   
   
   
   


5. 
   

   Error Handling:

   
   
   
   
   
   • Provided error messages if the like/unlike action was unsuccessful, such as when a user is not logged in.
   
   
   • Included feedback for specific scenarios, like trying to like a post that’s already liked or unliking a post that wasn’t liked.
   
   
   
   


6. 
   

   Test-Driven Development:

   
   
   
   
   
   • Developed test cases for the frontend features, ensuring the user interface:
     
     
     
     
     • Accurately reflects the like status (liked or not).
     
     
     • Correctly updates the like count.
     
     
     • Manages network errors effectively.
     
     
     
     
   
   
   
   


7. 
   

   Testing Across Various Scenarios:

   
   
   
   
   
   • Evaluated the feature on multiple screen sizes to confirm responsiveness and user-friendly interactions on both mobile and desktop platforms.
   
   
   • Ensured that the like/unlike functionality operates smoothly under different network conditions.
   
   
   
   

Reflections and Insights:

This milestone was essential in enhancing the app's interactivity, making it resemble a genuine social media platform. I gained valuable experience in effectively integrating backend APIs with the frontend while ensuring a seamless user experience. Additionally, utilizing React's state management and conditional rendering enabled me to create an intuitive and responsive interface.

Future Plans:

The upcoming milestone will likely concentrate on fine-tuning the UI and testing the overall flow of the like/unlike feature. I will also focus on optimizing performance and ensuring the UI functions flawlessly across various devices.