MIlestone 3B

[javalosr2004]

Milestone 3B

Description

Welcome to Milestone 3B! In this phase, you'll get into more advanced concepts of web development. You'll learn how to utilize API endpoints within your components, and integrate MongoDB to enhance the functionality of your web app. Your focus will be on implementing dynamic routes and a commenting feature, making your website more interactive and reducing the repetitiveness of creating a new route for each blog you make. Good luck! 🚀💻🌟

Steps

1. Dynamic Routing:

   • Create a dynamic route using Next.js!
   • Retrieve the dynamic route segment (slug) in your component using the params prop, as shown in the provided code snippet.
   • Fetch data in dynamic routes using either API endpoint or mongoose directly.
   • Ensure graceful handling of unknown slugs, displaying a “Blog not found” message when needed.
   • Optional: Use “react-markdown” for stylish blog formatting.

2. Create a Comment Component:

   • Develop a Comment component to display individual comments. Include styling and format the Date object into a readable format like "September 15, 2023, 8:30 AM".

3. Update the Blog Schema:

   • Add a new field to the Blog schema for a list of Comment objects (sub-schema), utilizing MongoDB's nested document feature.
   • Add typing for the comment schema as shown in the template.

4. Modify the Blog Component:

   • Plan and adapt the Blog component to display comments, passing each comment to the Comment component.

Possible Issues & Optional Enhancements:

• Ensure that your blog list page properly links to the blogs using their slugs.
• Optionally, explore generating blogs at build time using static params and further enhancing blog styling with markdown.