Science and engineering student projects
Suitable for users with programming basics. Through API services and full-stack application development, gain a deep understanding of the practical application of AI tools in software development and master best practices for enterprise-level development.
Project 1: API Service Development
Project Overview
Technology selection analysis: why choose this tool combination?
Cursor Agent: Architecture Design and Code Generation
- • Project structure generation: the Agent can understand requirements and automatically generate a sensible project structure
- • Architecture Design: help design API routes, middleware, error handling, and other architecture
- • Code generation: Generate complete CRUD operation code based on the requirement description
- • Best practices: Automatically apply RESTful design principles, error handling patterns, etc.
GitHub Copilot: real-time code completion
- • Code completion: Enter a function name or comment to auto-complete the code implementation
- • Context understanding: understand the current code context and provide relevant suggestions
- • Rapid iteration: Reduce duplicate code writing and increase development speed
- • Multilingual support: Supports multiple programming languages and frameworks
Continue.dev: Code Review and Optimization
- • Code review: use local models to review code quality and identify potential issues
- • Performance optimization: identify performance bottlenecks and provide optimization suggestions
- • Security audit: Check security vulnerabilities and provide remediation suggestions
- • Private deployment: Code is not uploaded to the cloud, protecting privacy
Tool synergy: Cursor Agent is responsible for overall architecture and complex logic generation, Copilot is responsible for daily code completion and rapid iteration, and Continue.dev is responsible for code quality assurance. This combination enables a complete development process from design to implementation to optimization, ensuring both development speed and code quality.
Detailed steps
Step 1: Requirements analysis and API design (1-2 hours)
1. Clarify API requirements: user management, data CRUD, authentication and authorization
2. Use Cursor Agent to design the API structure:
- POST /api/users (create user)
- GET /api/users (fetch user list, supports pagination and filtering)
- GET /api/users/:id (retrieve a single user)
- PUT /api/users/:id (update user)
- DELETE /api/users/:id (delete user)
- POST /api/auth/login (user login)
- POST /api/auth/register (user registration)
Use JWT for authentication and implement RBAC permission control"
3. Cursor generates API design documents and routing structure
4. Define data models (User, Role, etc.)
Step 2: Use Cursor Agent to generate the project structure (1 hour)
1. Create a new project in Cursor and choose a tech stack (e.g. Node.js + Express)
2. Use Agent mode to tell Cursor your requirements:
- Project structure (routes, controllers, models, middleware)
- Database configuration (using Prisma ORM)
- Environment variable configuration
- Error handling middleware
- Logging middleware
- Authentication middleware (JWT)"
3. Cursor generates the complete project structure and base code
4. Check the generated structure and adjust as needed
Step 3: Use Copilot to speed up development (3-4 hours)
1. Use Copilot to complete CRUD operation code:
- • Enter the function signature, and Copilot automatically completes the implementation
- • Describe requirements in input comments, and Copilot generates the code
- • Use Copilot to generate data validation logic
- • Use Copilot to generate error handling code
2. Implement authentication and authorization features:
- • Generate and verify JWT tokens
- • Password encryption (bcrypt)
- • Permission check middleware
3. Add data validation (using Joi or Zod)
4. Implement pagination and filtering features
Step 4: Use Continue.dev for code review (1 hour)
1. Configure Continue.dev and connect to the local model (Ollama)
2. Use Continue.dev to review code:
- • Check code quality and best practices
- • Identify potential performance issues
- • Check security vulnerabilities
- • Provide optimization suggestions
3. Optimize the code based on the review results
4. Ensure the code complies with team standards
Step 5: Testing and Deployment (2 hours)
1. Write unit tests (using Jest)
2. Write integration tests (test API endpoints)
3. Use Postman or Thunder Client to test the API
4. Deploy to a cloud platform (such as Railway, Render, Vercel)
5. Configure CI/CD workflows (GitHub Actions)
Key code examples
User controller (generated by Cursor Agent)
// controllers/userController.js
const User = require('../models/User')
const { validationResult } = require('express-validator')
exports.createUser = async (req, res) => {
try {
const errors = validationResult(req)
if (!errors.isEmpty()) {
return res.status(400).json({ errors: errors.array() })
}
const { name, email, password, role } = req.body
// Check whether the email already exists
const existingUser = await User.findOne({ email })
if (existingUser) {
return res.status(400).json({ error: 'Email already exists' })
}
// Create user
const user = await User.create({
name,
email,
password: await bcrypt.hash(password, 10),
role: role || 'user'
})
res.status(201).json({
id: user.id,
name: user.name,
email: user.email,
role: user.role
})
} catch (error) {
res.status(500).json({ error: error.message })
}
}Authentication middleware (Copilot completion)
// middleware/auth.js
const jwt = require('jsonwebtoken')
const authenticate = (req, res, next) => {
const token = req.headers.authorization?.split(' ')[1]
if (!token) {
return res.status(401).json({ error: 'No token provided' })
}
try {
const decoded = jwt.verify(token, process.env.JWT_SECRET)
req.user = decoded
next()
} catch (error) {
res.status(401).json({ error: 'Invalid token' })
}
}
const authorize = (...roles) => {
return (req, res, next) => {
if (!req.user) {
return res.status(401).json({ error: 'Unauthorized' })
}
if (!roles.includes(req.user.role)) {
return res.status(403).json({ error: 'Forbidden' })
}
next()
}
}
module.exports = { authenticate, authorize }Common issues and solutions
Problem 1: API design does not conform to RESTful principles
Solution: use Cursor Agent to redesign the API structure, referring to RESTful best practices. Ensure the correct HTTP methods (GET, POST, PUT, DELETE) and status codes are used.
Problem 2: Error handling is inconsistent
Solution: Create unified error-handling middleware, use Continue.dev to review the error-handling code, and ensure all errors are returned in a standard format.
Problem 3: Performance issue (slow database queries)
Solution: Use Continue.dev to analyze performance bottlenecks, add database indexes, use query optimization, and implement caching mechanisms.
Issue 4: Security issues (SQL injection, XSS)
Solution: Use parameterized queries, input validation and sanitization, and use Continue.dev for security auditing.
Project checklist
Project 2: Full-stack application development
Project Overview
Technical choice analysis: why choose bolt.new + Cursor + Fabric?
bolt.new: full-stack development in the browser
- • WebContainers technology: Run Node.js in the browser, no local environment required
- • Instant preview: code changes take effect immediately, see results in real time
- • Rapid prototyping: Build a complete frontend application in minutes
- • Collaboration-friendly：Collaborate on development just by sharing a link
- • One-click deployment: deploy directly to platforms like Vercel
Cursor: Backend API development
- • API development: use Agent mode to quickly generate backend APIs
- • Database integration: Integrate ORM frameworks such as Prisma and TypeORM
- • Authentication system: Implement authentication schemes such as JWT and OAuth
- • Business logic: Handle complex business logic and data validation
Fabric: code quality optimization
- • Code review: Use Patterns to review code quality
- • Performance optimization: identify and optimize performance bottlenecks
- • Best practices: Apply industry best practices and design patterns
- • Code refactoring: Refactor the code to improve maintainability
Tool synergy: bolt.new is responsible for rapidly building the frontend UI and basic interactions, Cursor is responsible for developing backend APIs and business logic, and Fabric is responsible for optimizing code quality and performance. This combination enables decoupled frontend and backend development, ensuring both development speed and code quality, making it suitable for medium to large full-stack projects.
Detailed steps
Step 1: Use bolt.new to quickly build the frontend (3-4 hours)
1. Visit bolt.new and create a new project
2. Use the AI assistant to describe front-end requirements:
- Login/registration page
- Task list page (shows all tasks)
- Task details page
- Create/Edit task form
- User settings page
Use Next.js + TypeScript + Tailwind CSS, support dark theme"
3. bolt.new generates complete frontend code
4. Adjust the UI style and interactions, and add animation effects
5. Implement state management (using Zustand or Context API)
Step 2: Develop backend APIs with Cursor (4-5 hours)
1. Create a backend project in Cursor (Node.js + Express)
2. Use Agent mode to generate the API structure:
- User authentication API (registration, login, token refresh)
- Task CRUD API
- Task filtering and search API
- User settings API
Using Prisma ORM, PostgreSQL database, JWT authentication"
3. Implement database models and relationships
4. Implement API endpoints and business logic
5. Add data validation and error handling
Step 3: Front-end and back-end integration (2-3 hours)
1. Configure the API client (using axios or fetch)
2. Implement the API call function:
- • User authentication-related APIs
- • Task CRUD API
- • Error handling and retry logic
- • Token refresh mechanism
3. Connect frontend and backend, test API calls
4. Handle loading states and error states
5. Implement optimistic updates and error rollback
Step 4: Use Fabric to optimize code quality (2-3 hours)
1. Review the code using Fabric’s Patterns:
- • Code qualityPattern
- • Performance optimization Pattern
- • Security Audit Pattern
- • Best practice patterns
2. Optimize the code based on Fabric's suggestions
3. Refactor duplicate code and extract common components
4. Optimize database queries and add indexes
5. Implement a caching mechanism (Redis)
Step 5: Integration testing and deployment (1-2 hours)
1. Write end-to-end tests (using Playwright or Cypress)
2. Test front-end and back-end integration features
3. Deploy the frontend to Vercel
4. Deploy the backend to Railway or Render
5. Configure environment variables and database connection
6. Test production environment features
Common issues and solutions
Issue 1: Frontend-backend communication failure (CORS error)
Solution: configure CORS middleware in the backend to allow access from the frontend domain. Check whether the API URL configuration is correct.
Problem 2: state synchronization issue (frontend state inconsistent with backend)
Solution: Implement optimistic updates and error rollbacks, using React Query or SWR to manage server state.
Issue 3: Deployment configuration is complex
Solution: use environment variables to manage configuration, use Docker to containerize deployment, and use CI/CD to automate the deployment process.
Project checklist
Learning outcomes
After completing this chapter, you will:
- 1Master best practices for API development and be able to design APIs that comply with RESTful conventions
- 2Understand the complete full-stack development process and be able to independently complete a project with separated frontend and backend
- 3Able to use multiple tools collaboratively, leveraging the synergy of tool combinations
- 4Master code quality assurance methods and be able to use tools for code review and optimization
- 5Have the ability to solve real-world problems and handle complex issues such as frontend-backend integration and deployment