Lesson 12: Final Review and Homework Project

Goal

Review the full-stack TodoList App, summarize the key concepts learned, and assign a final project to solidify knowledge.

1. Learning Objectives

By the end of this lesson, students will:

1. Understand how the frontend, backend, and AI integrations come together.
2. Review key concepts, challenges, and solutions from building the app.
3. Start a new project to reinforce what they’ve learned.

2. Full-Stack TodoList App: Recap

Here’s an overview of what we built:

Backend (Express & MongoDB)

• Set up a REST API using Express.
• Integrated MongoDB with Mongoose for storing tasks.
• Added AI-powered features using the OpenAI API.
• Tested the backend with Jest, Supertest, and MongoMemoryServer.

Frontend (React, TanStack, Radix UI)

• Built the UI with React and TypeScript.
• Managed server-side state using TanStack/React Query.
• Implemented navigation with TanStack/React Router.
• Styled components using Radix UI and Phosphor Icons.
• Added loading/error states to improve UX.

Deployment

• Deployed the backend on Render.
• Hosted the frontend on Vercel.
• Configured environment variables to connect both.

3. Key Learnings

1. TypeScript: Enforced type safety across frontend and backend code.
2. React Query: Simplified data fetching, caching, and mutations.
3. Express API: Created robust RESTful APIs for CRUD operations.
4. AI Integration: Used OpenAI to automate task descriptions and schedules.
5. Testing: Wrote tests to ensure functionality and prevent regressions.
6. Deployment: Published a full-stack app using Render and Vercel.

4. Homework: Final Project

For your final project, you’ll build a Bookmarks App that allows users to save, manage, and delete bookmarks.

Requirements

Backend (Express & MongoDB):

1. Create a REST API with the following endpoints:

   • POST /api/bookmarks → Add a new bookmark.
   • GET /api/bookmarks → Retrieve all bookmarks.
   • DELETE /api/bookmarks/:id → Delete a bookmark by ID.

2. Bookmark Schema:

   • title (string, required).
   • url (string, required).
   • description (string, optional).
3. Add validation for the url field.

Frontend (React, React Query, Radix UI):

1. Build the UI:

   • Input field to add a new bookmark (title and url).
   • Display bookmarks in a list.
   • Add a delete button for each bookmark.

2. Fetch and Update Data:

   • Use React Query to manage API calls.
   • Show loading and error states.

3. Styling:

   • Use Radix UI for inputs and buttons.
   • Add icons with Phosphor Icons.

Optional AI Feature

Use the OpenAI API to auto-generate a description for a bookmark based on the URL or title.

Submission Requirements

1. Deploy the backend on Render and the frontend on Vercel.

2. Submit the following:

   • Live links to the backend and frontend.
   • A GitHub repository with clean, well-documented code.
   • A short write-up describing challenges faced and solutions implemented.

5. Final Words

Congratulations on completing this course! 🎉

You’ve learned:

• Building full-stack applications with TypeScript, React, and Express.
• Managing server-side state with React Query.
• Integrating third-party APIs like OpenAI.
• Writing tests for both frontend and backend code.
• Deploying apps to production with Render and Vercel.

With these skills, you’re ready to tackle real-world projects and build innovative solutions.

Let me know if you have any questions as you start the final project. Good luck! 🚀