Aller au contenu
Portfolio — Ingénieur Full-Stack · Systèmes en production

Ralph ChristianGabriel.

$

Je conçois et je livre des systèmes web et mobiles — puis j'explique chaque décision d'architecture. Trois études de cas documentées, avec métriques avant/après.

Disponible — emploi ou contratGrand Montréal · hybrideGitHub LinkedIn
Full-StackNext.js · TypeScriptJava · SpringPostgreSQL · PrismaSupabaseStripe · OAuthTDD · TestsFR / ENMontréal
Full-StackNext.js · TypeScriptJava · SpringPostgreSQL · PrismaSupabaseStripe · OAuthTDD · TestsFR / ENMontréal
25→10 min
Traitement d'une commande
The Mad Space
133
Tests — chef d'équipe de 6
FinanceJ · ÉTS
2 000+
Tickets résolus
Support & opérations*
94 %
Satisfaction client
Support & opérations*

* Rôle support & automatisation (Vidéotron).

En ce moment

Je travaille sur Cadence, une app mobile coach ↔ athlète que je co-fonde avec Alexandre. On est en développement actif après 13 sprints planifiés et 169+ issues structurées. Landing page en ligne sur cadence-web-fawn.vercel.app, code source sur GitHub. En parallèle, je poursuis mon B. Ing. en génie logiciel à l'ÉTS et je cherche un poste Full-Stack Junior ou Intermédiaire dans le Grand Montréal.

Mis à jour : 2026-05-01
Projets sélectionnés

01 Systèmes

Marketplace e-commerce print-on-demand
SYS–01En production

The Mad Space

Marketplace e-commerce print-on-demand · 2025 · présent

Marketplace print-on-demand connectant créateurs et consommateurs. ~15 000 LOC, 30+ endpoints API, auth custom session-based, OAuth 2.0 Google, conformité GDPR/Loi 25, 7+ intégrations B2B et fulfillment automatisé Gelato.

~15 000
LOC
30+
endpoints API
7+
intégrations B2B
Next.js 16TypeScriptPrismaPostgreSQLStripe
App mobile coaching sportif
SYS–02En développement

Cadence

App mobile coaching sportif · 2025 · présent

Application mobile coach ↔ athlète co-fondée avec Alexandre (design). 169+ issues structurées sur 13 sprints, audit concurrentiel de 8+ apps, conformité Loi 25 + PIPEDA + GDPR-ready. Beachhead : coachs musculation francophones au Québec.

169+
issues GitHub
13
sprints planifiés
74/74
features couvertes
ExpoReact NativeTypeScriptNativeWindSupabase
App desktop de finances personnelles
SYS–03En production

FinanceJ

App desktop de finances personnelles · Jan. 2026 · Avr. 2026

Application desktop Java de gestion de finances personnelles (revenus, dépenses, budgets). Équipe de 6 développeurs, cours LOG240 (Tests et Maintenance). 5 250+ LOC, 133 tests (100% couverture JaCoCo), 85 commits. Architecture MVC avec Singleton, DAO et AbstractTableModel. Contributeur le plus actif (28 commits).

5 250+
LOC
133
tests · 100% couverture
85
commits · 6 devs
Java 21MavenJava SwingApache DerbyJUnit 4
Autres systèmes

