---
description: Initialize a new blog project with Next.js, Tailwind, Shadcn, Neon, and full SEO setup
---

# Start Blog Project Workflow

This workflow initializes a complete blog project with all necessary configurations for SEO-optimized static site generation.

## Prerequisites
- Node.js 18+
- Neon database account
- Cloudinary account (optional)

## Steps

// turbo-all

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

### 2. Install Dependencies
```bash
npm install drizzle-orm @neondatabase/serverless
npm install -D drizzle-kit
npm install cloudinary next-cloudinary
npm install zod date-fns
```

### 3. Initialize Shadcn/ui
```bash
npx shadcn@latest init
npx shadcn@latest add button card input label textarea select badge skeleton
```

### 4. Create Project Structure
Review `STARTER_BLOG_PROJECT.md` Section 3 for the complete folder structure.

Create directories:
```bash
mkdir -p lib shared migrations components/ui components/layout components/blog components/seo
```

### 5. Configure Environment Variables
Create `.env.local` with variables from `STARTER_BLOG_PROJECT.md` Section 4.

### 6. Set Up Database
Copy files from `STARTER_BLOG_PROJECT.md` Section 5:
- `lib/db.ts`
- `shared/schema.ts`
- `drizzle.config.ts`
- `migrations/001_create_articles.sql`

Run migration in Neon SQL Editor.

### 7. Create Content Sync API
Copy `app/api/sync-articles/route.ts` from `API_DATABASE_INTEGRATION_DOCS.md`.

### 8. Implement SEO
Copy from `STARTER_BLOG_PROJECT.md` Section 8:
- `app/sitemap.ts`
- `app/robots.ts`
- `components/seo/json-ld.tsx`

### 9. Create Core Pages
Implement pages from `STARTER_BLOG_PROJECT.md` Section 7:
- Homepage
- Blog listing
- Single article [slug]

### 10. Apply Styling
Reference `UI_UX_DESIGN_SYSTEM.md` for:
- Color tokens
- Typography
- Component patterns

### 11. Test Build
```bash
npm run build
npm run start
```

### 12. Deploy to Vercel
```bash
vercel
```

Follow deployment checklist in `STARTER_BLOG_PROJECT.md` Section 10.

## Reference Documentation
- `STARTER_BLOG_PROJECT.md` - Complete setup guide
- `API_DATABASE_INTEGRATION_DOCS.md` - Content sync API
- `UI_UX_DESIGN_SYSTEM.md` - Design tokens and patterns
- `NEXTJS-SEO-AUDIT-CHECKLIST.md` - SEO implementation
