Workshop :: Web application - up1/workshop-vibe-coding-202507 GitHub Wiki

Workshop :: Web application

Design with Figma
- Figma To Cursor Plugin
- MCP Figma
Claude Task Master
- AI-powered task-management
Cursor IDE

1. Initial task master in project with Cursor

Initialize taskmaster-ai in my project

Result

Great! I can see the initialization created a complete taskmaster-ai structure with templates, docs, and tasks directories.
Now I need to help you create a Product Requirements Document (PRD) that will be used to automatically generate your initial tasks. I found an example PRD template that we can use as a guide.
To create your PRD, I need to know more about your project. Could you please tell me:

What type of project are you working on? (e.g., web app, mobile app, API, data analysis, etc.)
What problem does your project solve? (Brief description of the main goal)
Who is your target audience? (Who will use this?)
What are the main features you want to build? (List the core functionality)
Any specific technical requirements or constraints? (Preferred technologies, frameworks, etc.)
Once you provide these details, I'll help you create a comprehensive PRD file and then use taskmaster-ai to automatically generate your initial tasks from it.

2. Product Requirement Document (PRD)

# Product Requirements Document (PRD)

## 1. Overview / Purpose

**Application Name:**  
Web application สำหรับการสมัครสมาชิกใหม่ เพื่อทดลองใช้งานระบบ

## 2. Target Audience
- **Individual Users**: Everyday Users

## 3. Features and Functionality

### Core Features
- **สำหรับการสมัครสมาชิกใหม่**
  - กรอกข้อมูล firstname, lastname, email และ password

## 4. User Interface (UI) and User Experience (UX)

### UI Design Principles
- **Clean and Minimalist Layout**
  - Prioritize ease of navigation with intuitive icons and concise labels.

- **Responsive Design**
  - Optimized for both desktop and mobile devices.
  - Adaptive layout for smaller screens.

## 5. Technical Requirements

### Frontend
- **Framework**: ReactJS
- **Responsive Framework**: Tailwind CSS

### Backend
- **Language**: Node.js
- **Libraries**: 
  - expressjs library for REST API
  - pg library for connect to PostgreSQL database
- **Database**: PostgreSQL
- **Testing**:
  - Jest and SupurTest library

### Deployment
- **Deployment**: Docker and Docker compose

---

3. Parse PRD file

Generate tasks from PRD file

Can you parse my PRD with OpenAI's o4-mini ?

List of tasks

$task-master list

┌──────────────┬─────────────────────────────────────────────────────────────────────────┬──────────────────────────────┬────────────────────────┬────────────────────────────────────────┬────────────────────┐
│ ID           │ Title                                                                   │ Status                       │ Priority               │ Dependencies                           │ Complexity         │
├──────────────┼─────────────────────────────────────────────────────────────────────────┼──────────────────────────────┼────────────────────────┼────────────────────────────────────────┼────────────────────┤
│ 1            │ Setup Project Repository                                                │ ○ pending                    │ high                   │ None                                   │ N/A                │
├──────────────┼─────────────────────────────────────────────────────────────────────────┼──────────────────────────────┼────────────────────────┼────────────────────────────────────────┼────────────────────┤
│ 2            │ Initialize Backend Framework and DB Connection                          │ ○ pending                    │ high                   │ 1                                      │ N/A                │
├──────────────┼─────────────────────────────────────────────────────────────────────────┼──────────────────────────────┼────────────────────────┼────────────────────────────────────────┼────────────────────┤
│ 3            │ Define PostgreSQL Database Schema                                       │ ○ pending                    │ high                   │ 2                                      │ N/A                │
├──────────────┼─────────────────────────────────────────────────────────────────────────┼──────────────────────────────┼────────────────────────┼────────────────────────────────────────┼────────────────────┤
│ 4            │ Implement User Registration API Endpoint                                │ ○ pending                    │ high                   │ 3                                      │ N/A                │
├──────────────┼─────────────────────────────────────────────────────────────────────────┼──────────────────────────────┼────────────────────────┼────────────────────────────────────────┼────────────────────┤
│ 5            │ Initialize Frontend Application with React and Tailwind CSS             │ ○ pending                    │ medium                 │ 1                                      │ N/A                │
├──────────────┼─────────────────────────────────────────────────────────────────────────┼──────────────────────────────┼────────────────────────┼────────────────────────────────────────┼────────────────────┤
│ 6            │ Develop Registration Form UI and Integrate with API                     │ ○ pending                    │ high                   │ 5, 4                                   │ N/A                │
├──────────────┼─────────────────────────────────────────────────────────────────────────┼──────────────────────────────┼────────────────────────┼────────────────────────────────────────┼────────────────────┤
│ 7            │ Write Tests for Backend and Frontend                                    │ ○ pending                    │ medium                 │ 4, 6                                   │ N/A                │
├──────────────┼─────────────────────────────────────────────────────────────────────────┼──────────────────────────────┼────────────────────────┼────────────────────────────────────────┼────────────────────┤
│ 8            │ Configure Docker and Docker Compose for Deployment                      │ ○ pending                    │ medium                 │ 1, 2, 5                                │ N/A                │
└──────────────┴─────────────────────────────────────────────────────────────────────────┴──────────────────────────────┴────────────────────────┴────────────────────────────────────────┴────────────────────┘

5. Create cursor's rules for backend and frontend

Cursor directory
In folder .cursor/rules/

frontend.mdc

---
description: Frontend with reactjs and tailwind css
alwaysApply: false
---
Scope: **/*.tsx

Rules:
- Use functional components + React hooks (no class nonsense)
- Stick to TypeScript strict mode (I’m a type nerd)
- Use Tailwind CSS (it’s fast)

Project structure
- create in folder `./frontend`

backend.mdc

---
alwaysApply: false
---
Scope: api/**/*.ts

Rules:
- Use Express.js for routing
  - https://expressjs.com/en/5x/api.html
- Follow RESTful API conventions
- Use async/await (no callback hell)
- Use pg library to connect to PostgreSQL database with simple SQL statement
  - https://www.npmjs.com/package/pg

Project structure
- create in folder `./backend`

6. Start develop

procees task 01

validate, testing, run, fix and repeat !!

More !!

Create new project for backend and frontend by yourself
Generate UI from Figma file
Design API specification
Design test cases
Add API document with OpenAPI/Swagger

Demo code

https://github.com/up1/demo-coding-taskmaster-01