Guide local intelligent qui aide à décider quoi faire maintenant à Montréal selon le mood, l'heure, le budget, la localisation et la station STM. L'utilisateur choisit une ambiance — Chill, Romantique, Étudier, Aventure, Budget, Social ou Solo — et reçoit cafés, restos, bars, activités, parcs, rooftops et spots cachés ouverts autour de lui. Deux différenciateurs : STM Pulse, une carte du métro de Montréal qui transforme chaque station en interface de découverte (événements, spots, temps de marche, budget, ambiance autour de l'arrêt), et Vibe AI, un assistant conversationnel qui change une envie vague (« quoi faire ce soir en 2h ? », « date pas cher ») en plan concret. Une couche communauté légère (mini-reviews, votes de vibe, nouveaux spots proposés avec badge Découvreur). Prototype haute-fidélité couvrant accueil mood-first, Vibe AI, STM Pulse, Explorer, fiches lieux enrichies, communauté et version bureau — mobile-first, mais navigable sur web et bureau.

Claude Design → Claude CodeHTML/CSS/JS (runtime dc)Prototype interactif mobile + web/bureauDesign system dark mode (tokens CSS)Poppins + MontserratSTM Pulse (carte métro interactive)
Découverte locale intelligente · Prototype mobile + web
Vibe Montréal

Prototype interactif haute-fidélité d'une application de planification holistique — tout le cycle de productivité dans un seul produit cohérent. 20+ écrans couvrant landing, inscription & onboarding, dashboard, planification quotidienne, focus Pomodoro, calendrier multi-vues, tâches (5 vues), matrice Eisenhower, habitudes, objectifs SMART, automatisations, assistant de planification IA, collaboration & espaces partagés, synchronisation d'appareils, centre de notifications, facturation et compte. Palette de commandes ⌘K, création rapide, dates dynamiques. Nativement bilingue FR/EN, dark/light mode, responsive desktop + mobile, sur un design system complet WCAG AA, avec un moteur de science comportementale (chronotype, MCII, anti-procrastination CBT) intégré au flux de planification.

React 18Tailwind CSSBabeli18n FR/ENCSS Custom PropertiesWCAG AA
Planification holistique · Prototype haute-fidélité

Concept et prototype haute-fidélité de Wise & Wealthy, un coach financier personnel propulsé par l'IA qui démocratise l'éducation financière pour les 18–35 ans peu à l'aise avec la finance. Le produit est pensé à partir d'un modèle d'affaires complet (12 pages : étude de marché, Business Model Canvas, analyse concurrentielle YNAB/Rocket Money/Wealthsimple, MVP, indicateurs) et d'un PRD de découverte, et se positionne à l'opposé des apps de trading : éducation, vulgarisation et accompagnement plutôt que spéculation. La maquette mobile couvre une vingtaine d'écrans et d'états — onboarding guidé, tableau de bord (revenus, dépenses, épargne, « série de clarté », action du jour), assistant conversationnel « Wiz », budget et budget setup, objectifs d'épargne, mini-leçons + flashcards + exercices, actualité financière vulgarisée, notifications, profil, confidentialité et paywall freemium. Identité rassurante et non intimidante (mascotte Wiz, verts apaisants, Bricolage Grotesque + Plus Jakarta Sans), bilingue FR/EN, thème clair/sombre. Plus qu'une seule app, c'est une petite suite : l'app adulte ; « Mes finances », surface de suivi avancée (Transactions, Prévu vs réel, Cashflow, Abonnements, Dettes, import banque/CSV) qui incarne le palier premium ; « Wise & Wealthy Kids », déclinaison ludique pour enfants (tirelire, pièces, étoiles, jalons) ; « Espace Famille », espace parents avec code PIN à 4 chiffres et profils enfants ; et Wiz, la mascotte réutilisable (6 humeurs) qui unifie le tout. Positionnement assumé : éducation financière, pas de conseil réglementé — orienté confiance et protection des données (Loi 25).

Claude Design → Claude Codedc-runtime (React 18)Suite de 5 surfaces (cadre téléphone)20+ écrans / étatsAssistant IA « Wiz » (coach financier)Dashboard · Budget · Objectifs · Leçons
Coach financier IA · Prototype mobile

Reprise et refonte du site d'une photographe animalière primée à l'international (TIPPA 2024-2025, Bronze), dont le site Wix était resté inachevé. Démarche complète orientée premier client payant : formulaire de découverte Word de 60 questions, deck PowerPoint de 9 diapos pour cadrer l'appel, brief Claude Design structuré, puis maquette générée et implémentée. Au fil des itérations, le prototype est passé d'une page d'accueil unique à une maquette complète et interactive : multi-pages (accueil, galerie portfolio, page distinctions), une quinzaine de sections modulaires (héros, compteurs, parcours, forfaits, témoignages, boutique, espace client, infolettre, FAQ, pont de l'arc-en-ciel…), de vraies photos primées organisées par catégorie, un carrousel intelligent avec lightbox et un fil « cousu » animé au scroll. Le tout bilingue FR/EN, clair/sombre, sélecteur d'audience (particuliers/commercial), identité éditoriale dorée (Cormorant Garamond + Mulish), protection légère des images et un assistant-concierge menant à un contact réel. Un mode administrateur intégré — « liberté encadrée » — permet d'éditer contenu et apparence, masquer/réordonner les sections et gérer des codes promo, pour absorber les retours de la cliente sans jamais casser la maquette.

