Système de stockage de fichiers cloud sécurisé - Projet académique SUPINFO
🌐 Application Live • 📚 Documentation • 📄 Guide PDF • 📊 Diagrammes
🌍 Vos fichiers toujours à portée de main : que vous soyez sur PC 💻 ou sur mobile 📱, SUPFile vous offre une expérience continue, sécurisée et intuitive, où que la vie vous mène.
Vue d'ensemble simplifiée de l'architecture SUPFile
- Vue d'ensemble
- Fonctionnalités
- Architecture
- Installation
- Déploiement
- Documentation
- Technologies
- Contributeurs
SUPFile est une application web moderne de stockage de fichiers cloud sécurisée, inspirée de Dropbox. Elle permet aux utilisateurs de stocker, organiser, partager et gérer leurs fichiers de manière sécurisée dans le cloud.
📄 Guide Visuel : Pour une explication détaillée de l'architecture et de la sécurité de SUPFile sous forme de dessins, consultez le Guide Dessin SUPFile.
Dashboard interactif avec statistiques et visualisations
- 🔐 Authentification multi-providers : JWT, OAuth2 (Google, GitHub, Microsoft)
- 📁 Gestion complète : Fichiers, dossiers, corbeille, recherche
- 🔗 Partage sécurisé : Liens publics avec expiration et mot de passe
- 📊 Dashboard interactif : Statistiques et visualisations
- 🌍 Multi-régions : Stockage Azure Blob Storage
- 📱 Responsive : Interface adaptative mobile/desktop
- 🎨 Thème clair/sombre : Personnalisation de l'interface
- ✅ Inscription/Connexion : Email et mot de passe avec validation
- ✅ OAuth2 : Connexion via Google, GitHub, Microsoft
- ✅ JWT Tokens : Access token + Refresh token sécurisés
- ✅ Sessions persistantes : Gestion automatique des tokens
- ✅ Sécurité : Hachage bcrypt (12 rounds), protection CSRF
Fonctionnement :
- L'utilisateur s'inscrit ou se connecte via OAuth
- Le backend génère des tokens JWT (access + refresh)
- Les tokens sont stockés dans le localStorage (frontend)
- Chaque requête API inclut le token dans le header
Authorization - Le backend valide le token et identifie l'utilisateur
- ✅ Upload : Drag & drop, barre de progression, validation
- ✅ Téléchargement : Téléchargement individuel ou en lot
- ✅ Prévisualisation : Images, PDF, texte directement dans le navigateur
- ✅ Recherche : Recherche par nom, type, contenu
- ✅ Renommage : Modification du nom de fichier
- ✅ Déplacement : Déplacement entre dossiers
- ✅ Métadonnées : Taille, date, type, région de stockage
Fonctionnement :
- Upload : Fichier → Validation (taille, extension) → Azure Blob Storage → Métadonnées PostgreSQL
- Téléchargement : Requête → Vérification permissions → Récupération Azure → Stream vers client
- Prévisualisation : Génération URL signée Azure → Affichage dans viewer
- Recherche : Requête SQL avec filtres → Retour liste filtrée
- ✅ Création : Dossiers imbriqués avec arborescence
- ✅ Navigation : Breadcrumbs, navigation intuitive
- ✅ Organisation : Déplacement, renommage, suppression
- ✅ Structure : Arborescence complète avec relations parent-enfant
Fonctionnement :
-
Création d'un dossier → Enregistrement dans PostgreSQL avec
parent_id -
Navigation → Filtrage des fichiers par
folder_id -
Breadcrumbs → Reconstruction du chemin depuis la racine
-
Déplacement → Mise à jour du
folder_iddes fichiers/dossiers enfants
- ✅ Soft Delete : Suppression réversible (marquage
deleted_at) - ✅ Restauration : Récupération des fichiers supprimés
- ✅ Suppression définitive : Suppression du fichier Azure + base de données
- ✅ Vue dédiée : Page corbeille avec filtres
Fonctionnement :
-
Suppression :
deleted_at= timestamp → Fichier masqué des listes normales -
Corbeille : Filtrage
WHERE deleted_at IS NOT NULL -
Restauration :
deleted_at= NULL → Fichier réapparaît -
Suppression définitive : Suppression Azure Blob + Suppression DB
- ✅ Liens publics : Génération de tokens uniques
- ✅ Expiration : Liens avec date d'expiration
- ✅ Protection : Mot de passe optionnel
- ✅ Accès anonyme : Téléchargement sans authentification
Fonctionnement :
-
Génération d'un token UUID unique
-
Création d'un
ShareLinkavec expiration et mot de passe (optionnel) -
URL publique :
/share/{token} -
Accès : Vérification token + expiration + mot de passe si requis
-
Téléchargement via URL signée Azure
- ✅ Statistiques : Nombre de fichiers, espace utilisé/disponible
- ✅ Graphiques : Visualisation de l'espace de stockage
- ✅ Fichiers récents : Liste des derniers fichiers modifiés
- ✅ Activité : Vue d'ensemble de l'activité utilisateur
Fonctionnement :
-
Agrégation SQL :
COUNT,SUM(file_size)par utilisateur -
Calcul du pourcentage :
(storage_used / storage_available) * 100 -
Fichiers récents :
ORDER BY updated_at DESC LIMIT 10 -
Affichage avec graphiques React (Chart.js)
- ✅ Commentaires : Commentaires sur fichiers et dossiers
- ✅ Historique : Historique des modifications de fichiers
- ✅ Versions : Gestion des versions de fichiers (en développement)
L'application utilise des ressources visuelles organisées dans le dossier frontend/public/ :
Images principales (racine de public/) :
logo.jpg: Logo principal SUPFile (utilisé dans login, sidebar, header)Fichier.jpg: Icône générique pour les fichiers (fallback pour tous les types)Espace de Stockage.jpg: Icône pour l'upload et le stockage
Dossier Images app/ (ressources spécifiques) :
Organisation :
- Les images principales sont à la racine de
public/pour un accès direct - Les ressources spécifiques sont dans
public/Images app/pour une meilleure organisation - Toutes les images sont servies statiquement via Vite et accessibles via
/nom-image.jpgou/Images app/nom-image.jpg
Architecture complète du système SUPFile
┌─────────────────────────────────────────────────────────┐
│ Frontend (Vercel) │
│ React + TypeScript + Vite │
│ Port: 3000 (dev) │
└───────────────────────┬─────────────────────────────────┘
│ HTTPS/REST API
│ JWT Authentication
┌───────────────────────▼─────────────────────────────────┐
│ Backend (Railway) │
│ FastAPI + Python 3.11 │
│ Port: 8000 (dev) │
└───────┬───────────────────────────────┬─────────────────┘
│ │
┌───────▼────────┐ ┌────────▼──────────┐
│ PostgreSQL │ │ Azure Blob │
│ (Railway) │ │ Storage │
│ Métadonnées │ │ Fichiers binaires │
└────────────────┘ └────────────────────┘
SUPFile/
├── Docs_Projet/ # Documentation du projet
│ ├── README.md # Documentation technique complète
│ ├── Guide Dessin SUPFile_Architecture_and_Security.pdf # Guide visuel
│ └── Images/ # Diagrammes d'architecture (PNG)
│ ├── 1-Architecture Globale.png
│ ├── 2-Flux d'Authentification - *.png
│ ├── 3-Flux OAuth2 Complet -*.png
│ ├── Flux d'Upload de Fichier.png
│ ├── Flux de Gestion de Dossiers - *.png
│ ├── Flux de Corbeille - *.png
│ ├── Flux de Partage.png
│ ├── Modèle de Données - *.png
│ └── ... # Autres schémas d'architecture
│
├── frontend/ # Application React
│ ├── src/
│ │ ├── components/ # Composants réutilisables
│ │ ├── pages/ # Pages de l'application
│ │ ├── services/ # Services API
│ │ ├── contexts/ # Contextes React (Auth, Theme)
│ │ ├── hooks/ # Hooks personnalisés
│ │ └── utils/ # Utilitaires
│ ├── public/ # Fichiers statiques + Service Worker
│ │ ├── Images app/ # Ressources visuelles de l'application
│ │ │ ├── Partagés.jpg # Icône fichiers partagés
│ │ │ ├── SUPINFO Paris Logo.png # Logo SUPINFO
│ │ │ └── ... # Autres icônes (notifications, paramètres, etc.)
│ │ ├── logo.jpg # Logo principal SUPFile
│ │ ├── Fichier.jpg # Icône fichier générique
│ │ ├── Espace de Stockage.jpg # Icône upload/storage
│ │ ├── sw.js # Service Worker (PWA)
│ │ └── manifest.json # Manifest PWA
│ └── package.json
│
├── backend/ # API FastAPI
│ ├── app/
│ │ ├── api/v1/ # Routes API version 1
│ │ │ ├── auth.py # Authentification JWT
│ │ │ ├── oauth.py # OAuth2 (Google, GitHub, Microsoft)
│ │ │ ├── files.py # Gestion fichiers
│ │ │ ├── folders.py # Gestion dossiers
│ │ │ ├── share.py # Partage de fichiers
│ │ │ ├── dashboard.py # Statistiques
│ │ │ └── ...
│ │ ├── core/ # Configuration
│ │ │ ├── config.py # Settings (Pydantic)
│ │ │ ├── database.py # SQLAlchemy
│ │ │ ├── security.py # JWT, bcrypt
│ │ │ └── middleware.py # CORS, auth
│ │ ├── models/ # Modèles SQLAlchemy
│ │ │ ├── user.py
│ │ │ ├── file.py
│ │ │ ├── folder.py
│ │ │ └── ...
│ │ └── services/ # Services métier
│ │ └── azure_blob.py # Azure Blob Storage
│ ├── alembic/ # Migrations base de données
│ └── requirements.txt
│
└── docker-compose.yml # Configuration Docker local
- Python 3.11+
- Node.js 18+
- Docker & Docker Compose (recommandé)
- PostgreSQL (ou via Docker)
- Compte Azure (pour Blob Storage)
# 1. Cloner le projet
git clone https://github.com/MEVENGUE/SUPFile......git
cd SUPFile......
# 2. Créer le fichier .env
cp .env.example .env
# Éditer .env avec vos configurations
# 3. Démarrer les services
docker-compose up -d
# 4. Initialiser la base de données
docker exec -it supfile-backend bash
alembic upgrade head
# 5. Accéder à l'application
# Frontend: http://localhost:3000
# Backend: http://localhost:8000
# API Docs: http://localhost:8000/docsVoir Documentation Technique pour les instructions détaillées.
- Connectez votre dépôt GitHub à Vercel
- Configurez le Root Directory :
frontend - Ajoutez les variables d'environnement :
VITE_API_URL=https://votre-backend.railway.app/api/v1
- Déployez !
- Créez un projet Railway
- Ajoutez PostgreSQL
- Déployez le backend depuis GitHub
- Configurez les variables d'environnement (voir Documentation Technique)
- Exécutez les migrations :
alembic upgrade head
📖 Guide complet : Documentation Technique
La documentation complète du projet se trouve dans le dossier Docs_Projet/ :
-
📖 README.md : Documentation technique complète expliquant le projet, l'architecture, les fonctionnalités, l'installation, le déploiement, l'API, la sécurité, et tous les diagrammes de flux détaillés
-
📄 Guide Dessin SUPFile : Guide visuel expliquant l'architecture et la sécurité de l'application SUPFile sous forme de dessins et schémas
- 📊 Diagrammes d'Architecture : Tous les diagrammes d'architecture et de flux (PNG) disponibles à la racine du projet
- 🔧 Configuration OAuth : Guide de configuration OAuth2 pour Google, GitHub, Microsoft
💡 Note : Pour une documentation technique complète avec tous les diagrammes détaillés, consultez le README de documentation et le Guide Dessin SUPFile.
Le dossier Images/ contient les schémas visuels (PNG) des diagrammes d'architecture du projet. Ces images illustrent les différents flux et processus de l'application.
Vue d'ensemble du système avec tous les composants (Frontend, Backend, Base de données, Stockage cloud, OAuth providers).
Inscription : Processus complet d'inscription d'un nouvel utilisateur.
Authentification JWT : Processus de connexion et génération de tokens JWT.
Flux complet pour les trois providers OAuth2 (Google, GitHub, Microsoft) avec gestion des tokens temporaires.
Séquence OAuth2 Détaillée - Google : Séquence détaillée du flux OAuth2 pour Google.
Processus complet de téléchargement de fichiers : validation, upload vers Azure Blob Storage, enregistrement des métadonnées.
Validation de Fichier : Processus de validation des fichiers avant upload.
Création et Navigation : Processus de création de dossiers et navigation dans l'arborescence.
Breadcrumbs : Système de navigation avec fil d'Ariane.
États d'un Fichier : Cycle de vie d'un fichier (actif, supprimé, restauré, supprimé définitivement).
Soft Delete et Restauration : Processus de suppression réversible et restauration.
Processus de partage de fichiers avec génération de liens publics, expiration et protection par mot de passe.
Modèle de Partage : Modèle de données pour le système de partage.
Architecture multi-niveaux du stockage (PostgreSQL pour métadonnées, Azure Blob Storage pour fichiers binaires).
Schéma Entité-Relation (ERD) : Modèle complet de la base de données avec toutes les relations.
Protection contre les Codes Dupliqués : Mécanisme de protection contre la réutilisation de codes OAuth2.
- React 18.2.0 - Bibliothèque UI
- TypeScript 5.3.3 - Typage statique
- Vite 5.0.8 - Build tool ultra-rapide
- React Router 6.20.0 - Navigation
- React Query 5.12.2 - Gestion d'état serveur
- Axios 1.6.2 - Requêtes HTTP
- React Dropzone 14.2.3 - Upload drag & drop
- React Toastify 9.1.3 - Notifications
- FastAPI 0.104.1 - Framework Python moderne
- Python 3.11 - Langage de programmation
- SQLAlchemy 2.0.23 - ORM
- Alembic 1.12.1 - Migrations
- PostgreSQL 15 - Base de données
- Azure Blob Storage 12.19.0 - Stockage fichiers
- Python-JOSE 3.3.0 - JWT
- Passlib + Bcrypt - Hachage mots de passe
- Pydantic 2.5.0 - Validation
- Docker & Docker Compose - Containerisation
- Vercel - Hébergement frontend
- Railway - Hébergement backend
- Azure Blob Storage - Stockage cloud
- MEVENGUE Franck - Développeur principal
- Nadia Loukdache - Co-développeuse
Projet académique SUPINFO - Tous droits réservés
Fait avec ❤️ par l'équipe SUPFile
🌐 Application Live • 📚 Documentation • 📄 Guide PDF • 📊 Diagrammes