Exista sute de limbaje de programare, framework-uri si unelte. Ca incepator, e paralizant. Pe care sa il inveti? Care e "cel mai bun"?
Iata scurtatura vibe coderului: alege un stack popular, bine sustinut si ramai cu el. Scopul nu e sa inveti fiecare unealta — e sa construiesti ceva real.
Stack-ul nostru (si de ce)
Concept
Un "tech stack" este combinatia de limbaje de programare, framework-uri si unelte folosite pentru a construi o aplicatie. Gandeste-te la el ca la alegerea ingredientelor inainte de a gati — nu ai nevoie de fiecare condiment din magazin, doar de cele potrivite pentru reteta ta.Next.js — Framework-ul tau de aplicatie
Next.js este un framework React pentru construirea aplicatiilor web. Un singur framework gestioneaza ambele:
- Frontend — ce vad utilizatorii in browser (pagini, butoane, formulare)
- Backend — logica de server care se intampla in spatele scenei (salvarea datelor, trimiterea emailurilor)
De ce Next.js? Comunitate uriasa, documentatie excelenta, iar Claude il cunoaste extrem de bine. Foloseste "componente" React (blocuri reutilizabile pentru interfata ta) si are routing integrat (fiecare pagina este un URL).
TypeScript — JavaScript cu parapete de siguranta
TypeScript este JavaScript cu adnotari de tip — indicii suplimentare care ajuta la detectarea erorilor inainte sa apara.
De ce TypeScript? Claude genereaza cod TypeScript semnificativ mai bun decat JavaScript simplu. Tipurile actioneaza ca un contract intre diferitele parti ale codului, asa ca atunci cand Claude scrie o parte, e mai putin probabil sa strice alta.
Nu trebuie sa inveti sintaxa TypeScript. Claude se ocupa de asta. Trebuie doar sa stii ca exista si ca detecteaza erori pentru tine in fundal.
Tailwind CSS — Stilizare simplificata
Tailwind CSS este un framework CSS bazat pe utilitati. In loc sa scrii fisiere de stil separate, adaugi clase direct la elementele HTML.
De ce Tailwind? Se citeste ca un limbaj prescurtat, iar Claude este incredibil de fluent in el.
Cateva exemple:
bg-blue-500inseamna "fundal albastru"text-lginseamna "text mare"p-4inseamna "padding pe toate laturile"flex items-centerinseamna "aranjaza elementele intr-un rand, centrate vertical"
DynamoDB — Baza ta de date in cloud (mai tarziu)
Amazon DynamoDB este baza de date serverless de la AWS. O vom adauga in Lectiile 9-10.
De ce DynamoDB? Nivel gratuit generos — 25GB de stocare si 200 de milioane de cereri pe luna, gratuit pentru totdeauna. Fara servere de gestionat. Datele sunt stocate ca documente flexibile de tip JSON.
Ce NU folosim (si de ce)
- Fara PHP, Ruby sau Java — nu pentru ca ar fi rele, ci pentru ca stack-ul nostru este optimizat pentru dezvoltare asistata de AI
- Fara WordPress — construim ceva personalizat si invatam cum functioneaza aplicatiile sub capota
- Fara Docker — prea multa complexitate pentru un prim proiect. Poate data viitoare.
Nota sincera
Nu exista un tech stack "cel mai bun". Exista compromisuri peste tot. Am ales acest stack pentru ca functioneaza extrem de bine cu dezvoltarea asistata de AI, are o comunitate imensa pentru depanare si ruleaza pe AWS Free Tier. Daca mai tarziu vrei sa explorezi Python, Go sau alte unelte, abilitatile de vibe coding pe care le inveti aici se transfera direct.Crearea proiectului
Acum hai sa cream efectiv proiectul nostru Next.js. Deschide Claude Code in folderul waitlist-wizard:
Incearca
In Claude Code, tasteaza: "Create a new Next.js project with TypeScript and Tailwind CSS in this folder. Use the app router."Claude va rula
npx create-next-app@latest cu flag-urile de configurare corecte. Dureaza aproximativ un minut.
Ce s-a creat
Dupa ce proiectul e generat, vei vedea o multime de fisiere noi. Iata cele importante:
| Fisier/Folder | Ce face |
|---|---|
app/ |
Aici traiesc paginile si rutele tale |
app/page.tsx |
Pagina principala a aplicatiei tale |
app/layout.tsx |
Layout-ul comun care inconjoara toate paginile |
public/ |
Fisiere statice (imagini, favicon) |
package.json |
Listeaza dependintele proiectului |
tailwind.config.ts |
Configuratia Tailwind CSS |
tsconfig.json |
Configuratia TypeScript |
Nu te ingrijora sa intelegi fiecare fisier. Claude stie ce face fiecare, si vei invata natural pe masura ce construiesti.
Rularea aplicatiei
Incearca
In terminal (sau intreaba-l pe Claude), ruleaza:npm run dev
Apoi deschide browserul la http://localhost:3000. Ar trebui sa vezi pagina de bun venit Next.js. Aplicatia ta ruleaza!
Pro Tip
Serverul de dezvoltare iti "urmareste" fisierele. Cand salvezi o modificare, browserul se actualizeaza automat — nu trebuie sa dai refresh manual. Acest ciclu de feedback instantaneu face vibe coding-ul sa para aproape magic.Git Checkpoint
Hai sa salvam progresul:
git add .
git commit -m "initialized next.js project with typescript and tailwind"