Claude Design → Claude CodeHTML/CSS/JS (React + Babel)Multi-pages (accueil · galerie · distinctions)~15 sections modulaires réordonnablesÉditeur visuel intégré (mode admin)Assistant-concierge (clavardage guidé)
Site vitrine photographe animalière · Prototype

Conception et prototype haute-fidélité de BOA, la marque de chef privé et service à table à Montréal du chef Max. Repris d'un PRD rempli par le client (document Word) et d'une analyse concurrentielle (Take a Chef, The Culinistas, Cozymeal, Tock), le site vend une expérience — « When the love for food meets unforgettable memories » — plutôt qu'un simple traiteur : soupers privés, mariages, anniversaires et corporatif, préparés et servis à domicile. La maquette couvre tout le parcours : accueil éditorial (hero, piliers « l'art de recevoir », trust strip, « ce qui est inclus »), un concierge culinaire qui recommande un menu en 30 secondes (occasion, convives, budget, restrictions), les menus (fixe / événement / appel requis), les expériences, les lieux, une galerie photos, la présentation du chef et le contact. Le cœur est un parcours de réservation multi-étapes : menu → date (délai minimum 2 semaines, frais de dernière minute signalés, waitlist « me prévenir ») → format (service à table / table du chef / événement), convives (plafond 20, +20 → appel obligatoire), adresse (Île de Montréal · frais selon distance) et allergies → résumé (dépôt 25 % non remboursable, solde selon entente, taxes non appliquées) → paiement mocké (carte / débit / Interac) → confirmation (dépôt reçu, rappel 48 h, notification à Max). S'y ajoutent un chatbot « Concierge BOA » à réponses guidées, un sélecteur FR/EN, un thème clair/sombre bourgogne & crème (Newsreader + Hanken Grotesk + Allura), des animations premium respectant prefers-reduced-motion, et un mode administrateur avec emplacements photo en drag & drop pour brancher les vraies images. Tout est mocké proprement — aucun paiement réel, aucune IA branchée — en attendant de trancher prix, calendrier (Calendly), processeur de paiement (Stripe / Square) et textes légaux (Loi 25) avec le client.

Claude Design → Claude CodeHTML/CSS/JS (runtime dc)Bilingue FR/EN (dictionnaire maison)Thème clair/sombre (tokens CSS)Newsreader + Hanken Grotesk + AlluraPalette bourgogne #6E1F2E + crème
Site de réservation chef privé & service à table · Prototype bilingue
BOA — Chef privé

