Découverte d'un langage Full Stack : Formation complète

┌─────────────┐         HTTP/HTTPS          ┌─────────────┐
│   CLIENT    │  ───────────────────────►  │   SERVEUR   │
│ (Navigateur │  ◄───────────────────────  │  (Node.js   │
│  ou App)    │      JSON / HTML            │   Express)  │
└─────────────┘                             └──────┬──────┘
                                                   │
                                                   ▼
                                            ┌─────────────┐
                                            │ Base de     │
                                            │ données     │
                                            └─────────────┘

# Installer nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
# Redémarrer le terminal ou : source ~/.zshrc  (ou ~/.bashrc)

**Utilisation (identique sur macOS, Linux et Windows) :**

```bash
# Installer Node 22
nvm install 22

# L'utiliser (pour cette session)
nvm use 22

# Lancer le projet
npm run dev

mkdir mon-app-fullstack && cd mon-app-fullstack
npm init -y
npm install express

const express = require('express');
const app = express();
const PORT = 3000;

app.get("/", (req, res) => {
  res.json({ message: 'Hello World !' });
});

app.listen(PORT, () => {
  console.log(`Serveur démarré sur http://localhost:${PORT}`);
});

node server.js

mon-app-fullstack/
├── server.js           # Point d'entrée du serveur
├── package.json
├── config/             # Configuration (DB, env)
├── routes/             # Routes API (users, products...)
├── controllers/        # Logique métier
├── models/             # Modèles de données (si BDD)
├── middleware/         # Auth, validation, logs
├── client/             # Frontend (Vue, React) - ou projet séparé
└── .env                # Variables d'environnement (jamais commité)

npm install express cors

const express = require('express');
const cors = require('cors');
const app = express();
const PORT = 3000;

app.use(cors());
app.use(express.json());

// Stockage en mémoire (remplacé par une BDD en production)
let tasks = [
  { id: 1, title: 'Apprendre Express', done: false },
  { id: 2, title: 'Créer une API REST', done: false },
];

// GET /api/tasks - Liste toutes les tâches
app.get("/api/tasks", (req, res) => {
  res.json(tasks);
});

// GET /api/tasks/:id - Récupère une tâche par ID
app.get("/api/tasks/:id", (req, res) => {
  const task = tasks.find(t => t.id === parseInt(req.params.id));
  if (!task) return res.status(404).json({ error: 'Tâche non trouvée' });
  res.json(task);
});

// POST /api/tasks - Crée une nouvelle tâche
app.post("/api/tasks", (req, res) => {
  const { title } = req.body;
  if (!title) return res.status(400).json({ error: 'Le titre est requis' });
  const newTask = {
    id: tasks.length + 1,
    title,
    done: false,
  };
  tasks.push(newTask);
  res.status(201).json(newTask);
});

// PUT /api/tasks/:id - Met à jour une tâche
app.put("/api/tasks/:id", (req, res) => {
  const task = tasks.find(t => t.id === parseInt(req.params.id));
  if (!task) return res.status(404).json({ error: 'Tâche non trouvée' });
  task.title = req.body.title ?? task.title;
  task.done = req.body.done ?? task.done;
  res.json(task);
});

// DELETE /api/tasks/:id - Supprime une tâche
app.delete("/api/tasks/:id", (req, res) => {
  const index = tasks.findIndex(t => t.id === parseInt(req.params.id));
  if (index === -1) return res.status(404).json({ error: 'Tâche non trouvée' });
  tasks.splice(index, 1);
  res.status(204).send();
});

app.listen(PORT, () => console.log(`API sur http://localhost:${PORT}`));

# Lister les tâches
curl http://localhost:3000/api/tasks

# Créer une tâche
curl -X POST http://localhost:3000/api/tasks 
  -H "Content-Type: application/json" 
  -d '{"title":"Ma nouvelle tâche"}'

# Mettre à jour
curl -X PUT http://localhost:3000/api/tasks/1 
  -H "Content-Type: application/json" 
  -d '{"done":true}'

# Supprimer
curl -X DELETE http://localhost:3000/api/tasks/1

FIREBASE_API_KEY=xxx
FIREBASE_AUTH_DOMAIN=xxx
FIREBASE_PROJECT_ID=xxx
FIREBASE_STORAGE_BUCKET=xxx
FIREBASE_MESSAGING_SENDER_ID=xxx
FIREBASE_APP_ID=xxx

npm install firebase-admin

// config/firebase.js
const admin = require("firebase-admin");
const serviceAccount = require("./ficher-cle.json");

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount)
});

const db = admin.firestore();
module.exports = { admin, db };

const { db } = require('./config/firebase');

// Lire les tâches
const snapshot = await db.collection('tasks').get();
const tasks = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));

// Créer une tâche
await db.collection('tasks').add({ title: 'Nouvelle tâche', done: false });

