📌 Présentation

Ce projet est bien plus qu'un simple portfolio. Il s'agit d'une application Full-stack haute performance conçue pour mettre en avant mes compétences tout en offrant une interface de gestion (CMS) complète et sécurisée.

L'objectif était de créer une expérience utilisateur fluide (UX), visuellement percutante (UI), tout en gardant un contrôle total sur le contenu via un espace administration robuste.

🚀 Fonctionnalités Clés

• CMS Sur-mesure & Markdown : Gestion dynamique des projets avec support complet du Markdown (rendu prose) et interface d'édition avec aperçu en temps réel.
• Modernisation UI/UX : Système d'icônes Lucide entièrement animé via Framer Motion (micro-interactions spécifiques par icône).
• Authentification Avancée : Espace admin protégé avec Double Authentification (A2F) via OTP.
• Statistiques & Analytics : Dashboard intégré avec suivi des visites, pages vues et messages en temps réel (intégration Umami).
• Gestion de Bannière Hybride : Choix dynamique pour chaque projet entre une bannière en dégradé généré ou la première image du projet.
• Optimisation SEO & Perf : Scores Lighthouse optimisés (100/100), temps de chargement ultra-rapide et responsive design complet.
• Mode Sombre/Clair : Interface adaptative avec persistance du thème.

🛠 Stack Technique

Frontend

• Next.js 16 (App Router)
• React 19
• TypeScript (Typage strict pour la fiabilité)
• Tailwind CSS v4 (Styling moderne et responsive)
• Framer Motion (Animations fluides et micro-interactions)
• Lucide Icons (Iconographie outline moderne)

Backend & Données

• Prisma ORM (Gestion de la base de données)
• PostgreSQL (Neon.tech) (Base de données relationnelle serverless)
• NextAuth.js (Gestion sécurisée des sessions)
• Cloudinary (Hébergement et optimisation des images et du CV)

Outils & DevOps

• Resend SDK (Envoi d'emails transactionnels)
• Docker (Environnement de développement conteneurisé)
• GitHub Actions (Pipelines CI/CD automatisés)
• Doppler (Gestion centralisée et sécurisée des secrets)

📌 Présentation & Mon Rôle

Infiny est une plateforme SaaS innovante dédiée au recrutement. J'ai été engagé en tant que Développeur Frontend Freelance pour construire intégralement la partie cliente de cette application (MVP).

Travaillant en binôme avec un autre développeur, mon objectif était d'intégrer un Design System complet depuis Figma pour concevoir des interfaces fluides, interactives et parfaitement connectées à l'API. Le défi résidait dans l'intégration millimétrée et la gestion d'états complexes pour de multiples profils d'utilisateurs.

⚠️ Note de Confidentialité : En raison d'accords de confidentialité et de la nature métier de l'application, l'ensemble des écrans et tableaux de bord internes que j'ai développés ne peuvent pas être affichés publiquement ici. Les captures se limitent aux interfaces d'entrée publiques.

🚀 Fonctionnalités Clés Intégrées

• Inscription par Recommandation : Logique d'onboarding unique où les candidats et les "Recommandeurs" interagissent et s'invitent mutuellement pour accéder à la plateforme.
• Espaces Multi-Rôles Sécurisés : Développement de quatre tableaux de bord distincts et personnalisés :
  • Recruteur : Recherche avancée bimodale (mode classique avec plus d'une dizaine de filtres, et mode IA permettant une recherche via un prompt), paiement d'abonnements.
  • Candidat : Création de profil obligatoire via un tunnel interactif en 7 étapes (Dépôt de CV / Lettre de motivation / Liens utiles, saisie des informations personnelles, vérification du numéro de téléphone, et ajout dynamique des compétences, formations, études, centres d'intérêts et aspirations professionnelles).
  • Recommandeur : Rôle calqué sur celui du Candidat (même profil), mais disposant de l'option et de l'interface spécifique pour recommander d'autres utilisateurs.
  • Admin : Création et gestion centralisée des "Comptes-Rendus d'Entretien".
• Gestion de la Confidentialité : Tous les rôles disposent de paramètres de visibilité dynamiques permettant de masquer ou d'afficher publiquement leurs moyens de contact (téléphone, email).
• Système de Paiement : Intégration frontend du tunnel de paiement Stripe pour les abonnements B2B.
• Gestion Documentaire : Upload, visualisation et téléchargement de documents professionnels (CVs, rapports).

🛠 Stack Technique (Frontend Focus)

• Framework : Next.js (App Router)
• UI & Styling : React, Tailwind CSS](Intégration pixel-perfect depuis Figma)
• Hébergement Frontend : Vercel
• Écosystème Global : NestJS, Node.js, Prisma, PostgreSQL, AWS (pour le Backend)

📌 Présentation

Marocola est une application web moderne, interactive et complète, dédiée à l'organisation et à la gestion d'un événement de tirage au sort (tombola) en ligne. Conçue pour offrir une expérience ludique et fluide aux participants, la plateforme intègre un système de gestion de tickets personnalisés, un suivi de cagnotte, et une interface d'administration sécurisée.

L'application se démarque par son approche hautement visuelle et dynamique, intégrant notamment une "Roue" animée pour les tirages en direct (idéal pour les réseaux sociaux comme TikTok), ainsi qu'une vitrine immersive pour présenter les lots à gagner.

🚀 Fonctionnalités Clés

• Système de Tickets Personnalisés : Espace "Mes Tickets" permettant aux participants de consulter et retrouver facilement leurs numéros de participation générés numériquement.
• Tirage au Sort Animé : Intégration d'une roue interactive et de confettis virtuels pour rendre l'annonce des résultats ludique, transparente et virale.
• Vitrine des Lots & Cagnotte : Pages dédiées à la présentation visuelle des lots à gagner et au suivi de l'objectif de la cagnotte.
• Espace Administration Sécurisé : Back-office protégé pour gérer la liste des participants, superviser la cagnotte et déclencher officiellement les tirages.
• Génération & Notification : Création automatisée de visuels de tickets de tombola (rendu graphique via Canvas/Puppeteer) et envoi de confirmations par email aux participants.
• Intégration Réseaux Sociaux : Interfaces adaptées pour la promotion et le relais de l'événement (notamment via des routes et partages pensés pour TikTok).

🛠 Stack Technique

Frontend

• Next.js 16 (App Router pour le routing, le SEO et le Server-Side Rendering)
• React 19
• TypeScript (Pour un typage strict et une robustesse du code)
• Tailwind CSS v4 (Design responsive, rapide et moderne)
• Framer Motion & React Confetti (Moteur d'animations fluides, transitions et effets de célébration)

Backend & Données

• Supabase (Base de données PostgreSQL managée et requêtage temps-réel)
• Next.js API Routes (Points d'entrée backend pour la sécurité et l'envoi de mails)
• Bcrypt / Bcryptjs (Hachage et sécurisation de l'authentification côté administration)

Outils Spécialisés & DevOps

• Puppeteer & Canvas (Manipulation graphique côté serveur pour la génération de tickets dématérialisés)
• Nodemailer (Configuration SMTP pour l'envoi fiable d'emails transactionnels)
• Vercel Analytics & Speed Insights (Monitoring en direct des performances web et de l'audience)