# Adaugarea unui backend: Rute API si baza de date
Tot ce am facut pana acum ruleaza in browserul utilizatorului. Cand cineva isi trimite emailul, nu ajunge nicaieri — afisam doar un mesaj de succes fals. In aceasta lectie adaugam un backend ca datele sa fie salvate cu adevarat.
## Imaginea de ansamblu
Concept
Fiecare aplicatie web are acelasi flux de baza:
Browserul utilizatorului (Frontend) → Ruta API (Backend) → Baza de date → Raspuns inapoi la browser
Frontend-ul colecteaza inputul utilizatorului. Backend-ul il proceseaza. Baza de date il stocheaza. Raspunsul il confirma. Asa functioneaza fiecare aplicatie din lume — de la Google la un simplu formular de inscriere.
## Rutele API in Next.js
Iata lucrul frumos despre Next.js: gestioneaza si logica backend. Nu ai nevoie de un server separat. Rutele API sunt fisiere speciale din folderul `app/api/` care gestioneaza logica de pe server.
O ruta API este pur si simplu un URL pe serverul tau care accepta date si returneaza un raspuns. De exemplu: `POST /api/signup` — primeste un email, il stocheaza, returneaza "success."
Incearca
In Claude Code, tasteaza:
"Create an API route at app/api/signup/route.ts that:
- Accepts POST requests with a JSON body containing an email field
- Validates the email format on the server side
- Checks for duplicate emails
- Stores the email with a timestamp in a local JSON file at data/signups.json
- Returns a JSON response with success: true or an error message
- Create the data directory if it doesn't exist"
Claude va crea fisierul rutei API. Acesta este primul tau cod backend!
## Incepem simplu: stocare in fisier JSON
In scop de invatare, stocam datele intr-un fisier JSON local. Aceasta este cea mai simpla "baza de date" posibila — un fisier care contine o lista de emailuri. Functioneaza perfect pentru dezvoltare.
Dupa ce Claude creeaza ruta API, fisierul `data/signups.json` va arata cam asa:
```json
[
{ "email": "user@example.com", "timestamp": "2026-04-11T10:30:00Z" }
]
```
Nota sincera
Un fisier JSON nu este o baza de date reala. Functioneaza bine pentru invatare si testare la scara mica, dar are limitari reale: nu gestioneaza accesul concurent, nu permite interogari avansate, nu are backup si traieste pe o singura masina. In Lectia 10, vom trece la DynamoDB — o baza de date reala in cloud. Dar deocamdata, acesta este instrumentul perfect de invatare.
## Conectarea frontend-ului la backend
Acum hai sa actualizam formularul de inscriere pentru a trimite efectiv date la noua noastra ruta API:
Incearca
In Claude Code:
"Update the signup form component to POST to /api/signup instead of simulating a delay. Send the email as JSON in the request body. Handle the response:
- If the API returns success: true, show the success message
- If the API returns an error (like duplicate email), show the error message from the API
- Handle network errors with a generic 'Something went wrong. Please try again.' message"
### Testarea
1. Asigura-te ca serverul de dezvoltare ruleaza (`npm run dev`)
2. Mergi la http://localhost:3000
3. Introdu un email si trimite formularul
4. Verifica `data/signups.json` — emailul tau ar trebui sa fie acolo!
5. Incearca sa trimiti acelasi email din nou — ar trebui sa vezi o eroare de "duplicat"
Incearca
Trimite cateva emailuri diferite prin formular. Apoi deschide data/signups.json in VS Code pentru a verifica ca sunt toate acolo. Tocmai ai construit o functionalitate full-stack!
## Validarea datelor pe server
Validarea pe client (in browser) e buna pentru experienta utilizatorului, dar nu e suficienta. Oricine o poate ocoli trimitand cereri direct la API-ul tau.
Concept
Nu te increde niciodata in datele de la client. Valideaza intotdeauna si pe server. Validarea pe client este pentru experienta utilizatorului (afisarea erorilor utile). Validarea pe server este pentru securitate (respingerea datelor invalide indiferent de cum au fost trimise).
Ruta noastra API deja valideaza emailurile pe server — Claude a inclus asta. Dar hai sa o facem mai robusta:
```
Add rate limiting to the signup API — maximum 5 signups per IP address
per hour. If exceeded, return a 429 status with a friendly message.
```
## Testarea API-ului
Pe langa folosirea formularului din browser, poti testa API-ul direct:
**Folosind tabul Network din browser:**
1. Deschide Developer Tools (F12)
2. Mergi la tabul Network
3. Trimite formularul
4. Apasa pe cererea `signup` pentru a vedea detaliile cererii si raspunsului
**Folosind curl in terminal** (optional):
```
curl -X POST http://localhost:3000/api/signup \
-H "Content-Type: application/json" \
-d '{"email": "test@example.com"}'
```
## Nota de securitate
Nota sincera
Acesta este un proiect de invatare, si asta e ok. Dar o aplicatie de productie necesita mai mult:
- Autentificare — verificarea cine face cererile
- Rate limiting — prevenirea abuzurilor (am adaugat o limitare de baza mai sus)
- Sanitizarea inputului — prevenirea atacurilor de injectare
- HTTPS — criptarea datelor in tranzit
- Variabile de mediu — pastrarea secretelor in afara codului
Claude te poate ajuta sa le adaugi pe toate, dar e important sa stii ca exista. Securitatea nu e optionala in aplicatiile reale.
## Git Checkpoint
```
git add .
git commit -m "backend API route with email storage and server-side validation"
```
Asigura-te ca adaugi `data/signups.json` in fisierul `.gitignore` — nu vrei sa faci commit la datele utilizatorilor:
```
echo "data/signups.json" >> .gitignore
git add .gitignore
git commit -m "ignore signup data file"
```
## Concluzia cheie
Tocmai ai construit o functionalitate full-stack. Datele circula din browserul utilizatorului, prin ruta ta API, intr-o baza de date (fisier JSON deocamdata). Acesta este acelasi sablon folosit de fiecare aplicatie din lume — si l-ai facut cu asistenta AI.
Checkpoint
Formularul tau de inscriere acum stocheaza date cu adevarat. Emailurile sunt validate atat pe client cat si pe server, duplicatele sunt respinse si totul e salvat intr-un fisier. Commit facut in Git. Urmeaza: construirea unui dashboard de admin pentru a-ti vedea datele.