[Feat] Implement Dynamic Loading of Blog Pages Based on Blog Card Selection

[kavya410004]

Description

Currently, there are two types of blog-related pages:

• Blog Grid Page: Displays blog posts in a grid format, with each post represented as a card.
• Blog Page: Displays the full content of a particular blog.

The Blog Grid page is displaying the cards correctly, but when clicking the "Read More" button on any blog card, it does not load the corresponding blog's full content. Instead, the same static blog page is displayed, regardless of which card is selected.

Proposed Solution:

• Use an array of objects to store the blog data, where each object represents a blog with its title, images, content, comments etc.
• Update the logic to make the Blog Page load dynamically based on the selected blog card.
• When the "Read More" button of a blog card is clicked, the Blog Page should display the content of the corresponding blog by accessing the data from the array.
• Ensure that each blog's unique information is passed correctly from the Blog Grid page to the Blog Page, allowing it to render the correct content dynamically.

Expected Outcome:

• Each blog card should redirect to a blog page that displays the full content of the selected blog post.
• The blog's title, images, and content should be loaded dynamically based on the card selection, using data from the array of objects.

Additional Information:

• This solution will not require a database, as all blog data will be fetched from an array of objects.
• The functionality might involve passing a unique identifier or index of the selected blog from the Blog Grid page to the Blog Page.
• This will simplify the implementation while enabling dynamic rendering of blog content based on user selection.

Screenshots

Blog Grid Page:

Same blog page displayed for every blog card:

Checklist

• I have checked the existing issues
• I have read the Contributing Guidelines
• I'm a GSSoC'24-Extd contributor
• I'm a Hacktoberfest'24 contributor
• I am willing to work on this issue (optional)

[github-actions]

Hello kavya410004! Thanks for opening an issue in Ezyshop! 🚀

• We'll get back to you as soon as possible.

• Hope you star our Repo.

• Join our Discord Server to collaborate and discuss further.

[mdazfar2]

@kavya410004 Issue acknowledged! You are going to be assigned.

[ShivanshPlays]

@kavya410004 I have a request, kindly make the components of detailed blog page reusable and dynamic so the they can be used with backend fetched data in the future.

[mdazfar2]

Hey @kavya410004, can you do that? You need to fetch the blog details from the database, as the database is working fine on the Vercel deployment. It would be great if you could handle fetching the data from the database. Thank you!

[kavya410004]

@kavya410004 I have a request, kindly make the components of detailed blog page reusable and dynamic so the they can be used with backend fetched data in the future.

Sure

[kavya410004]

Hey @kavya410004, can you do that? You need to fetch the blog details from the database, as the database is working fine on the Vercel deployment. It would be great if you could handle fetching the data from the database. Thank you!

Yes, for that I need to create a schema for blog in the database and add entries to it. Shall I raise a new issue to implement that and fetch the details to blog grid?

[mdazfar2]

Sure @kavya410004.