Boardflow

Application de gestion de projet inspirée de Trello. Organisez votre travail en tableaux, listes et cartes, collaborez au sein d'organisations et suivez l'activité de votre équipe en temps réel.

Fonctionnalités

• Tableaux Kanban — créez des boards avec des fonds personnalisés (Unsplash), des listes et des cartes
• Drag & drop — réorganisez listes et cartes par glisser-déposer
• Organisations — espaces de travail multi-utilisateurs via Clerk
• Journal d'activité — historique des actions (création, modification, suppression)
• Abonnement Pro — 5 tableaux gratuits par organisation, illimité avec Stripe

Stack technique

Couche	Technologie
Framework	Next.js 14 (App Router)
Langage	TypeScript
Base de données	PostgreSQL + Prisma
Authentification	Clerk
Paiements	Stripe
UI	Tailwind CSS, Radix UI, Lucide
Drag & drop	@hello-pangea/dnd
État serveur	TanStack Query, Zustand
Images	Unsplash API

Prérequis

• Node.js 18+
• Compte Clerk (auth + organisations activées)
• Base PostgreSQL (Neon, Supabase, etc.)
• Compte Stripe (mode test suffit pour le dev)
• Clé API Unsplash

Installation

git clone <url-du-repo>
cd clone-trello
npm install

Copiez les variables d'environnement :

cp .env.example .env

Renseignez les valeurs dans .env, puis initialisez la base :

npx prisma db push
npm run dev

L'application est disponible sur http://localhost:3000.

Variables d'environnement

Variable	Description
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY	Clé publique Clerk
CLERK_SECRET_KEY	Clé secrète Clerk
NEXT_PUBLIC_CLERK_SIGN_IN_URL	Route de connexion (/sign-in)
NEXT_PUBLIC_CLERK_SIGN_UP_URL	Route d'inscription (/sign-up)
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL	Redirection après connexion
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL	Redirection après inscription
DATABASE_URL	URL de connexion PostgreSQL
NEXT_PUBLIC_UNSPLASH_ACCESS_KEY	Clé API Unsplash
STRIPE_API_KEY	Clé secrète Stripe
STRIPE_WEBHOOK_SECRET	Secret du webhook Stripe
NEXT_PUBLIC_APP_URL	URL publique de l'app (http://localhost:3000 en dev)

Webhook Stripe (local)

Pour tester les abonnements en développement :

stripe listen --forward-to localhost:3000/api/webhook

Copiez le secret affiché (whsec_...) dans STRIPE_WEBHOOK_SECRET.

Scripts

npm run dev      # Serveur de développement
npm run build    # Build de production
npm run start    # Serveur de production
npm run lint     # ESLint

Structure du projet

app/
├── (marketing)/          # Landing page publique
├── (platform)/
│   ├── (clerk)/          # Connexion / inscription
│   └── (dashboard)/      # Tableaux, org, facturation
actions/                  # Server actions (CRUD boards/lists/cards)
components/               # Composants UI et modales
lib/                      # DB, Stripe, utilitaires
prisma/                   # Schéma et migrations
config/                   # Configuration du site

Modèle de données

• Board — tableau avec image de fond et listes associées
• List — colonne ordonnée au sein d'un board
• Card — tâche avec titre et description optionnelle
• AuditLog — trace des actions par organisation
• OrgLimit — compteur de boards (plan gratuit)
• OrgSubscription — abonnement Stripe par organisation

Licence

Projet à des fins d'apprentissage.