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 best practices.

1task-manager/
2├── src/
3│   ├── app/
4│   │   ├── layout.tsx
5│   │   └── page.tsx
6│   ├── components/
7│   │   ├── TaskList.tsx
8│   │   ├── TaskItem.tsx
9│   │   ├── TaskForm.tsx
10│   │   └── FilterBar.tsx
11│   ├── lib/
12│   │   └── types.ts
13│   └── hooks/
14│       └── useTasks.ts
15├── public/
16├── tailwind.config.js
17└── package.json

Define TypeScript types for a task manager:
- Task interface with id, title, description, status, category, dueDate
- Status type (pending, in-progress, completed)
- Category type

1Create a TaskForm component that:
21. Has inputs for title, description, category, due date
32. Validates inputs
43. Uses Tailwind for styling with a modern look
54. Emits onSubmit event with task data
65. Can be used for both creating and editing tasks

1Build a TaskList component that:
21. Displays tasks in a grid/list view
32. Shows task status with color coding
43. Has hover effects and animations
54. Includes delete and edit buttons
65. Groups tasks by status

1Create a custom hook useTasks that:
21. Manages task state (add, edit, delete, toggle)
32. Persists to localStorage
43. Loads from localStorage on mount
54. Provides filter/sort functionality

1Create the main page that:
21. Uses the useTasks hook
32. Displays TaskForm and TaskList
43. Implements filtering (All, Active, Completed)
54. Shows task statistics (total, completed, pending)
65. Has a clean, modern layout with Tailwind

1Enhance the app with:
21. Smooth animations for add/remove/complete
32. Dark mode support
43. Loading states
54. Empty states with helpful messages
65. Responsive design for mobile/tablet/desktop

1Help me deploy my Next.js task manager to Vercel:
21. Set up Vercel account
32. Connect GitHub repository
43. Configure build settings
54. Deploy and test

1Help me set up a React + Vite project for a weather dashboard.
2I'll use the OpenWeatherMap API.
3 
41. Create the project with TypeScript
52. Install dependencies (axios, recharts, lucide-react)
63. Show me how to get a free API key from OpenWeatherMap
74. Set up environment variables for the API key

1Create a weather API service that:
21. Fetches current weather by city name
32. Fetches 5-day forecast
43. Handles errors gracefully
54. Uses TypeScript types for API responses
65. Includes loading states

1Create components for:
21. CurrentWeather - Shows temp, condition, icon, city name
32. ForecastCard - Displays single day forecast
43. ForecastList - Shows 5-day forecast
54. WeatherDetails - Wind, humidity, pressure, etc.
65. SearchBar - Input for city search
7 
8Use Tailwind CSS with a modern, glassmorphism design.

1Add a temperature chart using Recharts that:
21. Shows hourly temperatures for the next 24 hours
32. Uses a gradient line chart
43. Has responsive sizing
54. Matches the app's color scheme

1Create dynamic backgrounds that change based on:
21. Weather condition (sunny, cloudy, rainy, snowy)
32. Time of day (day/night)
43. Use CSS gradients and animations
54. Smooth transitions between states

1Implement:
21. Save favorite cities to localStorage
32. Display multiple city cards
43. Quick switch between cities
54. Remove cities from favorites

1Add finishing touches:
21. Loading skeletons
32. Error messages with retry
43. Animations for weather changes
54. Mobile-responsive design
65. Deploy to Netlify or Vercel

1Guide me through building a blog platform with:
2- Next.js for frontend and API
3- Supabase for database and auth
4- Prisma for database ORM
5- Markdown support for posts
6- Image uploads
7 
8Walk me through the complete setup.

1Help me design a database schema for a blog with:
2- Users (id, email, name, avatar)
3- Posts (id, title, content, author, published, createdAt)
4- Comments (id, content, author, post, createdAt)
5- Tags (id, name)
6- PostTags (relationship table)
7 
8Create the Prisma schema.

1Set up NextAuth.js with:
21. Email/password authentication
32. Google OAuth
43. Protected routes
54. Session management
65. User profile page

1Create a rich text editor for blog posts:
21. Markdown support
32. Preview mode
43. Auto-save drafts
54. Image upload
65. Tags selector
76. Publish/draft toggle

1Help me deploy the blog to Vercel with:
21. Supabase database connection
32. Environment variables setup
43. Database migrations
54. Production build optimization

1Create a FastAPI project for a product inventory API:
21. Set up virtual environment
32. Install FastAPI, uvicorn, SQLAlchemy, Pydantic
43. Create project structure with best practices
54. Set up basic app with one endpoint

1Create SQLAlchemy models for:
2- Product (id, name, description, price, quantity, category)
3- Category (id, name, description)
4- User (id, email, hashed_password, is_active)
5 
6Include relationships between models.

1Create Pydantic schemas for:
2- ProductCreate, ProductUpdate, ProductResponse
3- UserCreate, UserLogin, UserResponse
4- CategoryCreate, CategoryResponse
5 
6Include field validation (price > 0, email format, etc.)

1Implement CRUD endpoints for products:
2- POST /products - Create product
3- GET /products - List all products (with pagination)
4- GET /products/{id} - Get single product
5- PUT /products/{id} - Update product
6- DELETE /products/{id} - Delete product
7 
8Include proper HTTP status codes and error handling.

1Add JWT authentication:
21. User registration endpoint
32. Login endpoint (returns JWT token)
43. Protected routes requiring authentication
54. Password hashing with bcrypt
65. Token verification middleware

1. Enhance OpenAPI docs with descriptions and examples
2. Create pytest tests for all endpoints
3. Add request/response examples
4. Test authentication flow

1Deploy the FastAPI to:
2- Railway.app or Render.com
3- Set up environment variables
4- Configure database
5- Test production endpoints

1Help me plan a web app for [your idea]:
21. Suggest the best tech stack
32. Break down features into milestones
43. Identify potential challenges
54. Recommend learning resources

1I'm getting this error:
2[paste error message]
3 
4In this code:
5[paste code]
6 
7Help me understand and fix it.

1Review this code for:
2- Best practices
3- Performance issues
4- Security concerns
5- Readability improvements
6 
7[paste code]

1Help me deploy my [framework] app to [platform]:
21. What files/config do I need?
32. How to set environment variables?
43. Build commands
54. Troubleshoot common issues