home/Projects/docs.pivoine.art/QUICKSTART.md

Quick Start Guide

Installation & Setup

1. Install Dependencies

pnpm install

2. Run Development Server

pnpm dev

This will start the development server with Turbopack for ultra-fast hot reload!

Visit http://localhost:3000 to see your site!

First Steps

Add a New Documentation Project

1. Open app/page.tsx
2. Add your project to the projects array:

{
  name: 'Your Project',
  status: 'Active',
  description: 'Your project description',
  url: '/your-project',
  gradient: 'from-blue-500 to-cyan-600'
}

Customize Colors & Branding

Change main colors: Edit gradient classes in app/page.tsx

gradient: 'from-purple-500 to-pink-600' // Your colors here

Update metadata: Edit app/layout.tsx

export const metadata: Metadata = {
  title: 'Your Title',
  description: 'Your description',
}

Build for Production

# Create optimized production build
pnpm build

# Test production build locally
pnpm start

Project Structure

app/
├── layout.tsx    # Root layout, metadata, fonts
├── page.tsx      # Landing page component
└── globals.css   # Global styles

public/           # Static assets (images, favicon)

Common Tasks

Add a Custom Font

// app/layout.tsx
import { YourFont } from 'next/font/google'
const yourFont = YourFont({ subsets: ['latin'] })

Add Environment Variables

1. Copy .env.example to .env.local
2. Add your variables
3. Use in code: process.env.NEXT_PUBLIC_YOUR_VAR

Deploy to Vercel

pnpm add -g vercel
vercel

Troubleshooting

Port 3000 already in use?

pnpm dev -- -p 3001

Dependencies issues?

rm -rf node_modules .next
pnpm install

Type errors?

pnpm type-check

Need Help?

• 📚 Full README
• 🔗 Next.js Docs
• 🎨 Tailwind Docs

---

Happy coding! 🌸