Maquette de refonte complète pour le Club du Rex de Cornouailles du Canada (OSBL bilingue d'éleveurs). Site statique multi-pages organisé autour de trois parcours — adopter un chaton, devenir éleveur membre, soutenir le club. 10 pages (Accueil, La race, Annuaire des éleveurs, Codes & éthique, Règlements, Publications, Adhésion, Administrateurs & comités, Contact) avec explorateur d'anatomie interactif, carte de répartition filtrable et identité Rouge & Blanc dérivée du logo officiel. Bilingue FR/EN à bascule instantanée, thème clair/sombre, mobile-first (375px → bureau), accessibilité WCAG 2.2 AA, sans backend. Données réelles intégrées (11 chatteries, badges Anima-Québec, 7 associations félines, ressources officielles), sans inventer ni surpromettre.

Claude DesignHTML/CSS/JS statiquesCSS Custom Properties (tokens)i18n maison FR/ENJavaScript vanillaMontserrat
Refonte de site OSBL · Maquette bilingue
CRCC — Refonte
Stack technique

02 Outils que j'utilise au quotidien.

Frontend
TypeScriptReactNext.jsTailwind CSSReact Native
Backend & données
Node.jsSpring BootPostgreSQLPrismaSupabase
Qualité & livraison
TDDJUnitJestGitHub ActionsVercel
Intégrations
StripeOAuth 2.0GelatoGoogle APIs
Parcours

03 Parcours et formation.

2025 · présent
Cofondateur · Tech Lead Cadence
Co-fondation d'une application mobile de coaching sportif (coach ↔ athlète) avec Alexandre Boisvert. Planification en Tech Lead : 169+ issues structurées sur 13 sprints, audit concurrentiel de 8+ apps, conformité Loi 25 · PIPEDA · GDPR-ready. Stack : Expo/React Native, TypeScript, NativeWind, Supabase. Landing page Next.js en ligne (cadence-web-fawn.vercel.app), code source sur GitHub.
2025 · présent
Concepteur produit & Développeur freelance Projets en parallèle
Conception et prototypage haute-fidélité de produits web et mobiles, du brief client à l'implémentation : Wise & Wealthy (coach financier IA), Kim Dubois Photographe (site vitrine, premier client payant), Vibe Montréal (découverte locale intelligente), DPM Elevate (application de gestion de vie — calendrier, tâches, habitudes) et BOA (site de réservation chef privé & service à table). Design systems, bilingue FR/EN, clair/sombre, cible Next.js + TypeScript.
Déc. 2025 · Mars 2026
Développeur Intégrateur de Solutions Fastercom, Montréal
Paramétrage et intégration de solutions TMS via configuration en base de données. Intégration Google Maps (géocodage). Déploiement structuré Test → Dev → Production avec GitLab et CI/CD Pipelines. Stack : Spring Boot, Angular.
2025 · présent
Ingénieur logiciel Full-Stack (Contractuel) The Mad Space
Conception et développement complet d'une marketplace e-commerce print-on-demand (~15 000 LOC, 30+ endpoints API). 10+ modèles Prisma/PostgreSQL, auth custom session-based, OAuth 2.0 Google, i18n (2 langues), multi-devises (4). 7+ intégrations B2B (Stripe, Gelato, Google Merchant Center, GA4, Google Ads). Conformité GDPR/Loi 25. Déploiement Vercel/Supabase, Edge Functions Deno.
Jan. 2022 · Oct. 2025
Technicien en Automatisation & Support TI Vidéotron, Montréal
2 000+ tickets traités (AHT 11:18, 94% sat., NPS 9,6/10). Automatisation ~50% des tâches via Power Automate (RH/TI/Finances). Documentation procédures et runbooks pour stabiliser les déploiements.
Parcours complet
Éducation
Oct. 2024 · présent
B. Ing. Génie logiciel
ÉTS, École de technologie supérieure, Montréal
Jan. 2022 · Jan. 2024
DEC Techniques de Développement d'Applications
Collège Rosemont, Montréal
Sep. 2019 · Fév. 2022
DEP Soutien informatique
CFP des Riverains
Certifications
Responsive Web Design (300h) · freeCodeCampLearn HTML · CodecademyLearn Python 3 · CodecademyIntro to AI Strategy · Codecademy
Témoignages

Ce qu'on dit de mon travail.

Des retours de personnes avec qui j'ai collaboré dans des projets techniques, académiques et professionnels.

Christian a créé un site web professionnel, moderne et parfaitement adapté à mes besoins. Sa rigueur, sa créativité et sa capacité à communiquer clairement tout au long du projet ont grandement facilité la collaboration.

Ralph a pris en charge l’équipe lors de nos projets pour le cours de Test et Maintenance. Il a appris à connaître les membres de l’équipe pour leur attribuer les tâches leur correspondant le mieux, avec un bon équilibre et un principe d’équité. Il était toujours disponible pour répondre aux questions, patient et prêt à aider. C’est un travailleur qui cherche toujours à s’améliorer et sortir le meilleur de ses coéquipiers. C’est un excellent leader.

Jonathan Euclide Marc

Jonathan Euclide Marc

Collègue · ÉTS · 2026
Collègues

Ralph s’est démarqué par son professionnalisme et son esprit d’équipe. Il était toujours présent pour me soutenir lorsque je me retrouvais en difficulté, et ce qui m’a le plus marqué, c’est sa patience. Peu importe la complexité de la situation, il prenait le temps d’expliquer, d’accompagner et de s’assurer que tout était bien résolu. Je le recommande sans réserve.

Sunny Mélissa Gabriel

Sunny Mélissa Gabriel

Coordonnatrice logistique · Groupe Contex

Collègues
Voir tous les témoignages
9collaborations réussies
Témoignages vérifiés et authentiques
100%Recommandé sans hésitation
Disponible — emploi ou contrat

Construisons quelque chose qui tient.

Emploi, contrat ou simple question d'architecture — j'explique mes choix et je réponds vite.

LinkedIn GitHub réponse sous 24 h
Ralph Christian Gabriel
  • Production d'abord
    un système qui résiste, pas juste qui marche en local
  • Décisions expliquées
    chaque choix d'architecture est un compromis assumé
  • Livrer, mesurer, itérer
    des métriques avant/après sur chaque projet