Development Tutorials

Learn how to customize and extend Chameleon with these step-by-step tutorials.

Getting Started

These tutorials will help you understand how Chameleon works and how to build custom features on top of it.

Prerequisites

Before starting these tutorials, make sure you:

• ✅ Have Chameleon running locally (pnpm dev)
• ✅ Understand basic Next.js concepts
• ✅ Are familiar with React and TypeScript
• ✅ Have reviewed the Quick Start guide

Tutorial List

1. Customize Your Landing Page

Landing Page Customization

Learn how to customize the homepage:

• Edit hero section and headlines
• Update feature descriptions
• Customize pricing plans
• Change images and colors
• Update call-to-action buttons

Time: 30 minutes
Difficulty: Beginner

---

2. Create New Pages

Create New Pages

Build custom pages from scratch:

• Create new routes
• Design page layouts
• Add navigation links
• Implement protected routes
• Use dynamic routing

Time: 45 minutes
Difficulty: Beginner

---

3. Build Custom Components

Create New Components

Develop reusable React components:

• Component structure
• Props and TypeScript types
• Styling with Tailwind CSS
• Using Shadcn UI components
• Component composition

Time: 1 hour
Difficulty: Intermediate

---

4. Make API Calls

API Integration

Learn to work with APIs:

• Call external APIs
• Use Chameleon's API routes
• Handle authentication
• Implement error handling
• Process API responses

Time: 1 hour
Difficulty: Intermediate

---

5. Update Legal Documents

Legal Documentation

Customize your legal pages:

• Update Privacy Policy
• Modify Terms of Service
• Add new legal pages
• Customize MDX layouts
• Use AI to generate content

Time: 30 minutes
Difficulty: Beginner

Learning Path

We recommend following this order:

graph TD
    A[Quick Start] --> B[Landing Page]
    B --> C[New Pages]
    C --> D[API Calls]
    D --> E[New Components]
    E --> F[Legal Docs]
    F --> G[Deploy to Production]

Beginner Path

If you're new to Next.js or web development:

1. Week 1: Quick Start + Landing Page customization
2. Week 2: Create new pages + Legal docs
3. Week 3: Learn API integration basics
4. Week 4: Build simple components
5. Week 5: Deploy to Vercel

Intermediate Path

If you're familiar with Next.js:

1. Day 1-2: Quick Start + customize everything
2. Day 3-4: Build new features with APIs
3. Day 5-6: Create custom components
4. Day 7: Deploy and configure production

Advanced Path

If you're an experienced developer:

1. Morning: Setup and customize
2. Afternoon: Build custom features
3. Evening: Deploy to production
4. Ongoing: Extend with new AI providers, payment methods, etc.

Additional Resources

Code Examples

// Example: Create a new API route
// app/api/hello/route.ts
import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json({ message: "Hello World!" });
}

// Example: Protected route
// app/dashboard/page.tsx
import { auth } from "@/auth";
import { redirect } from "next/navigation";

export default async function DashboardPage() {
  const session = await auth();
  
  if (!session) {
    redirect("/sign-in");
  }
  
  return <div>Protected content</div>;
}

// Example: Using server actions
// app/actions.ts
"use server";

import { revalidatePath } from "next/cache";

export async function updateProfile(formData: FormData) {
  const name = formData.get("name");
  // Update database...
  revalidatePath("/profile");
}

Video Tutorials

Looking for video content? Check out:

• Video Tutorials - Official Chameleon tutorials
• Next.js YouTube Channel - Learn Next.js
• Shadcn UI Tutorials - Component guides

Community Resources

• GitHub Discussions - Ask questions and share ideas
• GitHub Issues - Report bugs and request features
• Example Projects - See what others have built

Best Practices

Development Workflow

1. Always test locally first - pnpm dev
2. Use TypeScript - Catch errors early
3. Follow the code style - Use Prettier
4. Write clean code - Use meaningful names
5. Document your changes - Add comments

File Organization

src/
├── app/                 # Next.js App Router
│   ├── [locale]/       # Localized routes
│   ├── api/            # API routes
│   └── (groups)/       # Route groups
├── components/         # React components
│   ├── ui/            # Reusable UI components
│   └── blocks/        # Page sections
├── lib/               # Utility functions
├── services/          # Business logic
├── models/            # Database models
└── types/             # TypeScript types

Naming Conventions

• Components: PascalCase (e.g., UserProfile.tsx)
• Files: kebab-case (e.g., user-profile.ts)
• Functions: camelCase (e.g., getUserProfile)
• Constants: UPPER_SNAKE_CASE (e.g., API_URL)

Troubleshooting

Common Issues

Build errors?

rm -rf .next node_modules
pnpm install
pnpm build

TypeScript errors?

# Restart TypeScript server in VS Code
Cmd/Ctrl + Shift + P → "TypeScript: Restart TS Server"

Environment variables not working?

• Restart dev server after changes
• Check for typos in variable names
• Ensure no spaces around = signs

Getting Help

If you're stuck:

1. Check the FAQ
2. Review Troubleshooting Guide
3. Search GitHub Issues
4. Ask in GitHub Discussions

What's Next?

After completing these tutorials:

Explore Features

• AI Integration - Add AI capabilities
• Payment System - Enable payments
• Admin Dashboard - Manage your app

Deploy to Production

• Deploy to Vercel - Easiest deployment
• Deploy to Cloudflare - Alternative platform
• Environment Variables - Production config

Advanced Topics

• Custom AI Providers - Integrate new AI services
• Advanced Routing - Parallel routes, intercepting routes
• Performance Optimization - Caching, lazy loading
• Testing - Unit tests, integration tests
• CI/CD - Automated deployment

---

Happy coding! 🚀 Start with any tutorial from the sidebar.