45-Day Vibe Coding
Master Learning Prompt

ROLE You are my senior web engineering mentor, curriculum architect, product-minded full-stack engineer, technical researcher and assessment designer. Teach me through deliberate practice and real products, not passive tutorials. MISSION Design a rigorous, personalized 45-day Vibe Coding curriculum that takes me from almost zero programming knowledge to being able to independently plan, build, debug, test, secure, deploy and explain practical web applications. Do not promise that 45 days makes me an expert in every area of software engineering. Define a credible target: an independent, competent builder of scoped production-style MVPs, with a clear path toward advanced mastery. LEARNER PROFILE - I am a Business Performance / Analytics professional with experience in business planning, KPI management, Excel/Power BI, budgeting, performance reporting and analytical problem-solving. - I have almost no formal programming experience. - I can dedicate approximately 5–10 hours per week. Create a realistic workload; do not silently assume several hours every day. - I prefer structured, professional, detailed explanations in Vietnamese. - I want to learn by building real apps and understanding why the code works. - Preferred tools: Google AI Studio / Build mode, Gemini, React, TypeScript, Tailwind CSS, Firebase Authentication, Cloud Firestore and Firebase Security Rules. - Use Git and GitHub for version control. Use a compatible deployment target; explain trade-offs between Firebase Hosting/App Hosting, Cloud Run and Hostinger rather than assuming every hosting plan supports every runtime. PERSONALIZED PROJECT PORTFOLIO Use these projects as a progressive learning sequence: 1. Mini web page and responsive personal dashboard. 2. CSV/Excel-to-Insight app: upload a file, preview rows, validate columns, calculate summary statistics and export results. 3. Business Performance Intelligence app: KPI cards, monthly trend, variance, contribution, ranking and evidence-based executive summary. 4. NSLĐ Analytics module: staff headcount, productivity CC/UPL, completion rates, GAP, staff distribution bands and aggregation by organizational dimensions. 5. Life OS: principles, identity, strategy, goals, projects, habits, daily actions, weekly review and decision log. 6. Knowledge OS or Personal Finance OS as an optional capstone extension, depending on progress. Use synthetic or explicitly authorized data only. Never instruct me to upload confidential banking, customer, employee or employer data to a personal AI service without approval. Use synthetic datasets for examples and tests. TECHNOLOGY SCOPE Teach the technologies in dependency order: - Web fundamentals: browser, client/server, HTML, CSS, JavaScript, JSON, HTTP, DOM and responsive design. - Developer workflow: editor, terminal, npm, package.json, Git, GitHub, browser DevTools, reading errors and debugging. - TypeScript: primitives, arrays, objects, types/interfaces, unions, functions and safe null handling. - React: components, props, state, events, forms, rendering, effects when appropriate, reusable components and routing. - UI: layout, design tokens, accessibility, responsive behavior, loading/empty/error states, tables, filters and charts. - Data: CSV/XLSX parsing, schema mapping, validation, aggregation, date handling, calculations and export. - Engineering: modular structure, separation of UI/business logic/data access, error handling and testing. - Firebase: project setup, Authentication, Firestore collections/documents, CRUD, queries, indexes where needed, Security Rules, Emulator and backup/export considerations. - Backend/API: HTTP methods, REST, request/response contracts, validation, rate limits and server-side secret management. - Gemini: structured outputs, evidence-grounded summaries, prompt injection awareness, token/cost considerations, uncertainty and human approval. - Quality: unit tests, integration tests, end-to-end smoke tests, accessibility, performance, privacy and security. - Delivery: production build, environment variables, deployment, logs, rollback, documentation and maintenance. Do not teach every technology in the mindmap indiscriminately. Do not add Vue, Next.js, PHP, Java, MongoDB, GraphQL or other tools unless a concrete use case justifies them. Explain why the selected stack is enough for the first projects. CURRICULUM DESIGN Create a day-by-day curriculum for Days 1–45. Because I only have 5–10 hours per week, calculate the total expected workload honestly. Provide a base plan that fits approximately 5–10 hours per week and mark optional stretch tasks separately. If the requested daily schedule exceeds that budget, label it clearly and provide a realistic core path. For EVERY DAY, include: 1. Day number, phase and estimated time. 2. A measurable learning objective using an observable verb. 3. Why this skill matters for building my target apps. 4. Concepts to learn, explained in plain Vietnamese. 5. A step-by-step practical lesson with exact actions. 6. A specific user case grounded in Business Performance, analytics, Life OS, Knowledge OS or Personal Finance. 7. A small coding task or change to make. 8. A reusable Vibe Coding prompt for that day's task. 9. A concrete deliverable / artifact. 10. Acceptance criteria: how I can prove it works. 11. At least one test case or manual verification. 12. Common beginner mistakes and how to debug them. 13. Reflection questions: what I understand, what remains unclear and what I can explain without AI. 14. Learning resources with title, author/organization, resource type, direct URL, why it is useful and which part to study. 15. A clear core task and an optional stretch task. RESOURCE RESEARCH AND CITATION REQUIREMENTS Use web research to find current, trustworthy learning resources. Prefer official documentation and high-quality primary sources, including: - MDN Web Docs for web platform fundamentals. - JavaScript.info for structured JavaScript learning where appropriate. - TypeScript Handbook. - React official Learn documentation. - Vite documentation. - Tailwind CSS documentation. - shadcn/ui documentation. - Git documentation and GitHub Skills. - Firebase documentation for Authentication, Firestore, Security Rules, Emulator and hosting. - Google AI Studio documentation and Gemini API documentation. - OWASP guidance for web application security. - Vitest, Testing Library or Playwright documentation where appropriate. - Reputable video courses and conference/tutorial videos from identifiable publishers or instructors. - Books with verifiable titles, authors, publisher information and legitimate book or publisher links. For each recommended video, provide the real title, creator/channel, URL and approximate relevant duration only if verified. Do not invent video IDs, book chapters, publication details, URLs, prices or resource contents. Prefer free resources, and label paid resources clearly. Avoid link farms and generic search result URLs when a direct canonical resource is available. Validate that links are plausible and point to the intended official resource. If live link verification is unavailable, label the link as unverified rather than claiming it was checked. Include a compact resource bibliography grouped by skill and indicate the exact days when each resource is used. CAPSTONE REQUIREMENTS By the end of Day 45, the primary capstone must be a working Business Performance Intelligence MVP with: - File upload and preview for a supported CSV/XLSX format. - Column mapping and data validation. - A deterministic KPI calculation engine. - Monthly trend and filterable analysis. - Variance and contribution analysis where the dataset supports it. - A small, documented test dataset with known expected results. - Unit tests for critical calculations. - Optional Gemini-generated executive summary based only on computed, supplied evidence. - A clear distinction between observed facts, hypotheses and recommendations. - Exportable output. - README with setup instructions, architecture, known limitations and test instructions. - A deployment plan appropriate for the selected platform. If the full capstone cannot be completed in the base workload, define a mandatory minimal capstone and a stretch version. Do not fake functionality or claim a deployment that has not been tested. ASSESSMENT SYSTEM Design a skills rubric with four levels: 1. Understand: can explain the concept. 2. Modify: can safely edit AI-generated code. 3. Build: can implement a scoped feature with tests. 4. Own: can debug, justify design trade-offs, test edge cases and maintain the feature independently. Assess at least: - Web fundamentals. - JavaScript/TypeScript. - React and UI design. - Data modeling and deterministic business logic. - Firebase and access control. - API and Gemini integration. - Testing and debugging. - Git, deployment and documentation. - Product thinking and scope control. Include checkpoints on Days 7, 14, 21, 30, 38 and 45. At checkpoints, require a working demonstration and explanation, not just self-reported completion. Add a rule: if a critical competency fails, remediate it before adding more features. VIBE CODING OPERATING RULES Teach me to use AI as a coding partner, not as a substitute for understanding: - Start each task by specifying behavior and acceptance criteria. - Ask AI to inspect the existing project before modifying it. - Make small, reviewable changes. - Ask for the root cause before applying fixes. - Never delete tests or hardcode expected answers to make tests pass. - Keep deterministic calculations in code, not in free-form AI output. - Use Git commits or checkpoints before major changes. - Require AI to list changed files, tests run, results and limitations. - Do not paste secrets into prompts. - Use Firebase Security Rules and test them; frontend-only checks are not authorization. - Treat AI-generated code and external content as untrusted until reviewed and tested. OUTPUT FORMAT — A SINGLE SELF-CONTAINED HTML FILE The final deliverable must be one complete, downloadable, standalone HTML file. Do not respond only with Markdown, a summary, a React application or a set of separate files. The HTML must: - Be written in Vietnamese, with technical terms retained in English where useful. - Include complete HTML5 structure, embedded CSS and embedded JavaScript. - Work locally when opened in a modern browser, without requiring a build step or external runtime. - Use a polished, professional learning-dashboard design: responsive layout, accessible contrast, clear typography, restrained navy/teal palette, phase cards, progress indicators and tables. - Include a navigation menu or table of contents, phase overview, all 45 daily lesson cards, resources, projects, prompts, assessment rubrics and final capstone checklist. - Include interactive checkboxes for daily completion, filter controls by phase/status and a progress dashboard. Use localStorage only for learning progress, never for secrets. - Include a copy button for each reusable prompt and a copy-all button where appropriate. - Include direct resource links with clear link labels, and a source bibliography. - Include estimated study time and identify core versus stretch tasks. - Include a printable layout and print-friendly styles. - Keep all 45 days in the HTML; do not use placeholders such as “continue similarly” or omit later days. - Handle missing localStorage or clipboard permissions gracefully. - Use semantic HTML, keyboard-accessible controls and appropriate ARIA labels. - Avoid externally hosted scripts, fonts or dependencies where practical so the file remains self-contained. CONTENT QUALITY GATES Before delivering: 1. Check that the 45-day schedule is internally consistent with the weekly time budget. 2. Check that every day has all required fields and a concrete output. 3. Check that every project grows from prior skills rather than introducing too many technologies at once. 4. Check that each core resource has a clear purpose and a relevant day. 5. Check that formulas in the Business Performance capstone are defined and tested. 6. Check that security, privacy, data validation and deterministic calculations are covered. 7. Check that no resource, book, author, video or URL is fabricated. 8. Check that the HTML is complete, responsive and syntactically valid. 9. Include a realistic statement that the goal is independent MVP-building competence, not guaranteed mastery of all professional web engineering in 45 days. 10. If the content becomes too long, simplify the prose but never omit days, core exercises, acceptance criteria or source links. FINAL RESPONSE Provide the generated HTML file as a downloadable attachment/link, explain how to open it locally, and give a concise note on the realistic outcome of the 45-day program.