De zéro à une app fullstack avec Next.js et l’IA : le projet parfait pour ton portfolio

npx create-next-app@latest mon-generateur-portfolio

✔ Would you like to use TypeScript? … No / Yes  → Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? … Yes
✔ Would you like to customize the default import alias? … No

cd mon-generateur-portfolio

code .

npm run dev

'use client';

import { useState } from 'react';

export default function Home() {
  const [title, setTitle] = useState('');
  const [result, setResult] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    // Appel à l'API à venir à l'étape 3
    setLoading(false);
  };

  return (
    <main className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-900 to-indigo-950 p-4">
      <div className="bg-white/10 backdrop-blur-md rounded-xl p-8 w-full max-w-2xl shadow-2xl border border-white/20">
        <h1 className="text-3xl font-bold text-white mb-2">Générateur de description de projet</h1>
        <p className="text-gray-300 mb-6">
          Donne le titre de ton projet, l&apos;IA rédige une description prête pour ton portfolio.
        </p>
        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
          <input
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            placeholder="Ex : Application de chat en temps réel avec Socket.io"
            className="p-3 rounded-md bg-gray-800 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500"
            required
          />
          <button
            type="submit"
            disabled={loading}
            className="bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-600 text-white font-semibold py-3 rounded-md transition"
          >
            {loading ? 'Génération en cours...' : 'Générer la description'}
          </button>
        </form>
        {result && (
          <div className="mt-6 p-4 bg-gray-800 rounded-md border border-gray-700">
            <h2 className="text-sm text-indigo-400 mb-1">Résultat :</h2>
            <p className="text-white whitespace-pre-wrap">{result}</p>
          </div>
        )}
      </div>
    </main>
  );
}

OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
  const { title } = await request.json();

  if (!title) {
    return NextResponse.json({ error: 'Titre requis' }, { status: 400 });
  }

  const prompt = `Tu es un assistant qui aide les étudiants à rédiger des descriptions de projets tech pour leur portfolio.
Écris une description professionnelle et attrayante pour un projet intitulé "${title}".
Structure la réponse en deux parties :
1. Une phrase d'accroche.
2. Un court paragraphe (3-4 lignes) détaillant les fonctionnalités, la stack technique et la valeur ajoutée.
Sois enthousiaste mais crédible.`;

  try {
    const response = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
      },
      body: JSON.stringify({
        model: 'gpt-4o-mini', // le modèle le moins cher et très rapide
        messages: [{ role: 'user', content: prompt }],
        temperature: 0.7,
      }),
    });

    const data = await response.json();

    if (data.error) {
      return NextResponse.json({ error: data.error.message }, { status: 500 });
    }

    const generatedText = data.choices[0].message.content;
    return NextResponse.json({ result: generatedText });
  } catch (error) {
    return NextResponse.json({ error: 'Erreur serveur' }, { status: 500 });
  }
}

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();
  setLoading(true);
  setResult('');
  try {
    const res = await fetch('/api/generate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ title }),
    });
    const data = await res.json();
    if (data.error) {
      setResult(`Erreur : ${data.error}`);
    } else {
      setResult(data.result);
    }
  } catch (err) {
    setResult('Impossible de générer la description.');
  } finally {
    setLoading(false);
  }
};

git init
git add .
git commit -m "Initial commit"

git remote add origin https://github.com/ton-utilisateur/mon-generateur-portfolio.git
git branch -M main
git push -u origin main