README TEMPORAIRE

VitruveCloud

Tisma :

---

Solution cloud pour la gestion de fichiers, abonnements et facturation.

---

Sommaire

• Présentation
• Architecture générale
  • Diagramme d'architecture (Mermaid)
  • Diagramme des routes principales
• Structure du projet
• Emplacements pour images
• Installation
  • Prérequis
  • Backend
  • Frontend
• Exécution
  • Variables d'environnement et sécurité

---

Présentation

VitruveCloud (VCloud) est une solution cloud de type "Google Drive" destinée à stocker et partager des fichiers utilisateurs, gérer des abonnements, générer des factures et conserver des logs d'activité. Le frontend est développé en React et le backend en Node.js avec Express. La base de données et les modèles sont organisés dans backend/database/models.

Contexte académique / objectif

Ce projet a été réalisé comme projet de fin d'année 2024 pour le Bachelor Développeur FullStack & DevOps. L'objectif est de démontrer la maîtrise des compétences suivantes : conception d'API REST sécurisées, gestion de fichiers et stockage cloud, intégration frontend React, gestion d'abonnements et pipelines de déploiement (CI/CD / Docker / orchestration possible).

---

Architecture générale

Le projet est composé de deux parties principales :

• backend/ : serveur Express, routes, contrôleurs, modèles et middleware.
• front/ : application React (Vite ou Create React App selon configuration), composants et pages.

Diagramme d'architecture (Mermaid)

flowchart LR
	subgraph Client
		A[React App] -->|API calls| B[Backend API]
	end
	subgraph Server
		B --> C[Controllers]
		C --> D[Models]
		D --> E[(Database)]
	end
	B --> F[Middleware Auth]
	C --> G[Storage Files]
	C --> H[Mail / Notifications]

Loading

Diagramme des routes principales

graph TD
	subgraph Routes
		U["/api/users"] --> UC[controllerUser]
		Cc["/api/companies"] --> CCo[controllerCompany]
		S["/api/subscriptions"] --> SC[controllerSubscription]
		F["/api/files"] --> FC[controllerFile]
		I["/api/invoices"] --> IC[controllerInvoice]
	end

Loading

Structure du projet

Arborescence principale (extraits) :

• backend/

  • server.js # point d'entrée Express
  • package.json
  • controllers/ # logique métier par entité
  • routes/ # définition des routes API
  • database/ # connexion et modèles
  • middleware/ # authentification et validation

• front/

  • package.json
  • src/
    • Components/ # composants réutilisables
    • Pages/ # pages de l'application

Installation

Remarque : ces instructions supposent que vous êtes sur Windows avec PowerShell (versions récentes de Node.js recommandées).

Prérequis

• Node.js (>= 14) et npm ou yarn
• Git

Backend

1. Ouvrez un terminal à la racine du projet et installez les dépendances du backend :

cd backend
npm install

2. Configuration :

• Vérifiez backend/config/config.json pour les variables d'environnement locales (port, DB, etc.).

3. Démarrer le serveur :

cd backend
npm start

Frontend

1. Ouvrez un second terminal et installez les dépendances du frontend :

cd front
npm i

2. Démarrer l'application React :

cd front
npm start

3. L'application sera typiquement disponible sur http://localhost:3000 (ou le port configuré).

Exécution

• Backend : http://localhost:PORT/api/... (voir backend/server.js pour le port par défaut).
• Frontend : http://localhost:3000.

Variables d'environnement et sécurité

• Utilisez des variables d'environnement pour les secrets (JWT_SECRET, DB_URL, SMTP credentials). Ne commitez jamais de secrets.
• Vous pouvez utiliser un fichier .env à la racine de backend/ et front/ le charger via dotenv.

Variables d'environnement — Backend

Voici les variables couramment utilisées côté backend et leur rôle :

• XXX : XXXX (ex: XXXX)

XXX

Variables d'environnement — Frontend

Le frontend React peut utiliser des variables d'environnement préfixées (ex: REACT_APP_ pour Create React App) :

• XXX : XXXX (ex: XXXX)

XXX