01 Motivation & React Basics

• Goal: Understand why learning full-stack development in the era of AI big models is important, how to interact with AI tools to build learning assistants, and reinforce core React concepts.

• Environment Check: Quickly validate the setup of Node, Git, and Cursor/VS Code from the preview phase. Resolve any legacy issues.

• Practice: Rebuild/extend the Counter and TodoList components from the preview phase in a new Vite project. Add functionalities like clearing the list or displaying the number of items. Ensure components accept and use props where appropriate. Practice using AI to ask about encountered concepts.

02 Styling (Tailwind CSS) & UI Components (shadcn/ui)

• Goal: Learn modern styling techniques using Tailwind CSS, and use pre-built UI components such as shadcn/ui.

• Practice: Style the Day 1 TodoList application using Tailwind CSS. Make it responsive. Replace standard HTML input/button elements with Input, Button, and Card components from shadcn/ui. Experiment with different Tailwind utilities and shadcn/ui components.

  
  

03 TypeScript & State Management

• Goal: Understand the benefits of static type checking using TypeScript, and learn fundamental state management techniques beyond useState (Zustand, Redux, Signal).

• Practice: Convert the TodoList application to TypeScript, adding types for props, state, and event handlers. Implement a simple theme switcher using Zustand (for example, changing the background color).

04 Introduction to Databases (SQL vs NoSQL) & Supabase/Firebase

• Goal: Understand the basics of databases and set up a cloud back-end as a service (BaaS).

• Practice: Create a Supabase account and project. Use the Supabase dashboard UI or SQL editor to create a todos table. Enable row-level security on the table. Explore the Supabase dashboard.

05 Client-Side Routing + Hono Backend & CRUD

• Goal: Use React Router for multi-page navigation and build a lightweight API with Hono on Cloudflare Workers, securely connecting the front end to Supabase to complete full CRUD, laying the groundwork for subsequent LLM and deployment.

• Practice: Break the Todo application into / list and /add form; write Hono routes (internally calling Supabase RPC), allowing the front end to call these endpoints through typed fetch to implement adding, toggling complete, and deleting Todos.

06 LLM Integration (function call & agent)

• Goal: Understand the prompt-completion-function-call process, token costs, and lightweight Agent frameworks, encapsulating business actions as callable functions by models.

• Practice: Allow the front end to call /api/chat for users to add or delete Todos in natural language, then expand to include "weekly plan summary", "error diagnosis" and perception-planning-action cycles, enabling the model to autonomously decide when to call addTodo, listTodos, and other tools.

07 Deployment & Demo Day Sprint

• Goal: Master the Edge-First deployment approach and the CI/CD processes of GitHub Actions + Vercel/Cloudflare, experiencing the efficiency of AI-generated configuration files.

• Practice: Use Vercel CLI or wrangler deploy to go live in one click and generate previews for each PR.