Junior Developer

Welcome to the Junior Developer stage! Here, you will go deeper into full-stack development and learn modern frontend workflows, database design, backend APIs, deployment, and AI-powered product building.

What You Will Learn

Frontend Development

Master modern frontend development and learn how to use design tools, component libraries, and AI-native UI workflows:

• Frontend 0: Build Your Own Asset-Production Agent with Lovart — Use Nanobanana and Lovart to batch-generate high-quality visual assets, then build a drawing agent with intent recognition

• Frontend 1: Figma & MasterGo Basics — Master the basic operations of professional UI design tools and the workflow from design to code

• Frontend 2: UI Guidelines and Multi-Product Design — Learn mainstream UI design guidelines to improve product design consistency and aesthetics

• Frontend 3: Make Interfaces Beautiful with LLMs and Skills — Use prompts and plugins in real projects to make AI generate more polished, distinctive interfaces

• Frontend 4: Let — Practical project: Build an interactive Hogwarts portrait application using AI-generated images

• Frontend 5: From Design Prototype to Project Code — Learn how to turn design prototypes into frontend code that really runs in the browser

• Frontend 6: Upgrade Your UI with Modern Component Libraries — Use component libraries to build professional interfaces faster

Backend Development

Learn API design, database management, and application deployment strategies:

• Backend 1: From Database to Supabase — Master relational database basics and learn to use Supabase, a modern BaaS platform

• Backend 2: Backend API Design and Development — Use AI to assist in generating backend interface code and standard API documentation

• Backend 3: Learn Git and GitHub — Master core version control operations and collaboration workflows with Git

• Backend 4: Ship Your Product Prototype — Learn to quickly deploy your full-stack applications to the cloud using Zeabur

• Backend 5: From IDEs to CLI AI Coding Tools — Explore modern CLI tools to enhance command-line development experience

• Backend 6: Integrate Stripe and Other Billing Systems — Practical: Integrate Stripe payment functionality into your application for monetization

Major Projects

The previous chapters teach you the "parts." The major projects teach you "how to assemble those parts into a product that runs, demos, and ships."

We recommend completing them in order: Project 1 → Project 2:

• Project 1 walks you through the most common SaaS pipeline: login, generation, database, payments, and admin dashboard.
• Project 2 takes you into a more business-system-like scenario: role-based permissions, question banks, exams, submissions, and admin management.

flowchart LR
  A["Frontend & Components"] --> B["Database & APIs"]
  B --> C["Project 1<br/>Copywriting SaaS"]
  C --> D["Payment / Deploy / Admin"]
  D --> E["Project 2<br/>Exam System"]
  E --> F["Full Portfolio"]

If you're not sure which to start with, here's a quick comparison:

Project	Key Skills	Best For	Deliverable
Project 1: Copywriting Website	SaaS page structure, user login, AI generation, Stripe payments, admin dashboard	First-time builders of a complete commercial website	A registerable, generatable, payable, manageable SaaS prototype
Project 2: Exam & Management System	Role permissions, question bank modeling, exam flow, submissions, grading & statistics	Those who want to build a complete "business system"	An exam platform with student and admin portals

Whichever you choose, prepare at least these 3 deliverables:

• A runnable project repository

• An accessible demo link

• A README and a demo video

• Project 1: Your First SaaS Full-Stack App - AI Copywriting Website — Build an AI marketing copy workspace from scratch, including login, generation, billing, and an admin dashboard

• Project 2: Online Exam and Management System — Build an online exam system with automatic question generation, test-taking flows, and admin management

If you've completed the two main projects above, or want to build your portfolio in your own direction, pick one of these extension projects to dive deeper:

• Extension: Modern AI Image Generation SaaS — Build a Midjourney-inspired AI image SaaS with generation workspace, gallery, payments, and admin dashboard

• Extension: Custom Dify Agent Platform — Implement agent management, conversations, logging, and permission control for a minimal viable AI platform

• Extension: Travel Planning Agent Platform — Build an AI travel planning product with structured input, agent orchestration, and plan history management

• Extension: Spring Boot Movie Recommendation System — Build a complete recommendation system with Spring Boot, ratings, favorites, and explainable recommendations

• Extension: Grocery E-Commerce Microservices — Practice service decomposition, gateway routing, and inventory-order coordination in a microservices architecture

• Extension: Go Traffic Data Analysis & Visualization — Build a complete data product with ingestion, windowed aggregation, trend dashboards, and alerting

AI Capabilities Extension

• AI 1: Dify Basics & Knowledge Base Integration — Learn to build AI applications using Dify and integrate private knowledge bases

Who Is This For

• Developers with some programming foundation who want to systematically learn modern full-stack development
• Learners transitioning from product manager to full-stack engineer
• Junior to intermediate developers who want to master modern development tools and workflows
• Entrepreneurs who want to independently develop complete products

Prerequisites

• Complete the "Novice & Product Prototype" stage, or have equivalent foundational knowledge
• Understand basic HTML/CSS/JavaScript concepts
• Have a basic understanding of AI coding tools

Ready to move from product prototype to real full-stack delivery? Use the left navigation to start learning.