FINAL PROJECT - WEEK 8

Multi-Stack AI-Accelerated Web App Build
多技术栈AI加速Web应用构建

Build the Same App with Three Different Stacks
用三种不同技术栈构建相同应用

The capstone project: Build a Developer's Control Center application using three different technology stacks, comparing AI code generation platforms (Bolt.new, Cursor, Copilot), and understanding when to use each approach.

顶点项目：使用三种不同技术栈构建开发者控制中心应用，比较AI代码生成平台（Bolt.new、Cursor、Copilot），并理解何时使用每种方法。

The Application / 应用概念

Developer's Control Center / 开发者控制中心

A productivity application for developers to manage notes and action items with intelligent extraction capabilities.

一个面向开发者的生产力应用，用于管理笔记和行动项，具有智能提取功能。

Core Features / 核心功能:

✓ Notes CRUD - Create, read, update, delete notes / 笔记CRUD
✓ Action Items - Task management with completion tracking / 行动项管理
✓ Smart Extraction - Extract action items from notes / 智能提取
✓ Search & Filter - Find content quickly / 搜索和过滤
✓ Responsive UI - Works on desktop and mobile / 响应式UI

Stack #1: Bolt.new (Next.js) / 技术栈#1：Bolt.new

🚀 AI-Generated Full-Stack / AI生成的全栈

                    Bolt.new is an AI-powered platform that generates complete applications from natural language descriptions. Fastest development cycle with modern aesthetics.
                    
                    Bolt.new是一个AI驱动的平台，可从自然语言描述生成完整应用。最快的开发周期，具有现代美学。

Create Bolt.new Project / 创建Bolt.new项目

Visit https://bolt.new and start a new project.

访问https://bolt.new并创建新项目。

Write Initial Prompt / 编写初始提示词

Create a developer's notes and action items management application with:
- Notes CRUD with title and content fields
- Action items with description and completion status
- Search functionality for notes
- Responsive design using Tailwind CSS
- SQLite database with better-sqlite3
- Modern, clean UI with dark mode support

Tech stack: Next.js 14, React, Tailwind CSS, better-sqlite3
                        

Iterate with AI / 与AI迭代

Refine the application with follow-up prompts:

"Add form validation with error messages"
"Make the layout responsive for mobile devices"
"Add delete confirmation dialogs"
"Improve color contrast for accessibility"
"添加带有错误消息的表单验证"
"使布局对移动设备响应式"

Review and Deploy / 审查和部署

Bolt generates code quickly, but review for:

Security issues (SQL injection, XSS)
Error handling completeness
Code organization and structure
Type safety and validation
Deploy to Vercel with one click

Stack #2: Django + React / 技术栈#2：Django + React

🏢 AI-Assisted Enterprise Grade / AI辅助企业级

                    Built with Cursor AI assistance. Django provides robust security, powerful ORM, and admin interface. React offers modern frontend. Best for long-term maintainability.
                    
                    使用Cursor AI辅助构建。Django提供强大的安全性、强大的ORM和管理界面。React提供现代前端。最适合长期可维护性。

Setup Django Backend / 设置Django后端

# Create Django project
mkdir django-react-version
cd django-react-version
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate
pip install django djangorestframework django-cors-headers psycopg2-binary

# Create project
django-admin startproject backend .
python manage.py startapp notes
                        

Define Models / 定义模型

Use Cursor with prompts like:

Create Django models for Note and ActionItem with:
- Note: title (CharField), content (TextField), created_at, updated_at
- ActionItem: description, completed (BooleanField), note (ForeignKey)
- Add __str__ methods and Meta class ordering
                        

Create API with DRF / 使用DRF创建API

# Install DRF
pip install djangorestframework

# Use Cursor prompts:
"Create Django REST Framework serializers for Note and ActionItem models"
"Add ViewSets for CRUD operations with pagination"
"Configure CORS in settings.py for React frontend"
                        

Setup React Frontend / 设置React前端

# Create React app with Vite
npm create vite@latest frontend -- --template react
cd frontend
npm install
npm install axios react-router-dom

# Configure proxy in vite.config.js
export default defineConfig({
  server: {
    proxy: 'http://localhost:8000'
  }
})
                        

Integration and Deployment / 集成和部署

Configure Django to serve React production build. Deploy backend to Railway/Render and frontend to Vercel, or deploy together.

配置Django提供React生产构建。将后端部署到Railway/Render，前端部署到Vercel，或一起部署。

Stack #3: MERN Stack / 技术栈#3：MERN