const express = require('express');
const cors = require('cors');
const { db } = require('./config/firebase');

const app = express();
app.use(cors());
app.use(express.json());

// GET /api/tasks - Liste toutes les tâches (READ)
app.get('/api/tasks', async (req, res) => {
  try {
    const snapshot = await db.collection('tasks').get();
    const tasks = snapshot.docs.map(d => ({ id: d.id, ...d.data() }));
    res.json(tasks);
  } catch (err) {
    res.status(500).json({ error: 'Erreur lors de la récupération des tâches' });
  }
});

// GET /api/tasks/:id - Récupère une tâche par ID (READ)
app.get('/api/tasks/:id', async (req, res) => {
  try {
    const taskSnap = await db.collection('tasks').doc(req.params.id).get();

    if (!taskSnap.exists) {
      return res.status(404).json({ error: 'Tâche non trouvée' });
    }

    res.json({ id: taskSnap.id, ...taskSnap.data() });
  } catch (err) {
    res.status(500).json({ error: 'Erreur lors de la récupération de la tâche' });
  }
});

// POST /api/tasks - Crée une nouvelle tâche (CREATE)
app.post('/api/tasks', async (req, res) => {
  try {
    const { title } = req.body;
    if (!title) {
      return res.status(400).json({ error: 'Le titre est requis' });
    }

    const createdRef = await db.collection('tasks').add({ title, done: false });
    res.status(201).json({ id: createdRef.id, title, done: false });
  } catch (err) {
    res.status(500).json({ error: 'Erreur lors de la création de la tâche' });
  }
});

// PUT /api/tasks/:id - Met à jour une tâche (UPDATE)
app.put('/api/tasks/:id', async (req, res) => {
  try {
    const ref = db.collection('tasks').doc(req.params.id);
    const snap = await ref.get();

    if (!snap.exists()) {
      return res.status(404).json({ error: 'Tâche non trouvée' });
    }

    const current = snap.data();
    const updated = {
      title: req.body.title ?? current.title,
      done: req.body.done ?? current.done,
    };

    await ref.update(updated);
    res.json({ id: snap.id, ...updated });
  } catch (err) {
    res.status(500).json({ error: 'Erreur lors de la mise à jour de la tâche' });
  }
});

// DELETE /api/tasks/:id - Supprime une tâche (DELETE)
app.delete('/api/tasks/:id', async (req, res) => {
  try {
    const ref = db.collection('tasks').doc(req.params.id);
    await ref.delete();
    res.status(204).send();
  } catch (err) {
    res.status(500).json({ error: 'Erreur lors de la suppression de la tâche' });
  }
});

npm install mysql2

const mysql = require('mysql2/promise');

const pool = mysql.createPool({
  host: process.env.DB_HOST || 'localhost',
  user: process.env.DB_USER || 'root',
  password: process.env.DB_PASSWORD,
  database: process.env.DB_NAME || 'mon_app',
});

// Récupérer toutes les tâches
const [rows] = await pool.execute('SELECT * FROM tasks');
res.json(rows);

// Créer une tâche
const [result] = await pool.execute(
  'INSERT INTO tasks (title, done) VALUES (?, ?)',
  [req.body.title, false]
);
res.status(201).json({ id: result.insertId, ...req.body });

npm install jsonwebtoken bcrypt

const bcrypt = require('bcrypt');
const jwt = require('jsonwebtoken');

app.post("/api/auth/register", async (req, res) => {
  const { email, password } = req.body;
  if (!email || !password) {
    return res.status(400).json({ error: 'Email et mot de passe requis' });
  }
  // Vérifier si l'utilisateur existe déjà (requête BDD)
  // Hasher le mot de passe
  const hashedPassword = await bcrypt.hash(password, 10);
  // Sauvegarder en BDD (users table)
  // Générer le JWT
  const token = jwt.sign(
    { userId: newUser.id },
    process.env.JWT_SECRET || 'votre-secret-tres-long',
    { expiresIn: '7d' }
  );
  res.status(201).json({ token, user: { id: newUser.id, email } });
});

app.post("/api/auth/login", async (req, res) => {
  const { email, password } = req.body;
  // Récupérer l'utilisateur en BDD
  const user = await findUserByEmail(email);
  if (!user) return res.status(401).json({ error: 'Identifiants invalides' });
  const valid = await bcrypt.compare(password, user.password);
  if (!valid) return res.status(401).json({ error: 'Identifiants invalides' });
  const token = jwt.sign(
    { userId: user.id },
    process.env.JWT_SECRET,
    { expiresIn: '7d' }
  );
  res.json({ token, user: { id: user.id, email: user.email } });
});

npm install firebase-admin

const admin = require('firebase-admin');

