Chatnoir

Projet Next.js avec Shadcn/ui, Neon PostgreSQL et Drizzle ORM.

Stack technique

• Next.js 14+ - Framework React avec App Router
• TypeScript - Typage statique
• Shadcn/ui - Composants UI
• Tailwind CSS - Styling
• Neon - PostgreSQL serverless
• Drizzle ORM - ORM TypeScript

Prérequis

• Node.js 18+
• npm ou yarn
• Compte Neon (pour la base de données)

Installation

1. Cloner le projet et installer les dépendances :

npm install

2. Configurer les variables d'environnement :

cp .env.local.example .env.local

Puis éditez .env.local et ajoutez votre URL de connexion Neon :

DATABASE_URL=postgresql://user:password@host/database?sslmode=require

3. Générer et exécuter les migrations :

npm run db:generate
npm run db:migrate

Scripts disponibles

• npm run dev - Démarrer le serveur de développement
• npm run build - Build de production
• npm run start - Démarrer le serveur de production
• npm run lint - Linter le code
• npm run db:generate - Générer les migrations Drizzle
• npm run db:migrate - Exécuter les migrations
• npm run db:studio - Ouvrir Drizzle Studio

Structure du projet

chatnoir/
├── app/                    # App Router (Next.js 14+)
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css
├── components/             # Composants React
│   └── ui/                # Composants Shadcn/ui
├── lib/                   # Utilitaires et configuration
│   ├── db/               # Configuration Drizzle
│   │   ├── index.ts      # Instance Drizzle
│   │   └── schema.ts     # Schémas de base de données
│   └── utils.ts          # Utilitaires (cn pour Shadcn)
├── public/                # Assets statiques
└── drizzle/               # Migrations générées

Utilisation de Shadcn/ui

Pour ajouter un composant Shadcn/ui :

npx shadcn-ui@latest add [component-name]

Par exemple :

npx shadcn-ui@latest add button
npx shadcn-ui@latest add card

Base de données

Le projet utilise Drizzle ORM avec Neon PostgreSQL. Les schémas sont définis dans lib/db/schema.ts.

Pour créer une nouvelle table, modifiez lib/db/schema.ts, puis :

npm run db:generate
npm run db:migrate

Développement

Le serveur de développement démarre sur http://localhost:3000.

Licence

MIT