Présentation de la stack et de l’architecture fullstack

Vue d’ensemble de Remix, NestJS, Prisma, Socket.io, Stripe, AWS S3 et Tailwind. Pourquoi ce choix ?

5 min read

Contexte et objectifs

Dans ce premier chapitre, on présente la stack et l’architecture fullstack de notre chat temps réel.
Tu vas comprendre comment Remix gère le frontend, comment NestJS structure le backend, et comment tous les services (Socket.io, Prisma, AWS S3, Stripe) s’imbriquent.

Cette leçon sert de carte routière :

  • Te donner une vue d’ensemble des technologies
  • Détailler la structure du monorepo
  • Lister les outils et configurations clés

Prêt à embarquer ?

1 Vue d’ensemble de la stack

Voici les briques que tu vas utiliser :

  • Remix – routing, loaders, actions, SSR
  • NestJS – architecture modulaire, controllers, services
  • Socket.io – communication bidirectionnelle
  • Prisma – ORM type-safe
  • AWS S3 – stockage des avatars
  • Stripe – paiement / dons
  • Tailwind CSS – stylisation utilitaire
  • Zod – validation de schémas
  • Code Hike 1.0.5 – mise en avant de tes extraits de code

2 Architecture fullstack

2.1 Frontend avec Remix

Remix gère :

  • Le routing via app/routes/
  • Les data loaders (chargement côté serveur)
  • Les actions (mutations, formulaires)
  • Le SSR pour SEO et perf

Structure typique :

Monorepo
1
frontend/

2
├── app/

3
│   ├── components/

4
│   ├── hooks/

5
│   ├── routes/

6
│   │   ├── login.tsx

7
│   │   ├── chat.tsx

8
│   │   └── api.messages.ts

9
│   └── utils/

10
└── remix.config.js

2.2 Backend avec NestJS

NestJS s’appuie sur des modules pour séparer les domaines :

Monorepo
1
backend/

2
├── src/

3
│   ├── auth/        # module Auth (JWT, Passport)

4
│   ├── chat/        # Gateway Socket.io + services

5
│   ├── prisma/      # PrismaModule + service

6
│   ├── s3/          # S3Module + service

7
│   ├── payments/    # StripeModule + Webhooks

8
│   └── main.ts

9
└── nest-cli.json

Chaque module regroupe :

  • un controller (HTTP)
  • un service (logique métier)
  • des providers (injectables)

2.3 Communication temps réel

On utilise un Gateway Socket.io :

backend/src/chat/chat.gateway.ts
1
import {

2
  SubscribeMessage,

3
  WebSocketGateway,

4
  WebSocketServer,

5
} from '@nestjs/websockets' // ^? décorateurs WebSocket

6
// @callout: WebSocketGateway initialise le serveur Socket.io

7
@WebSocketGateway({ cors: { origin: '*' } })

8
export class ChatGateway {

9
  @WebSocketServer()

10
  server; // ^? instance Socket.io

11


12
  @SubscribeMessage('message')

13
  handleMessage(client, payload) {

14
    this.server.emit('message', payload)

15
  }

16
}

2.4 Base de données avec Prisma

Prisma simplifie la gestion de la base :

prisma/schema.prisma
1
datasource db { provider = "postgresql" url = env("DATABASE_URL") }

2
generator client { provider = "prisma-client-js" }

3


4
model User {

5
  id        String   @id @default(cuid())

6
  email     String   @unique

7
  password  String

8
  avatarUrl String?

9
  chats     Chat[]   @relation("user_chats")

10
}

Le PrismaModule exporte un PrismaService injectable partout.

2.5 Stockage d’avatars sur AWS S3

Le module S3 encapsule le SDK AWS :

backend/src/s3/s3.service.ts
1
import { Injectable } from '@nestjs/common'

2
import { S3 } from 'aws-sdk' // ^? client S3

3
@Injectable()

4
export class S3Service {

5
  private s3 = new S3()

6
  async upload(file: Express.Multer.File) {

7
    // @callout: génère une URL signée pour sécuriser l’upload

8
    return this.s3.upload({ Bucket: 'chat-avatars', Key: file.originalname, Body: file.buffer }).promise()

9
  }

10
}

2.6 Paiements avec Stripe

Le module Payments crée des sessions Stripe et gère les webhooks :

backend/src/payments/payments.service.ts
1
import Stripe from 'stripe' // ^? SDK Stripe

2
export class PaymentsService {

3
  private stripe = new Stripe(process.env.STRIPE_KEY, { apiVersion: '2022-11-15' })

4
  createCheckout(userId: string) { /* ... */ }

5
}

3 Structure du projet

Monorepo
1
.

2
├── backend/

3
│   ├── src/

4
│   ├── package.json

5
│   └── tsconfig.json

6
├── frontend/

7
│   ├── app/

8
│   ├── remix.config.js

9
│   ├── package.json

10
│   └── tsconfig.json

11
├── prisma/

12
│   ├── schema.prisma

13
│   └── migrations/

14
└── docker-compose.yml
  • docker-compose.yml orchestre Postgres et Redis (pour Socket.io Adapter).
  • Chaque dossier a son propre tsconfig.json et ses scripts npm.

4 Outils et configurations clés

4.1 Environnement et variables

Crée un .env à la racine :

Terminal
1
DATABASE_URL=postgresql://user:pass@localhost:5432/chat

2
JWT_SECRET=tonSuperSecretJWT

3
AWS_ACCESS_KEY_ID=...

4
AWS_SECRET_ACCESS_KEY=...

5
STRIPE_KEY=...

4.2 Scripts de démarrage

install.sh
1
# installer frontend et backend

2
cd frontend && npm install

3
cd ../backend && npm install
dev.sh
1
docker-compose up -d

2
cd backend && npm run start:dev

3
cd frontend && npm run dev

4.3 Lint, format, tests

Chaque workspace dispose de ses règles ESLint/Prettier. On peut partager une config racine via eslint --ext .ts,.tsx ..

Exercices rapides

  1. Dessine ton architecture
    Sur un schéma, dessine les communications entre Remix, NestJS, Prisma, Socket.io et AWS S3.

  2. Crée un module NestJS
    Initialise un module Notifications avec son service et son controller.

  3. Loader Remix
    Dans app/routes/chat.tsx, écris un loader qui appelle /api/messages et retourne la liste de messages pour l’affichage.

Bonne pratique ! Tu as maintenant une vision claire de ton projet fullstack. On passe à la mise en place concrète dans la prochaine leçon.

Dans cette leçon