🟢 AI-Augmented Full JavaScript / AI增强全JavaScript

                    Built with GitHub Copilot assistance. Unified JavaScript language with MongoDB's flexible schema. Best for real-time applications and high concurrency.
                    
                    使用GitHub Copilot辅助构建。统一的JavaScript语言与MongoDB的灵活模式。最适合实时应用和高并发。

Setup MongoDB Atlas / 设置MongoDB Atlas

Create free MongoDB Atlas cluster. Get connection string.

创建免费的MongoDB Atlas集群。获取连接字符串。

Setup Express Backend / 设置Express后端

mkdir mern-version
cd mern-version
npm init -y
npm install express mongoose cors dotenv

# Create server.js
touch server.js
                        

Define Mongoose Schemas / 定义Mongoose模式

Use Copilot to generate schemas. Start typing and Copilot suggests:

const mongoose = require('mongoose');

const noteSchema = new mongoose.Schema({
  title: { type: String, required: true, minlength: 1, maxlength: 200 },
  content: { type: String, required: true, minlength: 1, maxlength: 10000 },
}, { timestamps: true });

const actionItemSchema = new mongoose.Schema({
  description: { type: String, required: true },
  completed: { type: Boolean, default: false },
  note: { type: mongoose.Schema.Types.ObjectId, ref: 'Note' }
}, { timestamps: true });
                        

Create Express Routes / 创建Express路由

Copilot suggests route handlers as you type:

// GET /api/notes - List all notes
router.get('/notes', async (req, res) => {
  try {
    const notes = await Note.find().sort({ createdAt: -1 });
    res.json({ ok: true, data: notes });
  } catch (error) {
    res.status(500).json({ ok: false, error: error.message });
  }
});

// POST /api/notes - Create note
router.post('/notes', async (req, res) => {
  try {
    const note = await Note.create(req.body);
    res.status(201).json({ ok: true, data: note });
  } catch (error) {
    res.status(400).json({ ok: false, error: error.message });
  }
});
                        

Setup React Frontend / 设置React前端

Similar to Django version, but connecting to Express backend. Use Vite for development.

类似于Django版本，但连接到Express后端。使用Vite进行开发。

Development Speed Comparison / 开发速度对比

Metric / 指标	Bolt.new (Next.js)	Django + React	MERN Stack
Time to First Run	15 minutes	3 hours	2.5 hours
Time to Complete	2 hours	4 hours	3.5 hours
Code Quality	Good	Excellent	Very Good
Maintainability	Fair	Excellent	Good
Learning Curve	Easy	Hard	Medium
Deployment Ease	Easy (Vercel)	Medium	Medium

AI Tools Efficiency Comparison / AI工具效率对比

10x

Bolt.new Speed
加速倍数

2-3x

Cursor Speed
加速倍数

1.5-2x

Copilot Speed
加速倍数

11.5h

Total Time
总时间

Recommendations / 推荐

🚀 Bolt.new (Next.js) - Use When / 使用场景

Rapid prototyping and MVPs / 快速原型和MVP
Startup quick launches / 创业公司快速启动
Solo developers / 独立开发者
Tight deadline projects / 紧急截止日期项目
Client demos / 客户演示

🏢 Django + React - Use When / 使用场景

Enterprise applications / 企业应用
Data-intensive systems / 数据密集系统
Long-term maintenance / 长期维护
Teams with Python experience / Python经验团队
Projects requiring admin interface / 需要管理界面的项目

🟢 MERN Stack - Use When / 使用场景

Full-stack JavaScript teams / 全栈JavaScript团队
Real-time applications / 实时应用
Flexible data requirements / 灵活数据需求
High concurrency needs / 高并发需求
Startups wanting unified language / 希望统一语言的创业公司

Key Learnings / 关键学习

Tech Stack Selection

Understanding trade-offs between speed, quality, and maintainability is crucial for technology decisions.

理解速度、质量和可维护性之间的权衡对于技术决策至关重要。

AI Tool Efficiency

AI tools provide 1.5-10x speed improvement but require careful review and oversight for production code.

AI工具提供1.5-10倍的速度提升，但生产代码需要仔细审查和监督。

Cross-Stack Migration

Consistent data models and API design make cross-platform development and migration easier.

一致的数据模型和API设计使跨平台开发和迁移更容易。

Congratulations! / 恭喜！

🎉 Course Complete! / 课程完成！

You've completed CS146S: The Modern Software Developer. You've learned:

你已完成CS146S：现代软件开发者。你已学习：

Week 1: LLM Prompting

Week 2: AI App Development

Week 3: MCP Protocol

Week 4: Claude Code Automations

Week 5: Agentic Development

Week 6: Security & Vulnerabilities

Week 7: AI Code Review

Week 8: Multi-Stack Development

Multi-Stack AI-Accelerated Web App Build多技术栈AI加速Web应用构建