admin.initializeApp({
  credential: admin.credential.applicationDefault(),
});

module.exports = { admin };

const { admin } = require('./firebaseAdmin');

const firebaseAuth = async (req, res, next) => {
  const authHeader = req.headers.authorization;
  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    return res.status(401).json({ error: 'Token Firebase manquant' });
  }

  const idToken = authHeader.split()[1];

  try {
    const decoded = await admin.auth().verifyIdToken(idToken);
    req.user = decoded; // contient uid, email, etc.
    next();
  } catch (err) {
    return res.status(401).json({ error: 'Token Firebase invalide ou expiré' });
  }
};

// Exemple de route protégée avec Firebase Auth
app.get("/api/profile", firebaseAuth, (req, res) => {
  res.json({
    uid: req.user.uid,
    email: req.user.email,
  });
});

const authMiddleware = (req, res, next) => {
  const authHeader = req.headers.authorization;
  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    return res.status(401).json({ error: 'Token manquant' });
  }
  const token = authHeader.split()[1];
  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.userId = decoded.userId;
    next();
  } catch (err) {
    return res.status(401).json({ error: 'Token invalide ou expiré' });
  }
};

// Routes protégées
app.get("/api/me", authMiddleware, (req, res) => {
  // req.userId contient l'ID de l'utilisateur connecté
  res.json({ userId: req.userId });
});

app.post("/api/tasks", authMiddleware, (req, res) => {
  // Créer une tâche liée à req.userId
});

// Récupérer les tâches
const response = await fetch("http://localhost:3000/api/tasks");
const tasks = await response.json();

// Créer une tâche (avec authentification)
const response = await fetch("http://localhost:3000/api/tasks", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": `Bearer ${token}`,
  },
  body: JSON.stringify({ title: "Ma tâche" }),
});
const newTask = await response.json();

<script setup>
import { ref, onMounted } from "vue";

const tasks = ref([]);
const token = localStorage.getItem("token");

async function loadTasks() {
  const res = await fetch("http://localhost:3000/api/tasks", {
    headers: { Authorization: `Bearer ${token}` },
  });
  tasks.value = await res.json();
}

async function addTask(title) {
  await fetch("http://localhost:3000/api/tasks", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": `Bearer ${token}`,
    },
    body: JSON.stringify({ title }),
  });
  loadTasks();
}

onMounted(loadTasks);
</script>

<template>
  <ul>
    <li v-for="task in tasks" :key="task.id">{{ task.title }}</li>
  </ul>
</template>

npx create-vite .

npm install firebase

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: "VOTRE_API_KEY",
  authDomain: "votre-projet.firebaseapp.com",
  projectId: "votre-projet",
  // autres champs si nécessaires
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

import { useState } from "react";
import { auth } from "./firebase";
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
} from "firebase/auth";

export function AuthForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [message, setMessage] = useState("");

  async function handleSignup() {
    try {
      await createUserWithEmailAndPassword(auth, email, password);
      setMessage("Inscription réussie, vous pouvez maintenant vous connecter.");
    } catch (err) {
      setMessage("Erreur d'inscription.");
    }
  }

  async function handleLogin() {
    try {
      await signInWithEmailAndPassword(auth, email, password);
      setMessage("Connexion réussie.");
    } catch (err) {
      setMessage("Erreur de connexion.");
    }
  }

  return (
    <div>
      <h2>Auth Firebase</h2>
      <input
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="password"
        placeholder="Mot de passe"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={handleSignup}>Inscription</button>
      <button onClick={handleLogin}>Connexion</button>
      <p>{message}</p>
    </div>
  );
}

import { useEffect, useState } from "react";
import { auth } from "./firebase";

export function Tasks() {
  const [tasks, setTasks] = useState([]);
  const [error, setError] = useState("");

  async function loadTasks() {
    try {
      const user = auth.currentUser;
      if (!user) {
        setError("Vous devez être connecté.");
        return;
      }
      const idToken = await user.getIdToken();

      const res = await fetch("http://localhost:3000/api/tasks", {
        headers: {
          Authorization: `Bearer ${idToken}`,
        },
      });

      if (!res.ok) {
        setError("Erreur API");
        return;
      }

      const data = await res.json();
      setTasks(data);
    } catch {
      setError("Erreur lors du chargement des tâches.");
    }
  }

  useEffect(() => {
    loadTasks();
  }, []);

  return (
    <div>
      <h2>Liste des tâches</h2>
      {error && <p>{error}</p>}
      <ul>
        {tasks.map((t: any) => (
          <li key={t.id}>{t.title}</li>
        ))}
      </ul>
    </div>
  );
}

import { AuthForm } from "./AuthForm";
import { Tasks } from "./Tasks";

function App() {
  return (
    <div>
      <AuthForm />
      <Tasks />
    </div>
  );
}

export default App;