Cheat Sheet

MERN Stack

MongoDB · Express · React · Node.js — fullstack van database tot UI.

Wat is MERN?

MongoDB — database
Express — backend framework
React — frontend framework
Node.js — JavaScript runtime

Setup & Project

2 onderwerpen

Node.js Setup

Installeer Node.js met native .env support en watch mode.

Project Setup

Backend project aanmaken met de juiste mappenstructuur.

Backend & Database

3 onderwerpen

Server & Routes

Express server opzetten en routes definiëren voor je API.

Database

Verbind met MongoDB en maak je eerste database aan.

Models & Schemas

Data models met Mongoose maken en testen met Postman.

CRUD Operations

3 onderwerpen

Create & Read

Controllers voor GET- en POST-endpoints.

Update & Delete

Controllers voor PATCH- en DELETE-endpoints.

CORS in Backend

React-frontend toegang geven tot je Express-backend.

Frontend (React ↔ backend)

6 onderwerpen

Frontend Setup

Vite naast je backend, twee terminals en een eerste verbindingstest.

Lijst Tonen (GET)

Data ophalen met useEffect + fetch en tonen in losse componenten.

Loading & Error States

Feedback tijdens laden en bij fouten.

Formulier Toevoegen (POST)

Controlled inputs en een POST-request naar je backend.

Verwijderen & Filteren

DELETE-knop per item en filteren op een enum-veld.

Bewerken (PATCH)

Form voorvullen met huidige waarden en PATCH-request sturen.

Authentication & Security

2 onderwerpen

Authentication Basics

User accounts met register en login endpoints + JWT tokens.

Protected Routes

Routes beveiligen met middleware zodat alleen ingelogde users hun data zien.

Frontend Auth

2 onderwerpen · na backend-auth

Pas hier verder gaan als je de backend-auth (hierboven) hebt staan — deze pagina's roepen /api/auth/login, /api/auth/register en de requireAuth-middleware aan.

Auth in de Frontend

AuthContext, login/register-pagina's en token in localStorage.

Protected Routes & Bearer Token

Token meesturen in fetches en pagina's afschermen.

Leerpad

Aanbevolen volgorde
  1. 1 Backend basis Node.js Project Server Database Models
  2. 2 CRUD Create/Read Update/Delete CORS
  3. 3 Frontend Setup Lijst Loading/Error POST DELETE PATCH
  4. 4 Auth Auth basics Protected Frontend Auth Bearer Token