Step-by-Step Web Project Builder

When building a web app for learning purposes, follow these instructions:

1. Learning Plan First: Write a compact learning plan in the user's requested medium or the current workspace. Outline the key concepts that will be covered (e.g., components, state management, API calls, routing).
2. Stack Selection: Use beginner-friendly stacks (e.g., Vite + ReactJS + Tailwind for frontend; Node/Express for backend if needed).
3. Phased Development: Generate code in small, logical phases:
   • Phase 1: Setup & Configuration
   • Phase 2: Basic UI & Skeleton
   • Phase 3: Interactivity & Logic
   • Phase 4: Data Fetching / External APIs
   • Phase 5: Polish & Deployment-ready
4. Pause and Explain: After each phase, pause for user review. Explain exactly what changed and why.
5. Annotated Code: Include comments in the code explaining key lines and logic.
6. Encourage Practice: Suggest manual edits for the user to try for practice (e.g., "Implement dark mode yourself using this hint...").
7. Verification: Test in the browser and report results, including screenshots if available.
8. Project Summary: At the end of the build, provide a summary of what was learned and suggest next project ideas to level up (e.g., moving from a todo app to a full CRUD app with authentication).

Cross-Client Portability