szekelyszabi · July 30, 2025 14:34
diff --git a/gistfile1.txt b/gistfile1.txt
 # The 2025 Solo Dev's Next.js Starter Stack

 ## Project Overview
 You are helping to set up a modern Next.js application using the cutting-edge 2025 stack. This setup is designed for solo developers who want to ship fast without analysis paralysis, using the latest stable versions and industry best practices.

 ## Core Technology Stack

 ### 1. Framework & Runtime
 - **Next.js 15.3.5** - Using App Router (not Pages Router)
 - **React 19.0.0** - Latest React version
 - **TypeScript 5.x** - Strict mode enabled
 - **Node.js** - Latest LTS version recommended

 ### 2. Styling & UI
 - **Tailwind CSS v4** - Using PostCSS configuration with `@import "tailwindcss"`
 - **shadcn/ui** - Copy-paste component system built on Radix UI
 - **Radix UI** - Headless, accessible components
 - **Framer Motion** - For animations
 - **Lucide React** - For icons
 - **class-variance-authority** - For component variants
 - **tailwind-merge** - For className conflicts
 - **clsx** - For conditional classes

 ### 3. Forms & Validation
 - **React Hook Form v7** - Performant forms with minimal re-renders
 - **Zod v3** - TypeScript-first schema validation
 - **@hookform/resolvers** - Validation resolver for React Hook Form

 ### 4. Database & Authentication
 - **Supabase** - For database, authentication, and real-time features
  - Using `@supabase/ssr` for server-side rendering
  - Using `@supabase/supabase-js` for client operations
  - Row Level Security (RLS) enabled

 ### 5. State Management & Data Fetching
 - **Zustand** - For global state management
 - **TanStack Query (React Query)** - For server state and caching

 ### 6. Development Tools
 - **tsx** - For running TypeScript scripts
 - **ESLint** - With Next.js configuration
 - **Turbopack** - For faster development builds

 ## Quick Start Guide

 ### Step 1: Create Next.js Project
 ```bash
 npx create-next-app@latest my-next-app --typescript --tailwind --eslint --app --src-dir=false --import-alias="@/*"
 cd my-next-app
 ```

 ### Step 2: Install Core Dependencies
 ```bash
 # Form handling and validation
 npm install react-hook-form @hookform/resolvers zod

 # State management and data fetching
 npm install zustand @tanstack/react-query

 # Supabase integration
 npm install @supabase/supabase-js @supabase/ssr

 # Additional utilities
 npm install class-variance-authority tailwind-merge clsx lucide-react
 ```

 ### Step 3: Initialize shadcn/ui
 ```bash
 npx shadcn@latest init
 # Choose your preferred options when prompted
 # Then add essential components:
 npx shadcn@latest add button card input label form
 ```

 ### Step 4: Configure Environment
 Create `.env.local`:
 ```
 NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
 NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key
 SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
 ```

 ### Step 5: Update Tailwind CSS to v4 (Optional)
 If using Tailwind v4, update `tailwind.config.js`:
 ```javascript
 import { Config } from 'tailwindcss'

 const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
 }
 export default config
 ```

 ### Step 6: Verify Setup
 ```bash
 npm run dev
 ```
 Your starter should now be running with all integrations ready!

 ## Project Structure

 ```
 my-next-app/
 ├── app/                    # Next.js App Router
 │   ├── api/               # API routes
 │   ├── (auth)/            # Authentication routes  
 │   └── [features]/        # Feature-specific routes
 ├── components/            # React components
 │   ├── ui/               # shadcn/ui components
 │   └── [features]/       # Feature-specific components
 ├── lib/                   # Utility functions and configurations
 │   ├── supabase/         # Supabase client setup
 │   ├── validations/      # Zod schemas
 │   └── utils.ts          # Helper functions
 ├── public/               # Static assets
 └── styles/               # Global styles (globals.css)
 ```

 ## Key Configuration Files

 ### 1. package.json Scripts
 ```json
 {
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "npm run generate:tools && next build",
    "start": "next start",
    "lint": "next lint",
    "generate:tools": "tsx scripts/generate-tools.ts",
    "tools:watch": "tsx watch scripts/generate-tools.ts",
    "seed:schemas": "tsx scripts/seed-example-schemas.ts"
  }
 }
 ```

 ### 2. TypeScript Configuration
 - Target: ES2017
 - Module: ESNext with bundler resolution
 - Strict mode: true
 - Path alias: `@/*` → `./`

 ### 3. Tailwind CSS v4 Setup
 - Using PostCSS configuration
 - CSS custom properties for theming
 - Light/dark mode support
 - Semantic color naming system

 ### 4. Environment Variables
 ```
 NEXT_PUBLIC_SUPABASE_URL=
 NEXT_PUBLIC_SUPABASE_ANON_KEY=
 SUPABASE_SERVICE_ROLE_KEY=
 ```

 ## Important Setup Instructions

 ### 1. Installing Dependencies
 When setting up this stack, ALWAYS:
 - Use `npm install` to install exact versions from package-lock.json
 - Verify all dependencies are at their latest stable versions
 - Check official documentation for any breaking changes

 ### 2. Tailwind CSS v4 Integration
 - This project uses Tailwind CSS v4 with PostCSS (NOT the v3 config system)
 - Configuration is done through CSS, not JavaScript
 - Follow the latest Tailwind v4 documentation

 ### 3. Supabase Setup
 - Create a new Supabase project
 - Enable Row Level Security on all tables
 - Set up the database schema with migrations
 - Configure authentication providers as needed

 ### 4. Next.js App Router
 - All routes use the App Router (not Pages Router)
 - Server Components by default
 - Client Components marked with 'use client'
 - Proper data fetching patterns with async components

 ### 5. Development Experience
 - Use TypeScript strict mode for better type safety
 - Configure ESLint with Next.js recommended settings
 - Set up Prettier with Tailwind class sorting for consistent formatting

 ## Best Practices to Follow

 1. **Always check official documentation** for the latest integration patterns
 2. **Use the latest stable versions** of all dependencies
 3. **Follow Next.js 15 App Router patterns** - no Pages Router
 4. **Implement proper TypeScript types** - avoid 'any' types
 5. **Use Supabase RLS** for security
 6. **Follow React 19 best practices** with Actions and the `use` hook
 7. **Optimize for performance** with proper code splitting and caching

 ## Common Pitfalls to Avoid

 1. Don't use outdated Tailwind v3 configuration methods
 2. Don't mix Pages Router and App Router patterns
 3. Don't skip TypeScript strict mode checks
 4. Don't hardcode API keys - use environment variables
 5. Don't ignore React 19's new rendering behaviors and concurrent features

 ## Verification Steps

 After setup, verify:
 1. `npm run dev` starts without errors
 2. Tailwind CSS v4 styles are working
 3. Supabase connection is established
 4. TypeScript has no errors
 5. All routes load correctly
 6. Form validation works with Zod and React Hook Form
 7. shadcn/ui components render properly

 ## Additional Context

 This stack is designed for rapid development of modern web applications with:
 - Full-stack TypeScript for type safety
 - Component-first development with shadcn/ui
 - Server-side rendering with Next.js 15
 - Real-time capabilities with Supabase
 - Form handling with validation
 - Authentication and authorization
 - Dark/light mode theming

 When implementing new features, always:
 1. Check existing patterns in the codebase
 2. Consult official documentation for best practices
 3. Maintain consistency with the established architecture
 4. Write type-safe code with proper error handling
 5. Follow accessibility guidelines
 6. Optimize for performance and SEO
	# The 2025 Solo Dev's Next.js Starter Stack

	## Project Overview
	You are helping to set up a modern Next.js application using the cutting-edge 2025 stack. This setup is designed for solo developers who want to ship fast without analysis paralysis, using the latest stable versions and industry best practices.

	## Core Technology Stack

	### 1. Framework & Runtime
	- Next.js 15.3.5 - Using App Router (not Pages Router)
	- React 19.0.0 - Latest React version
	- TypeScript 5.x - Strict mode enabled
	- Node.js - Latest LTS version recommended

	### 2. Styling & UI
	- Tailwind CSS v4 - Using PostCSS configuration with `@import "tailwindcss"`
	- shadcn/ui - Copy-paste component system built on Radix UI
	- Radix UI - Headless, accessible components
	- Framer Motion - For animations
	- Lucide React - For icons
	- class-variance-authority - For component variants
	- tailwind-merge - For className conflicts
	- clsx - For conditional classes

	### 3. Forms & Validation
	- React Hook Form v7 - Performant forms with minimal re-renders
	- Zod v3 - TypeScript-first schema validation
	- @hookform/resolvers - Validation resolver for React Hook Form

	### 4. Database & Authentication
	- Supabase - For database, authentication, and real-time features
	- Using `@supabase/ssr` for server-side rendering
	- Using `@supabase/supabase-js` for client operations
	- Row Level Security (RLS) enabled

	### 5. State Management & Data Fetching
	- Zustand - For global state management
	- TanStack Query (React Query) - For server state and caching

	### 6. Development Tools
	- tsx - For running TypeScript scripts
	- ESLint - With Next.js configuration
	- Turbopack - For faster development builds

	## Quick Start Guide

	### Step 1: Create Next.js Project
	```bash
	npx create-next-app@latest my-next-app --typescript --tailwind --eslint --app --src-dir=false --import-alias="@/*"
	cd my-next-app
	```

	### Step 2: Install Core Dependencies
	```bash
	# Form handling and validation
	npm install react-hook-form @hookform/resolvers zod

	# State management and data fetching
	npm install zustand @tanstack/react-query

	# Supabase integration
	npm install @supabase/supabase-js @supabase/ssr

	# Additional utilities
	npm install class-variance-authority tailwind-merge clsx lucide-react
	```

	### Step 3: Initialize shadcn/ui
	```bash
	npx shadcn@latest init
	# Choose your preferred options when prompted
	# Then add essential components:
	npx shadcn@latest add button card input label form
	```

	### Step 4: Configure Environment
	Create `.env.local`:
	```
	NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
	NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key
	SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
	```

	### Step 5: Update Tailwind CSS to v4 (Optional)
	If using Tailwind v4, update `tailwind.config.js`:
	```javascript
	import { Config } from 'tailwindcss'

	const config: Config = {
	content: [
	'./pages/*/.{js,ts,jsx,tsx,mdx}',
	'./components/*/.{js,ts,jsx,tsx,mdx}',
	'./app/*/.{js,ts,jsx,tsx,mdx}',
	],
	theme: {
	extend: {},
	},
	plugins: [],
	}
	export default config
	```

	### Step 6: Verify Setup
	```bash
	npm run dev
	```
	Your starter should now be running with all integrations ready!

	## Project Structure

	```
	my-next-app/
	├── app/ # Next.js App Router
	│ ├── api/ # API routes
	│ ├── (auth)/ # Authentication routes
	│ └── [features]/ # Feature-specific routes
	├── components/ # React components
	│ ├── ui/ # shadcn/ui components
	│ └── [features]/ # Feature-specific components
	├── lib/ # Utility functions and configurations
	│ ├── supabase/ # Supabase client setup
	│ ├── validations/ # Zod schemas
	│ └── utils.ts # Helper functions
	├── public/ # Static assets
	└── styles/ # Global styles (globals.css)
	```

	## Key Configuration Files

	### 1. package.json Scripts
	```json
	{
	"scripts": {
	"dev": "next dev --turbopack",
	"build": "npm run generate:tools && next build",
	"start": "next start",
	"lint": "next lint",
	"generate:tools": "tsx scripts/generate-tools.ts",
	"tools:watch": "tsx watch scripts/generate-tools.ts",
	"seed:schemas": "tsx scripts/seed-example-schemas.ts"
	}
	}
	```

	### 2. TypeScript Configuration
	- Target: ES2017
	- Module: ESNext with bundler resolution
	- Strict mode: true
	- Path alias: `@/*` → `./`

	### 3. Tailwind CSS v4 Setup
	- Using PostCSS configuration
	- CSS custom properties for theming
	- Light/dark mode support
	- Semantic color naming system

	### 4. Environment Variables
	```
	NEXT_PUBLIC_SUPABASE_URL=
	NEXT_PUBLIC_SUPABASE_ANON_KEY=
	SUPABASE_SERVICE_ROLE_KEY=
	```

	## Important Setup Instructions

	### 1. Installing Dependencies
	When setting up this stack, ALWAYS:
	- Use `npm install` to install exact versions from package-lock.json
	- Verify all dependencies are at their latest stable versions
	- Check official documentation for any breaking changes

	### 2. Tailwind CSS v4 Integration
	- This project uses Tailwind CSS v4 with PostCSS (NOT the v3 config system)
	- Configuration is done through CSS, not JavaScript
	- Follow the latest Tailwind v4 documentation

	### 3. Supabase Setup
	- Create a new Supabase project
	- Enable Row Level Security on all tables
	- Set up the database schema with migrations
	- Configure authentication providers as needed

	### 4. Next.js App Router
	- All routes use the App Router (not Pages Router)
	- Server Components by default
	- Client Components marked with 'use client'
	- Proper data fetching patterns with async components

	### 5. Development Experience
	- Use TypeScript strict mode for better type safety
	- Configure ESLint with Next.js recommended settings
	- Set up Prettier with Tailwind class sorting for consistent formatting

	## Best Practices to Follow

	1. Always check official documentation for the latest integration patterns
	2. Use the latest stable versions of all dependencies
	3. Follow Next.js 15 App Router patterns - no Pages Router
	4. Implement proper TypeScript types - avoid 'any' types
	5. Use Supabase RLS for security
	6. Follow React 19 best practices with Actions and the `use` hook
	7. Optimize for performance with proper code splitting and caching

	## Common Pitfalls to Avoid

	1. Don't use outdated Tailwind v3 configuration methods
	2. Don't mix Pages Router and App Router patterns
	3. Don't skip TypeScript strict mode checks
	4. Don't hardcode API keys - use environment variables
	5. Don't ignore React 19's new rendering behaviors and concurrent features

	## Verification Steps

	After setup, verify:
	1. `npm run dev` starts without errors
	2. Tailwind CSS v4 styles are working
	3. Supabase connection is established
	4. TypeScript has no errors
	5. All routes load correctly
	6. Form validation works with Zod and React Hook Form
	7. shadcn/ui components render properly

	## Additional Context

	This stack is designed for rapid development of modern web applications with:
	- Full-stack TypeScript for type safety
	- Component-first development with shadcn/ui
	- Server-side rendering with Next.js 15
	- Real-time capabilities with Supabase
	- Form handling with validation
	- Authentication and authorization
	- Dark/light mode theming

	When implementing new features, always:
	1. Check existing patterns in the codebase
	2. Consult official documentation for best practices
	3. Maintain consistency with the established architecture
	4. Write type-safe code with proper error handling
	5. Follow accessibility guidelines
	6. Optimize for performance and SEO
No results found