Détox
Le réseau social qui récompense chaque geste. On gagne des points en scrollant, en partageant et en réagissant, puis on les dépense dans L'Épicerie et dans des compétences de Clairvoyance. Les achats se font uniquement en points Détox : aucun paiement en argent réel.
Détox réunit fil, stories, reels, messages, recherche et profil, et fait de chaque geste une récompense : des points à dépenser dans une boutique d'objets exclusifs et dans des compétences pour suivre l'activité de ses amis.
- Proposition de valeur : récompenses variables, séries de connexion, combos et scroll infini, pour que chaque session compte.
- Cible : les étudiants et les jeunes actifs, très présents sur les réseaux sociaux.
- Bilan : la page Bilan rend visible le temps passé et la Sérénité, pour garder la main sur son usage.
Stack
- App : Next.js 16 (App Router), React, TypeScript ; l'API vit dans
app/api/
- Médias : UploadThing via
files-sdk (route /api/files)
- Base : MongoDB Atlas + Prisma 6 (
prisma/schema.prisma, lib/db/) ; MongoDB en Docker pour le dev et les tests (compose.yaml)
- Sécurité : scrypt, JWT signé (
JWT_SECRET en variable d'environnement), middleware Bearer
- Qualité : ESLint, Vitest ; description OpenAPI sur
/api/openapi, Swagger UI sur /api/docs
- Commits : Conventional Commits (
feat:, fix:, test:…), vérifiés par commitlint (hook commit-msg + CI)
- Lancement : une seule app Next.js, déployée sur Vercel ; en local, voir ci-dessous
Front
| Couche | Outil |
|---|
| Framework | Next.js 16.4 (App Router, Turbopack), React 19.3, TypeScript 5.9 |
| Rendu | cacheComponents et partialPrefetching activés (next.config.ts) : les données d'exécution (params, usePathname) sont lues dans un <Suspense> |
| Style | Tailwind CSS 4 ; couleurs du thème dans @theme et classes réutilisables (btn-sun, card, pill, input) en @utility, dans app/globals.css |
| Polices | next/font/google : Inter (texte), Space Grotesk (titres), Press Start 2P (compteur de points) |
| Icônes et visuels | SVG maison (components/icons.tsx, components/artwork.tsx), sans bibliothèque |
| Appels à l'API | lib/api-client.ts : fetch avec le JWT en Authorization: Bearer, erreurs {"error":{"code","message"}} converties en ApiClientError, déconnexion sur 401 |
| Cache | SWR : la clé est le chemin de l'API (mutate("/api/me") rafraîchit le solde partout) ; refreshInterval pour le polling des messages |
| État | useState et SWR, sans store global ; mises à jour optimistes avec retour arrière en cas d'erreur (Bonne dose) |
| Session | NextAuth v5 (SessionProvider, useSession) ; proxy.ts protège les pages, AppShell gère la session qui expire en cours d'usage |
| Médias | files-sdk/client pour l'envoi vers UploadThing ; affichage en <img> et <video autoPlay muted loop playsInline> |
| Accessibilité | libellés visibles sur les champs, aria-label sur les boutons à icône, onglets en role="tab", focus visible, animations coupées avec prefers-reduced-motion |
Organisation :
app/
(auth)/ connexion, inscription (sans barre de navigation)
(app)/ écrans connectés, avec AppShell et la barre du bas
page.tsx accueil : Instants, coffre, Mon cercle et Flow infini
reels/ reels plein écran
messages/[id]/ conversation (polling)
recherche/ comptes et mosaïque d'exploration
p/[id]/ détail d'un post
u/[username]/ profil public
profil/ mon profil
publier/ envoi d'une photo ou d'un reel
epicerie/ objets, clairvoyance/, jeux/ (ticket à gratter), commandes/
bilan/ temps passé, Sérénité, points
components/ AppShell, BottomNav, TopBar, PostCard, Instants, ProfileView, Dialog…
lib/api-client.ts accès à l'API depuis le front
Pourquoi Vitest plutôt que Jest
- Compatibilité ESM :
files-sdk (entre autres) est publié uniquement en ESM. Jest fonctionne mal avec l'ESM, Vitest le gère nativement.
- TypeScript sans configuration : pas de Babel,
ts-jest ni ts-node, et aucun fichier de config.
- Même API que Jest :
describe, it, expect et les mêmes matchers, donc rien à réapprendre. Les tests de routes appellent directement les handlers exportés par route.ts, sans serveur HTTP.
Lancer le projet
Prérequis : Node.js 22 et pnpm 10.
pnpm install
cp .env.example .env # puis renseigner les variables ci-dessous
docker compose up -d --wait # MongoDB local (replica set), ou une base Atlas dans MONGODB_URI
pnpm db:indexes
pnpm db:seed
pnpm dev
Variables d'environnement
| Variable | Rôle |
|---|
MONGODB_URI | Base MongoDB (Atlas, ou mongodb://localhost:27017/detox?directConnection=true avec Docker) |
JWT_SECRET | Secret du JWT de l'API (obligatoire en production) |
AUTH_SECRET | Secret des sessions NextAuth, openssl rand -base64 32 (obligatoire en production) |
AUTH_TRUST_HOST | true hors Vercel, sinon NextAuth répond UntrustedHost |
SEED_ADMIN_PASSWORD, SEED_USER_PASSWORD | Mots de passe de [email protected] et [email protected] créés par db:seed (aléatoires et affichés une fois si absents) |
UPLOADTHING_TOKEN | Clé d'API UploadThing (dashboard UploadThing → API Keys) |
FILES_API_SECRET | Secret qui signe les envois de fichiers (openssl rand -hex 32) |
Le build passe sans les variables UploadThing. En production, /api/files renvoie une erreur 500 tant que FILES_API_SECRET manque : sans lui, chaque instance signerait les envois avec son propre secret et les envois échoueraient au hasard.
Scripts
This is the beginning of the README. Read the rest at the original. Read the full README ↗
