Your Complete Development Environment

Development Tools

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:

ModelInput Cost (per 1M tokens)Output Cost (per 1M tokens)Best For
Claude 3.5 Sonnet$3.00$15.00Production apps, complex tasks
DeepSeek R1$1.00$3.00Budget-conscious production
DeepSeek V3$0.14$2.20Budget-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

  1. Install the development essentials:
  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

Supabase

Tailwind CSS

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!