From ef1ba911d9316caaff80043ef3416272f3133887 Mon Sep 17 00:00:00 2001 From: mrtoine Date: Wed, 1 Oct 2025 14:42:59 +0200 Subject: [PATCH] ajout du fichier de route --- frontend/README.md | 114 ++++++++++++++++++++++------ frontend/app/api/contact/route.ts | 26 +++++++ frontend/app/components/Contact.tsx | 5 +- frontend/app/projects/page.tsx | 7 +- 4 files changed, 125 insertions(+), 27 deletions(-) create mode 100644 frontend/app/api/contact/route.ts diff --git a/frontend/README.md b/frontend/README.md index e215bc4..9e44c0d 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,36 +1,104 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). +# Mon site perso — Frontend -## Getting Started +Projet frontend de type portfolio/blog basé sur Next.js (App Router) avec React et TypeScript. -First, run the development server: +## 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`. -```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev -``` +## 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`) -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +## Prérequis +- Node.js ≥ 18.17 (recommandé par Next.js) ou Node 20+ +- npm ≥ 9 -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. +## Installation +1. Cloner le dépôt. +2. Installer les dépendances: + - `npm ci` (recommandé en CI) ou `npm install` -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. +## Exécution +- Développement (Turbopack activé): + - `npm run dev` + - Par défaut: http://localhost:3000 +- Build de production: + - `npm run build` +- Lancer en production (après build): + - `npm start` -## Learn More +Scripts définis dans `package.json`: +- `dev`: `next dev --turbopack` +- `build`: `next build --turbopack` +- `start`: `next start` -To learn more about Next.js, take a look at the following resources: +## Variables d’environnement +Fichier exemple détecté: `.env` -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. +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. -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! +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_`. -## Deploy on Vercel +## Points d’entrée (entry points) et routage +- Layout global: `app/layout.tsx` (définit ``, 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`. -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. +## 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` -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. +## 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: +- Documentation: https://nextjs.org/docs +- Déploiement: https://nextjs.org/docs/app/building-your-application/deploying + +## 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 diff --git a/frontend/app/api/contact/route.ts b/frontend/app/api/contact/route.ts new file mode 100644 index 0000000..99b12a3 --- /dev/null +++ b/frontend/app/api/contact/route.ts @@ -0,0 +1,26 @@ +import { NextResponse } from "next/server"; + +export async function GET() { + try { + const baseUrl = process.env.BACKEND_URL; + if (!baseUrl) { + return NextResponse.json({ error: "BACKEND_URL not configured" }, { status: 500 }); + } + + const url = `${baseUrl.replace(/\/$/, "")}/contact`; + const res = await fetch(url, { cache: "no-store" }); + + if (!res.ok) { + return NextResponse.json({ error: "Failed to fetch contact data" }, { status: res.status }); + } + + const data = await res.json(); + + // Ensure we only expose expected fields + const { email, linkedin, github } = data || {}; + + return NextResponse.json({ email, linkedin, github }, { status: 200 }); + } catch (error) { + return NextResponse.json({ error: "Unexpected error" }, { status: 500 }); + } +} diff --git a/frontend/app/components/Contact.tsx b/frontend/app/components/Contact.tsx index 7b0b596..bb6295c 100644 --- a/frontend/app/components/Contact.tsx +++ b/frontend/app/components/Contact.tsx @@ -19,9 +19,8 @@ export default function ContactComponent() { useEffect(() => { if (!onContactPage) return; - // Essaye avec BACKEND_URL, sinon fallback vers une route locale hypothétique - const backend = (process.env.BACKEND_URL as string) || "http://127.0.0.1:5000/api"; - const url = backend ? `${backend}/contact` : "http://127.0.0.1:5000/api/contact"; + // Appelle l'API interne Next.js qui proxy vers le BACKEND_URL côté serveur + const url = "/api/contact"; fetch(url, { cache: "no-store" }) .then((res) => (res.ok ? res.json() : Promise.reject(new Error("fetch contact failed")))) diff --git a/frontend/app/projects/page.tsx b/frontend/app/projects/page.tsx index 38c335a..6b9a618 100644 --- a/frontend/app/projects/page.tsx +++ b/frontend/app/projects/page.tsx @@ -1,5 +1,10 @@ async function getProjects() { - const res = await fetch("http://127.0.0.1:5000/api/projects/", { + const baseUrl = process.env.BACKEND_URL; + if (!baseUrl) { + throw new Error("Variable d'environnement BACKEND_URL manquante"); + } + + const res = await fetch(`${baseUrl}/projects/`, { cache: "no-store", });