Milestone 1

Description

Welcome to the first milestone of developer bootcamp! You might remember your static portfolio website that you created as part of the take-home project. We will be expanding that project with these milestones throughout bootcamp.

In this milestone, we will be using Typescript to create an interactive blog page!

Notion link: https://www.notion.so/h4i/Milestone-1-54b5d69718e048d99ad9ef025e6bbadc?pvs=4

Steps

• Fork and clone this repo
• Copy over your HTML and CSS files from your starter pack into your clone
• Create blogs and a blog list
• Create individual blog pages

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.

Milestone 4

Milestone: Client Components / Deploying

Description:

For this milestone, you will develop a personal website leveraging React and Next.js. The website will feature interactive components, state management, API integration for comments, an email functionality on the 'Contact Me' page, and will be deployed on Vercel. Good luck!

Steps / Learning Objectives:

1. Client-Server Interaction and React Components:

   • Understand how client components differ from server components in React.
   • Implement client components for interactivity ( comments / contact me ).

2. Interactive Web Development with React Hooks and Event Handlers:

   • Utilize event handlers like onClick, onMouseOver, and others for user interactions.
   • Implement React hooks (useState, useEffect, etc.) to manage state and lifecycle in the application.

3. API Integration and Server Actions:

   • Develop POST API endpoints using either Route Handlers (api folder) or server actions for adding comments to the blog and portfolio sections.

4. Building and Integrating a 'Contact Me' Form:

   • Create a form that utilizes EmailJS or a similar service for sending emails.
   • Handle form validation and submission, ensuring user input is correctly processed and sent.

5. Deployment and Final Touches:

   • Deploy the completed website on Vercel.
   • Ensure all previous functionalities are intact and perform as expected post-deployment.

Additional Resources:

• React Hooks API Reference
• Next.js Documentation
• EmailJS Documentation

Notion link: Click Here

Milestone 2

Description

For this milestone, you will have to convert your website from static html / css to a fully functional React webapp! Good luck! Read the Notion for more detailed instructions.

Resources

React Documentation
Next.js Documentation

Notion

Steps

• Learn how to use tsx to write components.
• Convert old html code to tsx.
• Add blog functionality directly in tsx using .map() function, instead of appending to an element like before.
• Style pages using module.css and/or global css

Milestone 3A

Description

In Milestone 3, we'll take a significant step towards a full-stack application by adding a backend to your existing frontend. You'll create RESTful API endpoints, integrate MongoDB to manage data, and enhance your blog by allowing comments (just backend portion for now). It's an exciting phase where your project starts to handle real data and offer interactive features!

Notion

Steps

• Set up a MongoDB Atlas account and connect it to your application.
• Develop a Blog schema and model in MongoDB to store and manage blog data.
• Implement server-side logic to load blog data from MongoDB to the blog list page.
• Construct dynamic API routes for individual blogs.
• Construct API routes / server-side fetch for your portfolio page.
• As a proactive step, start working on POST and PUT endpoints for blogs/comments and projects.