Next.js 15 Starter Kit

Un Starter Kit Next.js 15 production-ready, extras dintr-o aplicație reală. Include editor vizual Puck, autentificare Supabase, CMS complet și integrare AI Gemini.

✨ Caracteristici

🎨 Editor Vizual Puck

• Drag & Drop Page Builder - Construiește pagini vizual fără cod
• 50+ Componente - Layout, conținut, formulare, design liber
• Zones Nested - Componente cu zone editabile în interior
• AI Generation - Generează pagini cu Google Gemini AI
• Rich Text Editor - TipTap cu formatare avansată
• Media Picker - Integrare cu Supabase Storage

🔐 Autentificare & Securitate

• Supabase Auth - Autentificare SSR cu Next.js 15
• Roluri - ADMIN și EDITOR cu permisiuni diferite
• Demo Mode - Funcționează fără configurare (zero-config)

📝 CMS Complet

• Articole - Blog cu categorii, taguri, SEO
• Proiecte - Portofoliu de proiecte
• Pagini - Pagini dinamice cu Puck Editor
• Media Library - Gestionare fișiere încărcate
• Hero Slider - Carusel homepage editabil

🤖 Inteligență Artificială

• Google Gemini - Generare conținut cu fallback chain
• Text Processing - Formatare, corectură, expandare
• Page Generation - Generează pagini complete din prompt
• Multi-model - gemini-2.5-flash, gemini-2.0-flash, gemini-3-flash-preview

🛠️ Tehnologii

Categoria	Tehnologie
Framework	Next.js 15 (App Router)
UI	React 19.2, Tailwind CSS 4
Database	PostgreSQL + Drizzle ORM
Auth	Supabase Auth (SSR)
Storage	Supabase Storage
Editor	Puck Visual Editor
Rich Text	TipTap
AI	Google Gemini (generative-ai)
Forms	React Hook Form + Zod
Email	Nodemailer

📋 Cerințe

• Node.js 18+
• pnpm (recomandat) sau npm/yarn
• PostgreSQL (opțional - funcționează în demo mode)
• Cont Supabase (opțional)

🚀 Instalare

1. Clonează și instalează dependințele

git clone <repository-url>
cd starter-kit
pnpm install

2. Configurează variabilele de mediu

Copiază .env.example în .env.local:

cp .env.example .env.local

Editează .env.local cu valorile tale:

# Database (opțional - funcționează și fără)
DATABASE_URL="postgresql://postgres:password@localhost:5432/starter_kit"

# Supabase (opțional - funcționează și fără)
NEXT_PUBLIC_SUPABASE_URL="https://your-project.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="your-anon-key"
SUPABASE_SERVICE_ROLE_KEY="your-service-role-key"

# Google Gemini AI (opțional)
GOOGLE_AI_API_KEY="your-google-ai-api-key"

# SMTP Email (opțional)
SMTP_HOST="smtp.gmail.com"
SMTP_PORT=587
SMTP_USER="your-email@gmail.com"
SMTP_PASS="your-app-password"

# Site Metadata
NEXT_PUBLIC_SITE_URL="http://localhost:3000"
NEXT_PUBLIC_SITE_NAME="My Starter Kit"
NEXT_PUBLIC_SITE_TITLE="My Starter Kit"
NEXT_PUBLIC_SITE_DESCRIPTION="A Next.js 15 Starter Kit with Puck Editor, Supabase, and AI"
NEXT_PUBLIC_SITE_LOCALE="en_US"

3. Inițializează baza de date

Dacă ai configurat DATABASE_URL:

# Creare tabele (Drizzle)
npx drizzle-kit push

# Opțional: Deschide Drizzle Studio
npx drizzle-kit studio

4. Pornește serverul de dezvoltare

pnpm dev

Vizitează http://localhost:3000.

📦 Script-uri Disponibile

# Dezvoltare
pnpm dev          # Pornește serverul de dezvoltare

# Producție
pnpm build        # Build pentru producție
pnpm start        # Pornește serverul de producție

# Database
npx drizzle-kit push      # Push schema în DB
npx drizzle-kit generate  # Generează migrații
npx drizzle-kit studio    # Deschide Drizzle Studio

# Electron Desktop
pnpm electron:prep  # Pregătește build pentru Electron
pnpm dist:win       # Build Windows
pnpm dist:linux     # Build Linux

📁 Structură Proiect

