Islam Derrouiche

Le lien de l'application: [URL MASQUÉE]

Cette application est mon projet personnel. Elle a pour objectif de permettre aux visiteurs de mieux me connaître à travers une page de profil, de découvrir mes réalisations via la page des projets, et de me contacter facilement.
Il s’agit à la fois de mon projet personnel et de mon tout premier projet React abouti. L’application intègre également un backend permettant la gestion dynamique des pages Profil et Projets, ainsi qu’une fonctionnalité d’envoi de mails via le formulaire de contact.
Ce projet marque une étape importante dans mon apprentissage de React et du développement full stack.

Frontend:

Le frontend a été développé avec React en utilisant Vite.js pour le bundling et les performances.
J’ai mis en place une architecture basée sur :
• L’utilisation des states et des hooks React
• Des composants réutilisables (formulaires, boutons, composants UI)
• Une première implémentation des opérations CRUD côté frontend, avant l’adaptation du backend
Pour le design et le style, j’ai utilisé :
• CSS
• Principalement Tailwind CSS, ce qui m’a permis d’accélérer le développement du design et de gérer efficacement le responsive design de l’application.
________________________________________
Backend:

Le backend a été développé avec FastAPI (Python), choisi pour sa légèreté et ses performances dans la création d’API REST.
Ce projet m’a permis de découvrir et d’utiliser FastAPI dans un cas concret, en parallèle de mon apprentissage de React.
• Base de données : PostgreSQL
• ORM : SQLAlchemy, utilisé pour simplifier la manipulation et la gestion des données
• Implémentation des opérations CRUD pour la gestion du profil et des projets

Le backend intègre des fonctionnalités avancées de sécurité et d’authentification :
• Authentification à deux facteurs (2FA)
Mise en place d’une authentification sécurisée basée sur :
o Des sessions
o Des cookies
o L’envoi d’un code de vérification par mail avec expiration

• Gestion de l’envoi de mails
L’envoi de mails (SMTP) est utilisé dans deux cas :
o Réception d’un code d’authentification pour la connexion à l’espace administrateur
o Réception de messages envoyés via le formulaire de contact
• Sécurisation des données sensibles
o Hashage des codes d’authentification avant stockage en base de données
o Aucune donnée sensible n’est stockée en clair

Le frontend et le backend sont entièrement séparés, chacun dans un projet distinct, et communiquent via des requêtes API (fetch).
________________________________________
Déploiement:

Le déploiement a été réalisé en plusieurs étapes :
• Déploiement du backend FastAPI sur [URL MASQUÉE]
• Hébergement de la base de données PostgreSQL sur NeonTech
• Mise à jour des URLs des requêtes API côté frontend pour pointer vers le backend déployé
• Build du frontend React afin de faciliter son déploiement
• Déploiement du frontend sur Netlify