Organisation des dossiers et conventions de nommage

Dans cette première étape, on va poser les bases de ton projet fullstack en structurant clairement les répertoires et en adoptant des conventions de nommage cohérentes. Cela t’évitera de te perdre en grandissant, facilitera la collaboration et la maintenabilité.

Structure racine du projet

On part sur une mono-repo simple avec deux répertoires principaux :

1
.
2
├── backend           # NestJS API
3
└── frontend          # Remix app

Arborescence détaillée

1
.
2
├── backend
3
│   ├── src
4
│   │   ├── auth
5
│   │   ├── chat
6
│   │   ├── user
7
│   │   ├── socket
8
│   │   ├── stripe
9
│   │   └── main.ts
10
│   ├── test
11
│   └── tsconfig.json
12
└── frontend
13
    ├── app
14
    │   ├── components
15
    │   ├── hooks
16
    │   ├── routes
17
    │   ├── styles
18
    │   └── utils
19
    ├── public
20
    ├── remix.config.js
21
    └── tsconfig.json

Conventions de nommage

1. Fichiers et dossiers

• kebab-case pour les répertoires et fichiers JavaScript/TypeScript :
  • user-profile.ts, chat.service.ts
• PascalCase pour les composants React :
  • MessageList.tsx, AvatarUploader.tsx
• camelCase pour les fonctions et hooks :
  • useEnv.ts, formatDate.ts

2. Remix (frontend)

• routes sous app/routes en kebab-case correspondant aux URLs :
  1
  app/routes
  2
  ├── index.tsx         # route "/"
  3
  ├── login.tsx         # route "/login"
  4
  └── chat.$chatId.tsx  # route dynamique "/chat/:chatId"

• hooks dans app/hooks : useOptionalUser.ts ou useEnv.ts
• utils dans app/utils : formatDate.ts, validateForm.ts

1
import { useRouteLoaderData } from "@remix-run/react"
2
import { loader } from "~/root"
3

4
export const useEnv = () => {
5
  const data = useRouteLoaderData<typeof loader>("root")
6
  if (!data?.env) {
7
    throw new Error("L'objet ENV n'existe pas")
8
  }
9
  return data.env
10
}

3. NestJS (backend)

• Modules, contrôleurs et services en PascalCase avec suffixes :
  • AuthModule, UserController, ChatService
• DTOs en *.dto.ts, Entities en *.entity.ts
• Guards, Interceptors et Pipes sous auth, socket, etc.

1
import { Module } from "@nestjs/common"
2
import { ChatService } from "./chat.service"
3
import { ChatController } from "./chat.controller"
4

5
@Module({
6
  controllers: [ChatController],
7
  providers: [ChatService],
8
})
9
export class ChatModule {}

Exemple de configuration initiale

loader Remix pour récupérer l’utilisateur et les variables d’env

1
export const loader = async ({ request }: LoaderFunctionArgs) => {
2
  const user = await getOptionalUser({ request })
3
  const env = envSchema.parse({
4
    WEBSOCKET_URL: process.env.WEBSOCKET_URL
5
      ?? "ws://localhost:8001",
6
  })
7
  return json({ user, env })
8
}

AppModule NestJS

1
import { Module } from "@nestjs/common"
2
import { ConfigModule } from "@nestjs/config"
3
import { AuthModule } from "./auth/auth.module"
4
import { ChatModule } from "./chat/chat.module"
5
import { SocketModule } from "./socket/socket.module"
6
import { StripeModule } from "./stripe/stripe.module"
7
import { UserModule } from "./user/user.module"
8
import { AppGateway } from "./app.gateway"
9

10
@Module({
11
  imports: [
12
    ConfigModule.forRoot({ isGlobal: true }),
13
    UserModule,
14
    AuthModule,
15
    ChatModule,
16
    SocketModule,
17
    StripeModule,
18
  ],
19
  providers: [AppGateway],
20
})
21
export class AppModule {}

Bonnes pratiques

1. Index files
   Résume les exports dans un index.ts pour simplifier les imports :
   backend/src/user/index.ts

   1
   export * from "./user.controller"
   2
   export * from "./user.service"

2. Séparer code public/privé
   Frontend : public/ pour les assets.
   Backend : répertoire test/ pour les specs.
3. Types partagés
   Si tu veux partager des types entre frontend et backend, crée un dossier shared à la racine.

Exercices rapides

1. Créer la structure
   Reproduis l’arborescence du projet avec mkdir et touch.
   Vérifie que chaque dossier et fichier suit le casing correct.
2. Renommage
   Tu as un fichier ChatService.ts. Renomme-le selon la convention et mets-le dans le bon dossier.
3. Index export
   Dans backend/src/auth, crée un index.ts qui réexporte le module, le controller et le service.

Back to Démarrage du projet Remix & NestJS : structure et outils
Continue vers la suite pour installer tes dépendances et lancer ton dev server!