DevFolio

Génère un portfolio professionnel à partir de ton username GitHub en un clic.

dev-folio.tech

---

Aperçu

Captures statiques

---

Fonctionnalités

• Profil complet: nom, bio, localisation, site web, social
• Stats automatiques: repos publics, stars, followers, anciennete
• Stack detectee: langages recuperes sur les repositories
• Projets mis en avant: tri des repos avec descriptions et topics
• Lien portfolio copiable pour CV et reseaux
• UX 404 orientee conversion
• Guide onboarding automatique (etapes de prise en main)
• Mode jour/nuit
• Interface bilingue FR/EN
• Open Graph pour un partage propre sur reseaux sociaux

---

Stack Technique

Technologie	Usage
Next.js 16	App Router, Server Components, rendu SSR
React 19	UI et interactivite
TypeScript	Typage end-to-end
Tailwind CSS v4	Styling et design system
GitHub REST API	Donnees profil, repos, langages
Vercel	Hebergement et deploiement

---

Architecture Rapide

flowchart LR
	U[Utilisateur] --> A[Route Next.js / ou /username]
	A --> S[Server Components]
	S --> G[GitHub REST API]
	G --> S
	S --> UI[UI: ProfileCard StatsGrid ProjectCard]
	UI --> B[Browser: partage et interactions client]

Loading

Flux principal: GitHub API -> Server Components -> UI.

---

Demos

• URL locale: http://localhost:3000
• URL profil: http://localhost:3000/torvalds

---

Installation

1) Cloner et installer

git clone https://github.com/ton-username/devfolio
cd devfolio
npm install

2) Variables d'environnement

Creer un fichier .env.local:

GITHUB_TOKEN=ton_token_github

Sans token, GitHub limite a 60 requetes/heure. Avec token, tu montes a 5000 requetes/heure.

3) Lancer en local

npm run dev

---

Qualite Et Tests

Commandes qualite actuelles

npm run lint
npm run build

Plan de tests a ajouter

• Tests unitaires sur la normalisation des usernames
• Tests unitaires sur la resolution de langue et theme
• Tests d'integration des pages critiques (/, /[username], 404)
• Tests e2e (mobile + desktop) pour les parcours cle

Stack suggeree:

• Vitest + React Testing Library pour unit/integration
• Playwright pour e2e

---

What I Learned

• Stabiliser un projet Next.js en environnement reel (debug Turbopack, fallback webpack quand necessaire)
• Gerer les routes dynamiques Next 16 (params en Promise)
• Concevoir un design system coherent
• Traiter les erreurs GitHub API proprement (404, etats limites)
• Eviter les problemes d'hydratation React entre server et client
• Concevoir un onboarding UX clair sans casser la navigation
• Integrer i18n (FR/EN) et theme jour/nuit avec persistance
• Penser accesibilite et responsive des la premiere version

---

Deploiement Vercel

Option 1: via GitHub (recommande)

1. Push le repo sur GitHub
2. Importer le projet sur Vercel
3. Ajouter GITHUB_TOKEN dans Settings > Environment Variables
4. Deploy

Option 2: via CLI

npm i -g vercel
vercel

Build command: npm run build

---

Roadmap

• Prochaine contribution: export PDF/PNG du portfolio
• Ajouter tests unitaires et e2e
• Ajouter analytics produit (events onboarding, copy link)
• Ajouter selection de templates de profil

---

Contribution

Les contributions sont bienvenues.

1. Fork le repo
2. Creer une branche feature/ma-feature
3. Commit
4. Push
5. Ouvrir une Pull Request

---

Licence

MIT

---

DOAMBA Lory Hesdrie