Starting a New Project - Cursor IDE

Scenario

You’ve been asked to create a new task management application for a small team. The requirements are intentionally vague: “We need something like Trello but simpler, focused on daily standups.” You have two days to create a working prototype.

Learning Objectives

By completing this lesson, you’ll master:

• Using AI to clarify vague requirements
• Generating comprehensive project architecture
• Bootstrapping with modern tech stack
• Setting up development environment efficiently
• Creating initial features with test coverage
• Establishing patterns for future development

Prerequisites

• Cursor IDE with quick start configuration complete
• Node.js 18+ and npm/yarn installed
• Basic knowledge of React and Node.js
• Git initialized in an empty directory

The Challenge

Transform vague requirements into a working application that includes:

• User authentication
• Task board with columns
• Real-time updates
• Mobile-responsive design
• Basic API with database

Tip

This lesson demonstrates the power of AI-driven development. What traditionally takes days can be accomplished in hours with the right approach.

Guided Implementation

Phase 1: Requirements Clarification

1. Create Initial PRD

Open Cursor in your empty project directory and start with Ask mode:

"I need to build a task management app 'like Trello but simpler,
focused on daily standups'. Help me create a detailed PRD by
asking clarifying questions."

2. AI Clarification Process

The AI will ask questions like:

• Who are the primary users?
• What’s the team size?
• What are the key features for daily standups?
• Do you need real-time collaboration?
• What’s the deployment target?

3. Generate Refined PRD

After answering questions:

"Based on our discussion, create a comprehensive PRD for a
daily standup task board at docs/requirements/standup-board.md"

Phase 2: Architecture Planning

1. Technology Selection

Switch to Agent mode:

@docs/requirements/standup-board.md
"Analyze this PRD and recommend a modern tech stack that:
- Allows rapid prototyping
- Supports real-time updates
- Works well with Cursor/AI development
- Has good documentation for AI context"

2. Architecture Design

"Create a detailed technical architecture document including:
- Frontend framework and structure
- Backend API design
- Database schema
- Authentication approach
- Real-time communication strategy
- Deployment architecture"

3. Project Structure Generation

"Based on the architecture, create the complete project structure
with all necessary directories and initial configuration files"

Phase 3: Implementation Bootstrap

1. Initialize Project

"Set up the project with:
- Next.js 14 with App Router for frontend
- Express + Socket.io for backend
- PostgreSQL with Prisma ORM
- JWT authentication
- Tailwind CSS for styling
Include all config files and package.json"

2. Database Schema

"Create the Prisma schema for:
- Users (with auth fields)
- Boards (for different projects/teams)
- Columns (todo, in progress, done, custom)
- Tasks (with all necessary fields)
- Comments and activity tracking"

3. Environment Setup

"Create development environment setup including:
- Docker compose for PostgreSQL
- Environment variables template
- Development scripts in package.json
- Initial database seeds"

Phase 4: Core Features Implementation

1. Authentication System

@prisma/schema.prisma @docs/requirements/standup-board.md
"Implement the complete authentication system:
- Registration with email/password
- Login with JWT tokens
- Protected API routes
- Frontend auth context
- Login/Register pages with Tailwind styling"

2. Task Board UI

@components @types
"Create the main task board interface:
- Drag and drop between columns
- Add/edit/delete tasks
- Real-time updates with Socket.io
- Mobile responsive design
- Loading and error states"

3. API Endpoints

@backend/src @prisma/schema.prisma
"Implement RESTful API endpoints:
- CRUD for boards, columns, and tasks
- Real-time event broadcasting
- Error handling middleware
- Input validation
- API documentation"

Phase 5: Testing and Quality

1. Test Suite Setup

"Set up comprehensive testing:
- Jest + React Testing Library for frontend
- Supertest for API testing
- Database test utilities
- Test data factories
- CI/CD ready configuration"

2. Initial Tests

