Project Workflows | Warp Training

⚛️

React / Next.js Projects

Frontend development workflows

🆕 Create New Project

❯ npx create-next-app@latest my-app --typescript --tailwind --eslint

❯ cd my-app && npm run dev

🔄 Daily Development

# Pull latest & start dev

❯ git pull && npm install && npm run dev

🧪 Before PR

❯ npm run lint && npm run type-check && npm run test && npm run build

📦 Common Packages

npm i axios HTTP client

npm i zustand State management

npm i react-query Data fetching

npm i framer-motion Animations

🟢

Node.js Backend

API and server development

🆕 Create New API

❯ mkdir my-api && cd my-api

❯ npm init -y

❯ npm i express cors dotenv

❯ npm i -D typescript @types/node @types/express ts-node nodemon

🔄 Development

# Start with hot reload

❯ npm run dev

# Test API endpoint

❯ curl http://localhost:3000/api/health

🗄️ Database Commands

npx prisma init Setup Prisma

npx prisma migrate dev Run migrations

npx prisma studio DB GUI

npx prisma generate Generate client

🐍

Python Projects

AI, data science, and backend

🆕 Create New Project

❯ mkdir my-project && cd my-project

❯ python -m venv venv

❯ source venv/bin/activate # or venv\Scripts\activate on Windows

❯ pip install -r requirements.txt

🔄 Daily Workflow

# Activate environment

❯ source venv/bin/activate

# Run script

❯ python main.py

# Run tests

❯ pytest

📦 Common Packages

pip install fastapi uvicorn API framework

pip install openai OpenAI SDK

pip install pandas numpy Data science

pip install langchain LLM framework

🐳

Docker Workflows

Container management

docker ps List running containers

docker ps -a List all containers

docker images List images

docker build -t name . Build image

docker run -p 3000:3000 name Run container

docker-compose up -d Start services

docker-compose down Stop services

docker logs -f container View logs

🧹 Cleanup

# Remove all stopped containers

❯ docker container prune

# Remove unused images

❯ docker image prune -a

# Nuclear option: remove everything

❯ docker system prune -a --volumes

▲

Vercel Deployment

Ship to production

vercel Preview deploy

vercel --prod Production deploy

vercel env pull Pull env vars

vercel logs View logs

Full Deploy Workflow

# 1. Make sure build works

❯ npm run build

# 2. Preview deploy

❯ vercel

# 3. Test preview URL

# 4. Deploy to production

❯ vercel --prod

🔧

Troubleshooting Commands

When things go wrong

🧹 Clean Slate

# Delete node_modules and reinstall

❯ rm -rf node_modules package-lock.json && npm install

# Clear npm cache

❯ npm cache clean --force

# Clear Next.js cache

❯ rm -rf .next

🔍 Debug Commands

# what's using port 3000 Find port conflict

# kill process on port 3000 Free up port

# show disk usage Check storage

# list running processes Find hung processes

💡

Warp AI for Debugging

When you get an error, just type # explain this error or # fix this and let Warp AI help!