src/
├── app/                      # Next.js App Router
│   ├── (public)/            # Rute publice
│   │   ├── [slug]/          # Pagini dinamice Puck
│   │   ├── articole/        # Blog
│   │   └── proiecte/        # Proiecte
│   ├── admin/               # Admin Dashboard
│   │   ├── editor/          # Puck Visual Editor
│   │   ├── articole/        # Management articole
│   │   ├── proiecte/        # Management proiecte
│   │   ├── media/           # Media Library
│   │   └── setari/          # Setări site
│   ├── api/                 # API Routes
│   │   ├── auth/            # Autentificare
│   │   ├── puck/            # AI Generation
│   │   ├── pages/           # Puck pages CRUD
│   │   ├── posts/           # CMS posts CRUD
│   │   └── media/           # Media upload
│   └── layout.tsx           # Root layout
├── components/              # Componente React
│   ├── admin/               # Admin components
│   ├── county-forms/        # Formulare specifice județe
│   └── ui/                  # Shadcn UI components
├── db/                      # Database
│   ├── schema.ts            # Drizzle schema
│   └── index.ts             # Database client (zero-config)
├── lib/                     # Utilitare
│   ├── auth.ts              # Auth helpers (demo mode)
│   ├── api-auth.ts          # API auth middleware
│   ├── gemini.ts            # Gemini AI client
│   ├── mailer.ts            # Email sending
│   ├── pdf-parser.ts        # PDF parsing
│   ├── puck/                # Puck config & components
│   │   ├── config.tsx       # Component registry
│   │   ├── components/      # 50+ Puck components
│   │   └── ai/              # AI prompts & parser
│   └── supabase/            # Supabase clients
└── middleware.ts            # Next.js middleware

🎯 Utilizare

Demo Mode (Zero-Config)

Aplicația funcționează fără nicio configurare:

• Pornește pnpm dev
• Vei avea acces automat ca admin demo
• Util pentru testare și dezvoltare UI

Autentificare Completă

1. Configurează Supabase în .env.local
2. Accesează /login și autentifică-te
3. Prima autentificare creează automat userul în DB cu rol ADMIN

Editor Vizual Puck

1. Navighează în /admin/editor
2. Alege o pagină existentă sau creează una nouă
3. Trage componente din sidebar în canvas
4. Editează proprietățile în panel-ul din dreapta
5. Salvează cu butonul "Publică"

Generare AI

1. În editorul Puck, apasă butonul "Generează cu AI"
2. Scrie un prompt (ex: "O pagină despre voluntariat")
3. Alege tipul paginii
4. AI-ul va genera structura paginii automat

CMS - Articole

1. Navighează în /admin/articole
2. Apasă "Articol Nou"
3. Completează titlu, conținut, categorii
4. Setează statusul pe "Publicat"
5. Articolul apare pe /articole/[slug]

🔒 Securitate

• Variabilele de mediu nu trebuie commitate
• .env.local este în .gitignore
• Supabase RLS activează Row Level Security pentru producție
• API Routes protejate cu requireApiAuth()
• Server Components protejate cu requireAuth()

🚀 Deploy

Vercel (Recomandat)

# Instalează Vercel CLI
npm i -g vercel

# Deploy
vercel

Setează variabilele de mediu în dashboard-ul Vercel.

Docker

FROM node:20-alpine
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN npm install -g pnpm && pnpm install
COPY . .
RUN pnpm build
EXPOSE 3000
CMD ["pnpm", "start"]

Electron Desktop

# Build pentru Windows
pnpm dist:win

# Build pentru Linux
pnpm dist:linux

🧪 Zero-Config Demo Mode

Aplicația include un Demo Mode care funcționează fără configurare:

• DB Proxy: src/db/index.ts returnează un proxy care simulează răspunsuri DB
• Mock Admin: src/lib/auth.ts returnează un user admin demo
• Graceful Degradation: API-urile funcționează cu date mock

Acesta este util pentru:

• Dezvoltare rapidă fără setup DB
• Testare UI/UX
• Demo-uri client

📚 Schema Bazei de Date

Tabel	Descriere
users	Utilizatori (ADMIN/EDITOR)
posts	Conținut CMS (articole, proiecte)
pages	Pagini Puck (JSONB)
media_files	Fișiere încărcate
site_settings	Setări site (key-value)
contact_messages	Mesaje contact
hero_slides	Slider homepage
activity_logs	Audit trail

🤝 Contribuții

1. Fork repository
2. Creează branch pentru feature (git checkout -b feature/AmazingFeature)
3. Commit (git commit -m 'Add AmazingFeature')
4. Push (git push origin feature/AmazingFeature)
5. Deschide Pull Request

📄 Licență

Acest proiect este licențiat sub MIT License.

🙏 Acknowledgments

• Puck Editor - Visual page builder for React
• Supabase - Backend as a Service
• Drizzle ORM - TypeScript ORM
• shadcn/ui - UI components
• Google Gemini - AI models

---

Pentru întrebări sau suport, deschide un issue pe GitHub.