Full-Stack Development

Welcome to the Full-Stack Development stage! Here, you will dive deep into full-stack development, mastering frontend componentization, database design, backend API development, and deployment.

What You Will Learn

Frontend Development

Master modern frontend development and learn to use component libraries and design tools:

Frontend 0: Using Lovart for Assets

Learn how to use AI tools like Lovart to quickly generate high-quality game assets and UI resources

Frontend 1: Figma & MasterGo Basics

Master the basic operations of professional UI design tools and the workflow from design to code

Frontend 2: Building Your First Modern App - UI Design

Design a modern web application interface from scratch, practicing UI design principles

Frontend 3: UI Design Guidelines & Multi-Product UI

Learn mainstream UI design guidelines to improve product design consistency and aesthetics

Frontend 4: Let's Build Hogwarts Portraits

Practical project: Build an interactive Hogwarts portrait application using AI-generated images

Backend & Full-Stack

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

Backend 1: What is API

Understand the core concept of APIs, the bridge between frontend and backend

Backend 2: From Database to Supabase

Master relational database basics and learn to use Supabase, a modern BaaS platform

Backend 3: AI-Assisted Interface Code & Documentation

Use AI to assist in generating backend interface code and standard API documentation

Backend 4: Git Workflow

Master core operations and collaboration workflows of the Git version control system

Backend 5: Zeabur Deployment

Learn to quickly deploy your full-stack applications to the cloud using Zeabur

Backend 6: Modern CLI Development Tools

Explore modern CLI tools to enhance command-line development experience

Backend 7: Integrating Stripe Payment Systems

Practical: Integrate Stripe payment functionality into your application for monetization

Assignments

Consolidate your full-stack development skills through practical projects:

Assignment 1: Building Your First Modern App - Full-Stack

Comprehensively apply what you've learned to independently complete a fully functional full-stack application

Assignment 2: Modern Frontend Component Library + Trae

Use modern component libraries with Trae IDE to efficiently build complex frontend interfaces

AI Capabilities Extension

AI 1: Dify Basics & Knowledge Base Integration

Learn to build AI applications using Dify and integrate private knowledge bases

AI 2: AI Dictionary Query & Multimodal API Integration

Explore more AI capabilities, integrating vision, voice, and other multimodal APIs

Who Is This For

• Developers with some programming foundation who want to systematically learn 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 basic knowledge
• Understand basic HTML/CSS/JavaScript concepts
• Have preliminary knowledge of AI programming tools

Ready to dive deep into full-stack development? Click the left navigation to begin learning!