1~
2**Vibecoding** este o noua paradigma de dezvoltare software in care programatorul ghideaza un agent AI prin instructiuni in limbaj natural, lasand inteligenta artificiala sa scrie codul propriu-zis. Termenul a fost inventat de Andrej Karpathy (co-fondator OpenAI si fost Director de AI la Tesla) intr-un tweet celebru din februarie 2025: _"Exista un nou fel de programare pe care il numesc vibecoding, in care te lasi complet in voia vibratiilor, accepti exponentialele si uiti ca exista cod."_
3~
4In acest articol, vom vedea cum sa construim un demo complet si functional folosind **Claude Code** ca agent AI, **Supabase** ca backend (baza de date, autentificare, API) si **Vercel** pentru deployment  -  totul folosind exclusiv **nivelurile gratuite** ale acestor servicii.
5~
6## 1. Ce este Vibecoding si de ce este revolutionar
7~
8Vibecoding-ul reprezinta o schimbare fundamentala de paradigma in dezvoltarea software. In loc sa scrie cod linie cu linie, dezvoltatorul:
9~
101. **Descrie** ce doreste in limbaj natural.
112. **Agentul AI** genereaza codul complet.
123. **Dezvoltatorul** revizuieste, testeaza si itereaza.
13~
14### De ce functioneaza
15~
16- **Viteza**: un proiect care ar dura zile poate fi construit in ore.
17- **Accesibilitate**: chiar si dezvoltatorii mai putin experimentati pot construi produse functionale.
18- **Iteratie rapida**: poti testa idei si pivota mult mai rapid.
19- **Focus pe produs**: te concentrezi pe _ce_ in loc de _cum_.
20~
21```mermaid
22flowchart LR
23    A[Idea] --> B[Natural language prompt]
24    B --> C[Claude Code generates code]
25    C --> D[Review and test]
26    D --> E[Iteration]
27    E --> B
28    D --> F[Deploy to Vercel]
29```
30~
31### Cand sa folosesti Vibecoding
32~
33Vibecoding-ul este perfect pentru:
34~
35- **Demo-uri si MVP-uri**: construirea rapida a unui prototip pentru validarea unei idei.
36- **Hackathoane**: crearea unui produs functional in doar cateva ore.
37- **Proiecte secundare**: explorarea unor tehnologii noi fara a investi saptamani.
38- **Proof of Concept**: demonstrarea fezabilitatii tehnice pentru parti interesate sau investitori.
39~
40> **Atentie:** Vibecoding-ul este excelent pentru demo-uri si prototipuri. Pentru aplicatii de nivel productie cu cerinte ridicate de securitate si scalabilitate, o revizuire amanuntita a codului generat este inca esentiala.
41~
42## 2. Stack-ul tehnic: Claude Code + Supabase + Vercel
43~
44### Claude Code
45~
46Claude Code este agentul AI de programare al Anthropic. Functioneaza direct in terminalul tau si poate:
47~
48- Citi si intelege intreaga baza de cod.
49- Crea, modifica si sterge fisiere.
50- Executa comenzi in terminal.
51- Interactiona cu API-uri si servicii externe.
52- Gestiona versionarea cu Git.
53- Itera autonom asupra erorilor si bug-urilor.
54~
55```bash
56# Install Claude Code
57npm install -g @anthropic-ai/claude-code
58~
59# Start in a project directory
60cd my-project
61claude
62```
63~
64### Supabase (Nivel gratuit)
65~
66Supabase este o alternativa open-source la Firebase care ofera:
67~
68- **Baza de date PostgreSQL**: o baza de date relationala completa.
69- **Autentificare**: login cu email, Google, GitHub, etc.
70- **API-uri REST si Realtime**: generate automat din schema ta.
71- **Stocare**: pentru fisiere si imagini.
72- **Edge Functions**: functii serverless.
73~
74Nivelul gratuit include:
75~
76| Resursa | Limita gratuita |
77|----------|-----------|
78| Baza de date | 500 MB |
79| Stocare | 1 GB |
80| Latime de banda | 5 GB |
81| Invocari Edge Function | 500K/luna |
82| Utilizatori autentificati | Nelimitati |
83| Proiecte | 2 proiecte active |
84~
85### Vercel (Nivel gratuit)
86~
87Vercel este platforma perfecta de deployment pentru aplicatii Next.js:
88~
89- **Deployment automat** din GitHub.
90- **Preview deployments** pentru fiecare branch si PR.
91- **CDN global** pentru performanta optima.
92- **Serverless Functions** incluse.
93- **Analize de baza** gratuite.
94~
95Nivelul gratuit include:
96~
97| Resursa | Limita gratuita |
98|----------|-----------|
99| Latime de banda | 100 GB/luna |
100| Executie Serverless Function | 100 GB-ore/luna |
101| Build-uri | 6.000 minute/luna |
102| Proiecte | Nelimitate |
103| Deployments | Nelimitate |
104~
105## 3. Configurare initiala: Pregatirea mediului
106~
107### Cerinte preliminare
108~
109Inainte de a incepe, asigura-te ca ai:
110~
111- **Node.js 18+** instalat.
112- **Git** configurat.
113- Un cont **GitHub**.
114- Un cont **Supabase** (gratuit pe [supabase.com](https://supabase.com)).
115- Un cont **Vercel** (gratuit pe [vercel.com](https://vercel.com)).
116- **Claude Code** instalat (`npm install -g @anthropic-ai/claude-code`).
117~
118### Pasul 1: Creeaza proiectul
119~
120Deschide terminalul si porneste Claude Code:
121~
122```bash
123mkdir my-demo-app && cd my-demo-app
124claude
125```
126~
127Acum poti incepe sa dai instructiuni Claude Code in limbaj natural:
128~
129```
130You: Create a Next.js 15 project with App Router, TypeScript, Tailwind CSS,
131and shadcn/ui. Also initialize a Git repository.
132```
133~
134Claude Code va executa automat:
135~
136```bash
137npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir
138npx shadcn@latest init
139git init && git add . && git commit -m "Initial commit"
140```
141~
142### Pasul 2: Configureaza Supabase
143~
1441. Mergi la [supabase.com](https://supabase.com) si creeaza un proiect nou.
1452. Noteaza **URL-ul proiectului** si **cheia anon** din Settings > API.
1463. Intoarce-te la terminal cu Claude Code:
147~
148```
149You: Add Supabase to the project. Create a .env.local file with the variables
150NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Configure the
151Supabase client with SSR support for Next.js App Router.
152```
153~
154Claude Code va crea configuratia completa:
155~
156```typescript
157// src/lib/supabase/client.ts
158import { createBrowserClient } from '@supabase/ssr';
159~
160export function createClient() {
161  return createBrowserClient(
162    process.env.NEXT_PUBLIC_SUPABASE_URL!,
163    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
164  );
165}
166```
167~
168```typescript
169// src/lib/supabase/server.ts
170import { createServerClient } from '@supabase/ssr';
171import { cookies } from 'next/headers';
172~
173export async function createClient() {
174  const cookieStore = await cookies();
175~
176  return createServerClient(
177    process.env.NEXT_PUBLIC_SUPABASE_URL!,
178    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
179    {
180      cookies: {
181        getAll() {
182          return cookieStore.getAll();
183        },
184        setAll(cookiesToSet) {
185          cookiesToSet.forEach(({ name, value, options }) =>
186            cookieStore.set(name, value, options)
187          );
188        },
189      },
190    }
191  );
192}
193```
194~
195## 4. Construirea demo-ului: O aplicatie de gestionare a sarcinilor
196~
197Sa construim un demo concret: o **aplicatie de gestionare a sarcinilor** cu autentificare, CRUD complet si o interfata moderna.
198~
199### Defineste schema bazei de date
200~
201Da instructiuni Claude Code pentru a crea schema:
202~
203```
204You: Create a SQL migration for Supabase with the following tables:
205~
2061. profiles: id (uuid, FK to auth.users), username (text), avatar_url (text),
207   created_at
2082. projects: id (uuid), name (text), description (text), owner_id (uuid, FK
209   to profiles), created_at
2103. tasks: id (uuid), title (text), description (text), status (enum:
211   todo/in_progress/done), priority (enum: low/medium/high), project_id (uuid,
212   FK to projects), assigned_to (uuid, FK to profiles), due_date (timestamp),
213   created_at, updated_at
214~
215Enable Row Level Security on all tables and create appropriate policies.
216```
217~
218Claude Code va genera o migrare completa:
219~
220```sql
221-- Create enum types
222CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
223CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');
224~
225-- Profiles table
226CREATE TABLE profiles (
227  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
228  username TEXT UNIQUE,
229  avatar_url TEXT,
230  created_at TIMESTAMPTZ DEFAULT NOW()
231);
232~
233-- Projects table
234CREATE TABLE projects (
235  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
236  name TEXT NOT NULL,
237  description TEXT,
238  owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
239  created_at TIMESTAMPTZ DEFAULT NOW()
240);
241~
242-- Tasks table
243CREATE TABLE tasks (
244  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
245  title TEXT NOT NULL,
246  description TEXT,
247  status task_status DEFAULT 'todo',
248  priority task_priority DEFAULT 'medium',
249  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
250  assigned_to UUID REFERENCES profiles(id),
251  due_date TIMESTAMPTZ,
252  created_at TIMESTAMPTZ DEFAULT NOW(),
253  updated_at TIMESTAMPTZ DEFAULT NOW()
254);
255~
256-- Enable RLS
257ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
258ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
259ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;
260~
261-- Profiles policies
262CREATE POLICY "Users can view own profile"
263  ON profiles FOR SELECT USING (auth.uid() = id);
264CREATE POLICY "Users can update own profile"
265  ON profiles FOR UPDATE USING (auth.uid() = id);
266~
267-- Projects policies
268CREATE POLICY "Users can view own projects"
269  ON projects FOR SELECT USING (auth.uid() = owner_id);
270CREATE POLICY "Users can create projects"
271  ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);
272CREATE POLICY "Users can update own projects"
273  ON projects FOR UPDATE USING (auth.uid() = owner_id);
274CREATE POLICY "Users can delete own projects"
275  ON projects FOR DELETE USING (auth.uid() = owner_id);
276~
277-- Tasks policies
278CREATE POLICY "Users can view tasks in their projects"
279  ON tasks FOR SELECT USING (
280    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
281  );
282CREATE POLICY "Users can create tasks in their projects"
283  ON tasks FOR INSERT WITH CHECK (
284    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
285  );
286CREATE POLICY "Users can update tasks in their projects"
287  ON tasks FOR UPDATE USING (
288    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
289  );
290CREATE POLICY "Users can delete tasks in their projects"
291  ON tasks FOR DELETE USING (
292    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
293  );
294```
295~
296Poti rula aceasta migrare direct din panoul Supabase (SQL Editor) sau prin CLI.
297~
298### Genereaza tipuri TypeScript
299~
300```
301You: Generate TypeScript types from the Supabase database and save them to src/types/database.ts
302```
303~
304```bash
305npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts
306```
307~
308### Construieste interfata utilizatorului
309~
310Acum vine cea mai puternica parte a vibecoding-ului. Da instructiuni de nivel inalt lui Claude Code:
311~
312```
313You: Create a dashboard page for the task management app with:
314~
3151. Sidebar with navigation between projects
3162. Kanban view with 3 columns (Todo, In Progress, Done) with drag & drop
3173. Modal to create/edit tasks
3184. Header with user avatar and logout
3195. Modern design with shadcn/ui and Tailwind
320~
321Use data from Supabase with React Server Components where possible
322and Client Components only where interactivity is needed.
323```
324~
325Claude Code va construi intreaga interfata, componenta cu componenta.
326~
327### Adauga autentificarea
328~
329```
330You: Add a complete authentication system with:
331~
3321. Login page with email/password and GitHub login
3332. Registration page
3343. Middleware to protect authenticated routes
3354. Automatic redirect for unauthenticated users
3365. Automatic profile creation after registration
337```
338~
339Claude Code va configura middleware-ul Next.js si paginile de autentificare:
340~
341```typescript
342// src/middleware.ts
343import { createServerClient } from '@supabase/ssr';
344import { NextResponse, type NextRequest } from 'next/server';
345~
346export async function middleware(request: NextRequest) {
347  let supabaseResponse = NextResponse.next({ request });
348~
349  const supabase = createServerClient(
350    process.env.NEXT_PUBLIC_SUPABASE_URL!,
351    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
352    {
353      cookies: {
354        getAll() {
355          return request.cookies.getAll();
356        },
357        setAll(cookiesToSet) {
358          cookiesToSet.forEach(({ name, value }) =>
359            request.cookies.set(name, value)
360          );
361          supabaseResponse = NextResponse.next({ request });
362          cookiesToSet.forEach(({ name, value, options }) =>
363            supabaseResponse.cookies.set(name, value, options)
364          );
365        },
366      },
367    }
368  );
369~
370  const { data: { user } } = await supabase.auth.getUser();
371~
372  if (!user && !request.nextUrl.pathname.startsWith('/auth')) {
373    const url = request.nextUrl.clone();
374    url.pathname = '/auth/login';
375    return NextResponse.redirect(url);
376  }
377~
378  return supabaseResponse;
379}
380~
381export const config = {
382  matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],
383};
384```
385~
386## 5. Modele avansate de Vibecoding
387~
388### Prompting iterativ
389~
390Secretul vibecoding-ului eficient este **iteratia**. Nu incerca sa descrii totul intr-un singur prompt. Procedeaza pas cu pas:
391~
392```
393Pasul 1: "Create the base layout with header and sidebar"
394Pasul 2: "Add the project list in the sidebar with a button to create new ones"
395Pasul 3: "Create the Kanban view in the main area"
396Pasul 4: "Add drag & drop between columns"
397Pasul 5: "Implement the modal to create new tasks"
398Pasul 6: "Add toast notifications for user feedback"
399```
400~
401> **Sfat:** Cu cat promptul este mai specific si contextualizat, cu atat rezultatul este mai bun. Claude Code are acces la intreaga baza de cod, deci poate integra functionalitati noi in mod coerent.
402~
403### Gestionarea erorilor
404~
405Cand ceva nu functioneaza (si se va intampla), poti spune pur si simplu:
406~
407```
408You: I'm getting this error in the console: "TypeError: Cannot read property
409'map' of undefined" in the TaskList component. Fix it.
410```
411~
412Claude Code va analiza codul, va identifica problema si o va rezolva.
413~
414### Refactorizare cu AI
415~
416```
417You: The Dashboard component has become too large. Split it into smaller,
418reusable components while maintaining the same functionality.
419```
420~
421### Testare
422~
423```
424You: Add tests with Vitest for utility functions and Playwright tests for
425the authentication and task creation flow.
426```
427~
428## 6. Deploy pe Vercel: De la cod la lume
429~
430### Pasul 1: Push pe GitHub
431~
432```
433You: Create an appropriate .gitignore, commit everything, and push to a new
434GitHub repository called "my-demo-app".
435```
436~
437```bash
438git add .
439git commit -m "feat: complete task management demo"
440gh repo create my-demo-app --public --push --source=.
441```
442~
443### Pasul 2: Conecteaza Vercel
444~
4451. Mergi la [vercel.com](https://vercel.com) si apasa "Add New Project."
4462. Importa repository-ul GitHub pe care tocmai l-ai creat.
4473. Adauga variabilele de mediu:
448   - `NEXT_PUBLIC_SUPABASE_URL`
449   - `NEXT_PUBLIC_SUPABASE_ANON_KEY`
4504. Apasa "Deploy."
451~
452```mermaid
453flowchart LR
454    A[GitHub Push] --> B[Vercel Build]
455    B --> C[Automatic Deploy]
456    C --> D[Public URL]
457    D --> E[Global CDN]
458```
459~
460### Pasul 3: Configureaza un domeniu personalizat (Optional)
461~
462Vercel ofera un URL gratuit precum `my-demo-app.vercel.app`. Pentru un domeniu personalizat:
463~
464```
465You: Add the configuration for a custom domain in vercel.json
466```
467~
468### Preview Deployments
469~
470De fiecare data cand deschizi un Pull Request pe GitHub, Vercel va crea automat un **preview deployment** cu un URL unic. Perfect pentru a arata modificarile inainte de merge.
471~
472## 7. Optimizari pentru demo-ul tau
473~
474### Performanta
475~
476```
477You: Optimize the app's performance:
4781. Add loading states with Suspense and skeletons
4792. Implement caching with Next.js unstable_cache
4803. Optimize images with next/image
4814. Add SEO metadata for each page
482```
483~
484### Realtime cu Supabase
485~
486O functionalitate care impresioneaza intotdeauna in demo-uri este **realtime**:
487~
488```
489You: Add realtime synchronization for tasks using Supabase Realtime.
490When a user updates a task, all other users should see the change
491in real time without refreshing.
492```
493~
494```typescript
495'use client';
496~
497import { useEffect, useState } from 'react';
498import { createClient } from '@/lib/supabase/client';
499import type { Task } from '@/types/database';
500~
501export function useRealtimeTasks(projectId: string) {
502  const [tasks, setTasks] = useState<Task[]>([]);
503  const supabase = createClient();
504~
505  useEffect(() => {
506    const channel = supabase
507      .channel('tasks-changes')
508      .on(
509        'postgres_changes',
510        {
511          event: '*',
512          schema: 'public',
513          table: 'tasks',
514          filter: `project_id=eq.${projectId}`,
515        },
516        (payload) => {
517          if (payload.eventType === 'INSERT') {
518            setTasks((prev) => [...prev, payload.new as Task]);
519          } else if (payload.eventType === 'UPDATE') {
520            setTasks((prev) =>
521              prev.map((t) =>
522                t.id === payload.new.id ? (payload.new as Task) : t
523              )
524            );
525          } else if (payload.eventType === 'DELETE') {
526            setTasks((prev) =>
527              prev.filter((t) => t.id !== payload.old.id)
528            );
529          }
530        }
531      )
532      .subscribe();
533~
534    return () => {
535      supabase.removeChannel(channel);
536    };
537  }, [projectId, supabase]);
538~
539  return tasks;
540}
541```
542~
543### Mod inchis (Dark Mode)
544~
545```
546You: Add dark mode support with a toggle in the header.
547Use Tailwind dark classes and save the preference in localStorage.
548```
549~
550## 8. Bune practici pentru Vibecoding eficient
551~
552### 1. Fii specific in prompt-uri
553~
554```
555❌ "Make a nice page"
556✅ "Create a landing page with a hero section with a purple-blue gradient,
557   a features section with 3 cards with icons, and an orange CTA button"
558```
559~
560### 2. Ofera context
561~
562```
563❌ "Add authentication"
564✅ "Add authentication with Supabase Auth. The project uses Next.js 15 App
565   Router with TypeScript. I want email/password login and OAuth with GitHub.
566   Use the SSR pattern with @supabase/ssr"
567```
568~
569### 3. Itereaza in pasi mici
570~
571Nu incerca sa construiesti totul intr-un singur prompt. Procedeaza incremental:
572~
5731. Layout de baza
5742. O functionalitate pe rand
5753. Stilizare si finisare
5764. Gestionarea erorilor
5775. Testare
578~
579### 4. Revizuieste codul generat
580~
581Vibecoding nu inseamna sa nu citesti codul. Revizuieste intotdeauna:
582~
583- **Securitate**: politici RLS, validarea input-ului, sanitizarea datelor.
584- **Performanta**: interogari N+1, componente client-side inutile.
585- **Bune practici**: structura proiectului, conventii de denumire.
586~
587### 5. Foloseste Git strategic
588~
589```
590You: Commit the changes with a descriptive message after each completed feature.
591```
592~
593Acest lucru iti permite sa revii la o versiune anterioara daca ceva merge prost.
594~
595## 9. Costuri: Este totul cu adevarat gratuit?
596~
597Iata o defalcare a costurilor pentru fiecare serviciu:
598~
599| Serviciu | Plan gratuit | Cand platesti |
600|---------|-----------|-------------|
601| **Claude Code** | Necesita un plan Anthropic (de la $20/luna) sau cheie API | Imediat, dar valoarea este enorma |
602| **Supabase** | Nivel gratuit generos (2 proiecte, 500MB DB) | Dincolo de limitele nivelului gratuit |
603| **Vercel** | Nivel gratuit pentru proiecte personale | Pentru echipe sau uz comercial |
604| **GitHub** | Gratuit pentru repo-uri publice si private | Functionalitati Enterprise |
605~
606> **Nota:** Claude Code necesita un abonament sau credite API, dar randamentul investitiei in termeni de viteza de dezvoltare este extraordinar. Pentru un demo sau MVP, costul total este in jurul a $20.
607~
608### Alternative AI gratuite
609~
610Daca vrei sa mentii costurile la zero absolut, poti folosi:
611~
612- **Cursor** (nivel gratuit cu limitari).
613- **GitHub Copilot** (gratuit pentru studenti si open source).
614- **Codeium/Windsurf** (nivel gratuit generos).
615~
616## 10. De la demo la produs: Pasii urmatori
617~
618Odata ce demo-ul tau este live, iata cum sa procedezi:
619~
620```mermaid
621flowchart TD
622    A[Live Demo] --> B{User Feedback}
623    B --> C[Product Iteration]
624    C --> D[Product-Market Fit]
625    D --> E[Scaling]
626    E --> F[Supabase Pro Plan]
627    E --> G[Vercel Pro Plan]
628    E --> H[Custom Domain]
629```
630~
6311. **Colecteaza feedback**: partajeaza demo-ul cu utilizatori potentiali si aduna opinii.
6322. **Itereaza rapid**: foloseste vibecoding pentru a implementa modificarile cerute.
6333. **Monitorizeaza metrici**: Vercel Analytics si Supabase Dashboard iti ofera date esentiale.
6344. **Scaleaza cand este necesar**: treci la planuri platite doar cand ai validat cererea.
635~
636~
637## Concluzie
638~
639Vibecoding-ul cu Claude Code, Supabase si Vercel reprezinta o combinatie puternica pentru construirea demo-urilor si MVP-urilor in timp record. Ceea ce obisnuia sa dureze saptamani de dezvoltare poate fi acum realizat in doar cateva ore, cu un nivel surprinzator de ridicat de calitate.
640~
641Cheia este sa abordezi vibecoding-ul cu mentalitatea potrivita: nu este vorba despre "a nu sti sa programezi", ci despre **amplificarea capabilitatilor tale** cu instrumente AI. Cu cat cunosti mai bine tehnologiile de baza (React, SQL, autentificare, deployment), cu atat vei fi mai eficient in ghidarea agentului AI catre rezultatul dorit.
642~
643Viitorul dezvoltarii software este aici, iar costul de a incepe nu a fost niciodata mai mic. Creeaza-ti demo-ul, valideaza-l cu utilizatori reali si construieste urmatorul mare produs.
644~
645> **Lista de verificare pentru primul tau demo:**
646>
647> - [x] Claude Code instalat si configurat
648> - [x] Proiect Supabase creat cu schema bazei de date
649> - [x] Proiect Next.js initializat cu shadcn/ui
650> - [x] Autentificare configurata
651> - [x] CRUD complet implementat
652> - [x] UI modern si responsiv
653> - [x] Deployment pe Vercel
654> - [x] URL partajabil gata pentru feedback
655~