Our Favorite Tech Stack

​

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:

​

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

1. Install the development essentials:
   • Follow our Development Essentials Installation Guide
2. 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 the cline_docs folder (see example below)
   • Tell Cline to “initialize memory bank”
3. Add our recommended stack configuration:
   • Create .clinerules file (see template below)
   • Let Cline handle the rest!

​

Example Project Brief

# Project Brief

## Overview

Building a [type of application] that will [main purpose].

## Core Features

-   Feature 1
-   Feature 2
-   Feature 3

## Target Users

[Describe who will use your application]

## Technical Preferences (optional)

-   Any specific technologies you want to use
-   Any specific requirements or constraints

​

.clinerules Template

# Project Configuration

## Tech Stack

-   Next.js 14+ with App Router
-   Tailwind CSS for styling
-   Supabase for backend
-   Vercel for deployment
-   GitHub for version control

## Project Structure

/src
/app # Next.js App Router pages
/components # React components
/lib # Utility functions
/types # TypeScript types
/supabase
/migrations # SQL migration files
/seed # Seed data files
/public # Static assets

## Database Migrations

SQL files in /supabase/migrations should:

-   Use sequential numbering: 001, 002, etc.
-   Include descriptive names
-   Be reviewed by Cline before execution
    Example: 001_create_users_table.sql

## Development Workflow

-   Cline helps write and review code changes
-   Vercel automatically deploys from main branch
-   Database migrations reviewed by Cline before execution

## Security

DO NOT read or modify:

-   .env files
-   \*_/config/secrets._
-   Any file containing API keys or credentials

​

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

# Save your changes (do this often!)
git add .                                    # Stage all changed files
git commit -m "Add login page"              # Save changes with a clear message

# Share your changes
git push origin main                        # Upload to GitHub

Common Workflow

1. Start of day: Get latest changes

   bashCopygit pull origin main                     # Download latest code
   

2. During development: Save work regularly

   bashCopygit add .
   git commit -m "Clear message about changes"
   

3. End of day: Share your progress

   bashCopygit push origin main                     # Upload to GitHub
   

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

1. Use /help in Cline chat for immediate assistance
2. Check Cline Documentation
3. Join our Discord Community
4. Search GitHub issues for common problems

Remember: Cline is here to help at every step. Just ask for guidance or clarification when needed!