---
title: "Organisation des dossiers et conventions de nommage"
description: "Comment organiser proprement ton code Remix et NestJS pour un projet évolutif et maintenable."
url: https://algomax.fr/formations/developpe-une-app-de-chat-temps-reel-avec-remix-et-nestjs/demarrage-du-projet-remix-and-nestjs-:-structure-et-outils/organisation-des-dossiers-et-conventions-de-nommage/02-structure-outils
dateModified: 2025-05-03T12:14:22.978Z
---

# Organisation des dossiers et conventions de nommage

Comment organiser proprement ton code Remix et NestJS pour un projet évolutif et maintenable.

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 :

```bash Project structure
.
├── backend           # NestJS API
└── frontend          # Remix app
```

### Arborescence détaillée

```bash Project structure
.
├── backend
│   ├── src
│   │   ├── auth
│   │   ├── chat
│   │   ├── user
│   │   ├── socket
│   │   ├── stripe
│   │   └── main.ts
│   ├── test
│   └── tsconfig.json
└── frontend
    ├── app
    │   ├── components
    │   ├── hooks
    │   ├── routes
    │   ├── styles
    │   └── utils
    ├── public
    ├── remix.config.js
    └── tsconfig.json
```

<Note title="Pourquoi cette séparation ?">
  Garde le <code>backend/src</code> pour ton API NestJS et le dossier <code>frontend/app</code> pour ton code Remix.  
  On isole la logique backend et frontend pour plus de clarté.
</Note>

---

## 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 :
  ```bash
  app/routes
  ├── index.tsx         # route "/"
  ├── login.tsx         # route "/login"
  └── chat.$chatId.tsx  # route dynamique "/chat/:chatId"
  ```
- **hooks** dans `app/hooks` : `useOptionalUser.ts` ou `useEnv.ts`  
- **utils** dans `app/utils` : `formatDate.ts`, `validateForm.ts`

```tsx app/hooks/useEnv.ts
import { useRouteLoaderData } from "@remix-run/react"
import { loader } from "~/root"

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

### 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.

```ts backend/src/chat/chat.module.ts
import { Module } from "@nestjs/common"
import { ChatService } from "./chat.service"
import { ChatController } from "./chat.controller"

@Module({
  controllers: [ChatController],
  providers: [ChatService],
})
export class ChatModule {}
```

<Warning title="Ne pas mélanger les DTOs et les Entities">
  Garde les `*.dto.ts` dans un dossier `dtos` ou à la racine du module.  
  Les entités Prisma (ou TypeORM) doivent rester dans `*.entity.ts`.
</Warning>

---

## Exemple de configuration initiale

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

```ts app/root.tsx
export const loader = async ({ request }: LoaderFunctionArgs) => {
  const user = await getOptionalUser({ request })
  const env = envSchema.parse({
    WEBSOCKET_URL: process.env.WEBSOCKET_URL
      ?? "ws://localhost:8001",
  })
  return json({ user, env })
}
```

### AppModule NestJS

```ts backend/src/app.module.ts
import { Module } from "@nestjs/common"
import { ConfigModule } from "@nestjs/config"
import { AuthModule } from "./auth/auth.module"
import { ChatModule } from "./chat/chat.module"
import { SocketModule } from "./socket/socket.module"
import { StripeModule } from "./stripe/stripe.module"
import { UserModule } from "./user/user.module"
import { AppGateway } from "./app.gateway"

@Module({
  imports: [
    ConfigModule.forRoot({ isGlobal: true }),
    UserModule,
    AuthModule,
    ChatModule,
    SocketModule,
    StripeModule,
  ],
  providers: [AppGateway],
})
export class AppModule {}
```

<Tip>
  Grâce à <a href="https://docs.nestjs.com/techniques/configuration">ConfigModule</a> tu rends
  tes variables d’environnement globales et typées.
</Tip>

---

## Bonnes pratiques

1. **Index files**  
   Résume les exports dans un `index.ts` pour simplifier les imports :
   ```ts backend/src/user/index.ts
   export * from "./user.controller"
   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](./02-structure-outils.md)  
Continue vers la suite pour installer tes dépendances et lancer ton dev server!