toine/mon-site-perso
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
mon-site-perso/frontend
History
Exact
toine 80dc10855f ajout de la date et le tri desc par date des projects
2025-10-05 15:30:15 +02:00
..
.idea first commit 2025-09-20 14:16:14 +02:00
app ajout de la date et le tri desc par date des projects 2025-10-05 15:30:15 +02:00
public ajout des images sur les services 2025-10-05 15:14:24 +02:00
.gitignore first commit 2025-09-20 14:16:14 +02:00
Dockerfile ajout de fichiers de configurqtion divers 2025-10-04 15:53:12 +02:00
next.config.ts ajout des images sur les services 2025-10-05 15:14:24 +02:00
package-lock.json first commit 2025-09-20 14:16:14 +02:00
package.json first commit 2025-09-20 14:16:14 +02:00
postcss.config.mjs first commit 2025-09-20 14:16:14 +02:00
README.md ajout du fichier de route 2025-10-01 14:42:59 +02:00
tsconfig.json first commit 2025-09-20 14:16:14 +02:00

README.md

Mon site perso — Frontend

Projet frontend de type portfolio/blog basé sur Next.js (App Router) avec React et TypeScript.

Aperçu

  • Application Next.js 15 (App Router) avec React 19 et TypeScript.
  • Styles via Tailwind CSS v4 (PostCSS) + fichiers CSS personnalisés dans app/css.
  • Pages/routage dans app/* (ex. /projects, /contact).
  • Une route API côté Next pour relayer la création de projets vers un backend Python/Flask (présumé) : app/api/projects/route.ts.

Pile technique (stack)

  • Langage: TypeScript / JavaScript (ESNext)
  • Framework: Next.js 15 (App Router)
  • Bibliothèques: React 19, React DOM 19
  • CSS: Tailwind CSS v4 + PostCSS
  • Gestionnaire de packages: npm (présence de package-lock.json)

Prérequis

  • Node.js ≥ 18.17 (recommandé par Next.js) ou Node 20+
  • npm ≥ 9

Installation

  1. Cloner le dépôt.
  2. Installer les dépendances:
    • npm ci (recommandé en CI) ou npm install

Exécution

  • Développement (Turbopack activé):
  • Build de production:
    • npm run build
  • Lancer en production (après build):
    • npm start

Scripts définis dans package.json:

  • dev: next dev --turbopack
  • build: next build --turbopack
  • start: next start

Variables d’environnement

Fichier exemple détecté: .env

Variables présentes:

  • BACKEND_URL (ex: "http://127.0.0.1:5000/api")
    • Utilisée côté client dans app/components/Contact.tsx pour récupérer les contacts (${BACKEND_URL}/contact).
    • Attention: côté client, Next.js n’expose que les variables préfixées par NEXT_PUBLIC_ à l’exécution. Ici process.env.BACKEND_URL est lue dans un composant client et sera « inlinée » au build si définie. Si vous souhaitez pouvoir la modifier à l’exécution, préférez NEXT_PUBLIC_BACKEND_URL et adaptez le code. TODO: confirmer la stratégie d’exposition des variables et renommer si nécessaire.
  • API_KEY (ex: 0)
    • Lue dans app/api/projects/route.ts pour appeler le backend lors d’un POST de création de projet (en-tête x-api-key).
  • CACHE (ex: "no-store")
    • Indice d’intention pour les requêtes fetch; certains fetch utilisent déjà cache: "no-store".
  • APP, PORTS
    • Leur utilisation n’a pas été trouvée dans le code frontend. TODO: préciser l’usage ou les supprimer si obsolètes. Note: Next.js lit la variable PORT (sans "S") lors du next start; PORTS n’est pas standard.

Conseils:

  • Créez un fichier .env.local pour vos valeurs locales (non commitées), et .env.production pour la prod.
  • Pour exposer une variable au navigateur de façon sûre via Next.js, utilisez le préfixe NEXT_PUBLIC_.

Points d’entrée (entry points) et routage

  • Layout global: app/layout.tsx (définit <html lang="fr">, le Header et le footer).
  • Pages principales:
    • app/projects/page.tsx → /projects: liste des projets en provenance du backend (http://127.0.0.1:5000/api/projects/).
    • app/projects/new/page.tsx → /projects/new: formulaire client pour créer un projet (envoie sur /api/projects).
    • app/contact/page.tsx → /contact: affiche ContactComponent.
  • Route API Next.js:
    • app/api/projects/route.ts (méthode POST): relaie la création vers le backend et ajoute l’en-tête x-api-key à partir de process.env.API_KEY.

Structure du projet (extrait)

  • app/
    • layout.tsx (layout global)
    • components/
      • Header.tsx (en-tête avec bascule clair/sombre)
      • Contact.tsx (composant client, fetch vers BACKEND_URL)
    • contact/page.tsx
    • projects/page.tsx
    • projects/new/page.tsx
    • api/projects/route.ts
    • css/ (feuilles de style: globals.css, components.css, header_*.css, etc.)
  • public/ (assets statiques)
  • next.config.ts
  • postcss.config.mjs (plugins PostCSS dont @tailwindcss/postcss)
  • tailwind.config (intégré à Tailwind v4, pas de fichier dédié par défaut)
  • tsconfig.json
  • package.json / package-lock.json

Tests

Aucun framework de tests n’a été détecté (pas de jest, vitest, playwright, etc.).

  • TODO: choisir un outillage de test (par ex. Playwright pour e2e ou Jest/Vitest pour unitaires) et ajouter des scripts (test, test:e2e).

Déploiement

  • Générer le build: npm run build puis npm start pour servir l’app.
  • En hébergement serverless/Edge, se référer à la doc Next.js selon la cible.
  • TODO: préciser la plateforme cible (Vercel, Docker, autre) et la configuration d’environnement (variables, secrets, URL backend).

Ressources utiles Next.js:

Licence

Aucun fichier de licence n’a été trouvé.

  • TODO: ajouter un fichier LICENSE (par ex. MIT, Apache-2.0, etc.) ou préciser la licence du projet.

Auteur

  • © 2025 — Toine / Anthony Violet