App Builder Track

1Create a new Next.js 14 app for a task manager with:
2- TypeScript
3- Tailwind CSS
4- App Router
5- ESLint
6 
7Set up the project structure with components/, lib/, and hooks/ folders.

1Define TypeScript types for a task manager:
2- Task interface with id, title, description, status, category, dueDate
3- Status type (pending, in-progress, completed)
4- Category type
5 
6Put these in src/lib/types.ts

1Create a TaskForm component that:
21. Has inputs for title, description, category, due date
32. Validates inputs before submission
43. Uses Tailwind for a clean, modern look
54. Works for both creating and editing tasks
65. Has accessible labels and proper focus management

1Build a TaskList component that:
21. Displays tasks in a responsive grid
32. Shows status with color-coded badges
43. Has smooth hover effects
54. Includes delete and edit buttons
65. Groups tasks by status or category

1Create a custom hook useTasks that:
21. Manages task state (add, edit, delete, toggle status)
32. Persists to localStorage automatically
43. Loads saved tasks on page load
54. Provides filtering and sorting
65. Uses TypeScript for type safety

1Add finishing touches:
21. Smooth animations for adding/removing tasks
32. Dark mode that respects system preference
43. Loading skeleton while hydrating from localStorage
54. Empty state with helpful message
65. Confetti animation when completing all tasks

1Help me deploy to Vercel:
21. Create a git repository
32. Push the code
43. Connect to Vercel
54. Deploy and get a live URL

1Create a React + Vite project for a weather dashboard.
2I'll use the OpenWeatherMap API (it's free).
3 
41. Set up the project with TypeScript
52. Install axios for API calls and recharts for graphs
63. Show me how to get a free API key
74. Configure environment variables securely

1Create a weather service that:
21. Fetches current weather by city name
32. Gets 5-day/3-hour forecast data
43. Handles errors gracefully (city not found, rate limits)
54. Uses TypeScript types for API responses
65. Includes retry logic for failed requests

1Build these components with Tailwind:
2 
31. SearchBar - City search with autocomplete feel
42. CurrentWeather - Big temperature, condition icon, city name
53. ForecastCard - Single day with high/low
64. ForecastList - 5-day horizontal scroll
75. WeatherDetails - Wind, humidity, pressure, UV index
8 
9Use a glassmorphism design with backdrop blur.

1Create a temperature chart with Recharts:
21. Show hourly temps for next 24 hours
32. Use a gradient area chart
43. Make it responsive
54. Match the color scheme to weather condition
65. Add tooltips on hover

1Make the UI respond to weather:
21. Sunny = warm gradient background
32. Cloudy = gray, muted tones
43. Rainy = blue-gray with rain animation
54. Night = dark theme with stars
65. Smooth CSS transitions between states

1Let users save favorite cities:
21. Add to favorites button
32. Store in localStorage
43. Show favorites as quick-access cards
54. Sync across browser tabs
65. Remove from favorites option

1Guide me through building a blog platform:
21. Set up Next.js with Supabase
32. Configure Prisma ORM
43. Add NextAuth for authentication
54. Create the database schema
65. Build the UI components
7 
8Start with project setup and database connection.

1Design my blog database with Prisma:
2 
3Tables needed:
4- User (id, email, name, avatar, bio)
5- Post (id, title, slug, content, published, authorId, createdAt)
6- Comment (id, content, authorId, postId, createdAt)
7- Tag (id, name)
8- PostTag (postId, tagId)
9 
10Include proper relations and indexes.

1Set up NextAuth.js with:
21. Email/password login
32. Google OAuth option
43. Protected API routes
54. Session management
65. User profile updates
7 
8Follow security best practices.

1Build a blog post editor:
21. Markdown editing with live preview
32. Auto-save drafts every 30 seconds
43. Image upload to Supabase storage
54. Tags selector with autocomplete
65. Publish/draft toggle
76. SEO fields (meta description, og:image)

1Create a FastAPI project for a product inventory API:
21. Set up virtual environment
32. Install FastAPI, uvicorn, SQLAlchemy, Pydantic
43. Create proper folder structure
54. Add a health check endpoint
65. Configure hot reload for development

1Create SQLAlchemy models:
2- Product (id, name, description, price, quantity, category_id)
3- Category (id, name, description)
4- User (id, email, hashed_password, is_active, is_admin)
5 
6Set up SQLite for development, PostgreSQL-ready for production.

1Create Pydantic models for:
2- ProductCreate, ProductUpdate, ProductResponse
3- UserCreate, UserLogin, UserResponse
4- CategoryCreate, CategoryResponse
5 
6Add validation:
7- Price must be positive
8- Email must be valid format
9- Password minimum 8 characters

1Implement REST endpoints:
2- POST /products - Create product
3- GET /products - List with pagination, filtering, sorting
4- GET /products/{id} - Get single product
5- PUT /products/{id} - Update product
6- DELETE /products/{id} - Delete product
7 
8Use proper HTTP status codes and error responses.

1Add JWT authentication:
21. POST /auth/register - Create user account
32. POST /auth/login - Returns access + refresh tokens
43. POST /auth/refresh - Get new access token
54. Password hashing with bcrypt
65. Protected routes require valid JWT
76. Role-based permissions (user vs admin)

1Create comprehensive tests with pytest:
21. Test all CRUD operations
32. Test authentication flow
43. Test validation errors
54. Test edge cases
65. Use test database fixture
76. Aim for 90%+ coverage

1Help me plan a web app for [your idea]:
21. What's the best tech stack?
32. Break features into buildable chunks
43. What are potential gotchas?
54. Suggest a folder structure
65. What should I build first?

1I'm getting this error:
2[paste the full error]
3 
4Here's the relevant code:
5[paste code]
6 
7What's causing this and how do I fix it?

1Review this code for:
2- Bugs or logic errors
3- Security vulnerabilities
4- Performance issues
5- Best practice violations
6 
7[paste code]

1I'm trying to [goal] but [problem].
2 
3What I've tried:
41. [approach 1]
52. [approach 2]
6 
7What am I missing?

1# Install Vercel CLI
2npm i -g vercel
3 
4# Deploy
5vercel
6 
7# Deploy to production
8vercel --prod

1# Install Railway CLI
2npm i -g @railway/cli
3 
4# Login and deploy
5railway login
6railway init
7railway up