Our Favorite Tech Stack
A curated list of our recommended technologies and tools for building modern web applications with Cline.
Recommended Stack for New Cline Users (2025)
Your Complete Development Environment
Development Tools
- VS Code - Your code editor, download here
- GitHub - Where your code lives, sign up here
Frontend
- Next.js 14+ - React framework with App Router
- Tailwind CSS - Beautiful styling without writing CSS
- TypeScript - JavaScript, but safer and smarter
Backend
- Supabase - Your complete backend solution, sign up with GitHub
- PostgreSQL database
- Authentication
- File storage
- Real-time updates
Deployment
- Vercel - Where your app runs, sign up with GitHub
- Automatic deployments from GitHub
- Preview deployments for testing
- Production-ready CDN
AI Development
Choose your AI assistant based on your needs:
Model | Input Cost (per 1M tokens) | Output Cost (per 1M tokens) | Best For |
---|---|---|---|
Claude 3.5 Sonnet | $3.00 | $15.00 | Production apps, complex tasks |
DeepSeek R1 | $1.00 | $3.00 | Budget-conscious production |
DeepSeek V3 | $0.14 | $2.20 | Budget-conscious development |
Free Tier Benefits
Vercel (Hobby)
- 100 GB data transfer/month
- 100k serverless function invocations
- 100 MB deployment size
- Automatic HTTPS & CI/CD
Supabase (Free)
- 500 MB database storage
- 1 GB file storage
- 50k monthly active users
- 2M real-time messages/month
GitHub (Free)
- Unlimited public repositories
- GitHub Actions CI/CD
- Project management tools
- Collaboration features
Getting Started
- Install the development essentials:
- Follow our Development Essentials Installation Guide
- Set up Cline’s Memory Bank:
- Follow the Memory Bank setup instructions
- Create an empty
cline_docs
folder in your project root - Create
projectBrief.md
in thecline_docs
folder (see example below) - Tell Cline to “initialize memory bank”
- Add our recommended stack configuration:
- Create
.clinerules
file (see template below) - Let Cline handle the rest!
- Create
Example Project Brief
.clinerules Template
Learning Resources (2025)
Want to learn more about the technologies we’re using? Here are some great resources:
Next.js and React
- Official Learn Next.js Course - Interactive tutorial
- NextJS App Router: Modern Web Dev in 1 Hour - Quick overview
- Building Real-World Apps with Next.js - Practical examples
Supabase
- Supabase From Scratch - Comprehensive course
- Official Quickstart Guides
- Real-Time Apps with Next.js and Supabase
Tailwind CSS
- Tailwind CSS Tutorial for Beginners
- Official Tailwind Documentation
- Interactive course at Scrimba Tailwind CSS Course
Other Things to Know
Working with Git & GitHub
Git helps you track changes in your code and collaborate with others. Here are the essential commands you’ll use:
Daily Development
Common Workflow
-
Start of day: Get latest changes
-
During development: Save work regularly
-
End of day: Share your progress
Best Practices
- Commit often with clear messages
- Pull before starting new work
- Push completed work to share with others
- Use
.gitignore
to avoid committing sensitive files
Tip: Vercel automatically deploys when you push to main!
Environment Variables
- Store secrets in
.env.local
for development - Add them to Vercel project settings for production
- Never commit
.env
files to Git
Getting Help
- Use
/help
in Cline chat for immediate assistance - Check Cline Documentation
- Join our Discord Community
- Search GitHub issues for common problems
Remember: Cline is here to help at every step. Just ask for guidance or clarification when needed!