@src
"Generate tests for:
- Authentication flow (register, login, logout)
- Task CRUD operations
- Drag and drop functionality
- API endpoint validation
- WebSocket connections"

3. Documentation

"Create initial documentation:
- README with setup instructions
- API documentation
- Architecture decisions record
- Contributing guidelines
- Deployment guide"

Key Techniques Demonstrated

Technique 1: Iterative Refinement

Start broad and refine:

// Initial prompt
"Create a task board"

// Better prompt
"Create a Trello-like task board for daily standups"

// Best prompt
@docs/requirements/standup-board.md
"Implement the task board following our PRD with real-time updates"

Technique 2: Context Building

Layer context progressively:

// First: Requirements
@docs/requirements/standup-board.md

// Then: Architecture
@docs/requirements/standup-board.md @docs/architecture.md

// Finally: Implementation
@docs/requirements/standup-board.md @docs/architecture.md @prisma/schema.prisma
"Implement the task creation feature"

Technique 3: Checkpoint Strategy

Create checkpoints at major milestones:

"Create checkpoint: Basic project structure complete"
"Create checkpoint: Authentication working"
"Create checkpoint: Basic board functionality"

Common Pitfalls and Solutions

Over-Engineering

Problem: AI suggests overly complex architecture

Solution: Add constraints to prompts:

"Keep it simple - we need a working prototype in 2 days"

Inconsistent Patterns

Problem: Different coding styles across files

Solution: Create rules early:

"Generate .cursor/rules/coding-standards.md based on the
first few components we've created"

Missing Context

Problem: AI forgets project specifics

Solution: Reference key documents:

@docs/requirements/standup-board.md @prisma/schema.prisma
"Always consider these when implementing features"

Extended Challenge

Now that you have a basic application, extend it with:

1. Advanced Features

   • User mentions in tasks (@username)
   • Due dates with notifications
   • Task templates for common standup items
   • Sprint/iteration support

2. Integrations

   • Slack notifications for task updates
   • Calendar integration for due dates
   • Export to CSV/PDF for reports
   • GitHub/GitLab issue sync

3. Performance Optimization

   • Implement virtual scrolling for large boards
   • Add Redis caching layer
   • Optimize WebSocket connections
   • Progressive Web App features

Measuring Success

Your implementation is successful when:

• ✅ Application runs locally with all features
• ✅ Authentication works securely
• ✅ Tasks can be created, moved, and updated
• ✅ Real-time updates work across multiple browsers
• ✅ Mobile responsive design functions properly
• ✅ Test coverage exceeds 70%
• ✅ Documentation is comprehensive
• ✅ Code follows consistent patterns

Key Takeaways

1. Start with Clear Requirements: Even vague ideas can become clear PRDs with AI assistance
2. Plan Before Coding: Architecture planning saves time and reduces refactoring
3. Use Progressive Enhancement: Start simple, add complexity incrementally
4. Leverage AI Strengths: Let AI handle boilerplate while you focus on business logic
5. Maintain Context: Good documentation and rules ensure consistent AI assistance

Time Analysis

Traditional approach: 2-3 days With Cursor AI: 3-4 hours

• Requirements clarification: 30 minutes (vs 2 hours)
• Architecture planning: 30 minutes (vs 3 hours)
• Initial setup: 20 minutes (vs 2 hours)
• Core features: 90 minutes (vs 8 hours)
• Testing & docs: 40 minutes (vs 4 hours)

Next Steps

You’ve learned how to bootstrap a complete application from scratch. Ready for the next challenge?

Try Variations

Use the same techniques to build a different type of app (blog, e-commerce, social)

Scale It Up

Add more complex features like roles, permissions, and advanced workflows

Deploy It

Use Cursor to set up CI/CD and deploy to production

Continue to Legacy Code Refactoring →

Note

Save your successful prompts and patterns from this lesson. They’ll be valuable templates for future projects. Consider contributing them to the community prompt library.