Cum sa construiesti un demo cu Claude Code: Vibecoding cu Supabase si Vercel

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."

In 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.

1. Ce este Vibecoding si de ce este revolutionar

Vibecoding-ul reprezinta o schimbare fundamentala de paradigma in dezvoltarea software. In loc sa scrie cod linie cu linie, dezvoltatorul:

1. Descrie ce doreste in limbaj natural.
2. Agentul AI genereaza codul complet.
3. Dezvoltatorul revizuieste, testeaza si itereaza.

De ce functioneaza

• Viteza: un proiect care ar dura zile poate fi construit in ore.
• Accesibilitate: chiar si dezvoltatorii mai putin experimentati pot construi produse functionale.
• Iteratie rapida: poti testa idei si pivota mult mai rapid.
• Focus pe produs: te concentrezi pe ce in loc de cum.

Cand sa folosesti Vibecoding

Vibecoding-ul este perfect pentru:

• Demo-uri si MVP-uri: construirea rapida a unui prototip pentru validarea unei idei.
• Hackathoane: crearea unui produs functional in doar cateva ore.
• Proiecte secundare: explorarea unor tehnologii noi fara a investi saptamani.
• Proof of Concept: demonstrarea fezabilitatii tehnice pentru parti interesate sau investitori.

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.

2. Stack-ul tehnic: Claude Code + Supabase + Vercel

Claude Code

Claude Code este agentul AI de programare al Anthropic. Functioneaza direct in terminalul tau si poate:

• Citi si intelege intreaga baza de cod.
• Crea, modifica si sterge fisiere.
• Executa comenzi in terminal.
• Interactiona cu API-uri si servicii externe.
• Gestiona versionarea cu Git.
• Itera autonom asupra erorilor si bug-urilor.

# Install Claude Code
npm install -g @anthropic-ai/claude-code

# Start in a project directory
cd my-project
claude

Supabase (Nivel gratuit)

Supabase este o alternativa open-source la Firebase care ofera:

• Baza de date PostgreSQL: o baza de date relationala completa.
• Autentificare: login cu email, Google, GitHub, etc.
• API-uri REST si Realtime: generate automat din schema ta.
• Stocare: pentru fisiere si imagini.
• Edge Functions: functii serverless.

Nivelul gratuit include:

Vercel (Nivel gratuit)

Vercel este platforma perfecta de deployment pentru aplicatii Next.js:

• Deployment automat din GitHub.
• Preview deployments pentru fiecare branch si PR.
• CDN global pentru performanta optima.
• Serverless Functions incluse.
• Analize de baza gratuite.

Nivelul gratuit include:

3. Configurare initiala: Pregatirea mediului

Cerinte preliminare

Inainte de a incepe, asigura-te ca ai:

• Node.js 18+ instalat.
• Git configurat.
• Un cont GitHub.
• Un cont Supabase (gratuit pe supabase.com).
• Un cont Vercel (gratuit pe vercel.com).
• Claude Code instalat (npm install -g @anthropic-ai/claude-code).

Pasul 1: Creeaza proiectul

Deschide terminalul si porneste Claude Code:

mkdir my-demo-app && cd my-demo-app
claude

Acum poti incepe sa dai instructiuni Claude Code in limbaj natural:

You: Create a Next.js 15 project with App Router, TypeScript, Tailwind CSS,
and shadcn/ui. Also initialize a Git repository.

Claude Code va executa automat:

npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir
npx shadcn@latest init
git init && git add . && git commit -m "Initial commit"

Pasul 2: Configureaza Supabase

1. Mergi la supabase.com si creeaza un proiect nou.
2. Noteaza URL-ul proiectului si cheia anon din Settings > API.
3. Intoarce-te la terminal cu Claude Code:

You: Add Supabase to the project. Create a .env.local file with the variables
NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Configure the
Supabase client with SSR support for Next.js App Router.

Claude Code va crea configuratia completa:

// src/lib/supabase/client.ts
import { createBrowserClient } from '@supabase/ssr';

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  );
}

// src/lib/supabase/server.ts
import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';

export async function createClient() {
  const cookieStore = await cookies();

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            cookieStore.set(name, value, options)
          );
        },
      },
    }
  );
}

4. Construirea demo-ului: O aplicatie de gestionare a sarcinilor

Sa construim un demo concret: o aplicatie de gestionare a sarcinilor cu autentificare, CRUD complet si o interfata moderna.

Defineste schema bazei de date

Da instructiuni Claude Code pentru a crea schema:

You: Create a SQL migration for Supabase with the following tables:

1. profiles: id (uuid, FK to auth.users), username (text), avatar_url (text),
   created_at
2. projects: id (uuid), name (text), description (text), owner_id (uuid, FK
   to profiles), created_at
3. tasks: id (uuid), title (text), description (text), status (enum:
   todo/in_progress/done), priority (enum: low/medium/high), project_id (uuid,
   FK to projects), assigned_to (uuid, FK to profiles), due_date (timestamp),
   created_at, updated_at

Enable Row Level Security on all tables and create appropriate policies.

Claude Code va genera o migrare completa:

-- Create enum types
CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');

-- Profiles table
CREATE TABLE profiles (
  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
  username TEXT UNIQUE,
  avatar_url TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Projects table
CREATE TABLE projects (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  description TEXT,
  owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Tasks table
CREATE TABLE tasks (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT,
  status task_status DEFAULT 'todo',
  priority task_priority DEFAULT 'medium',
  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
  assigned_to UUID REFERENCES profiles(id),
  due_date TIMESTAMPTZ,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Enable RLS
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;

-- Profiles policies
CREATE POLICY "Users can view own profile"
  ON profiles FOR SELECT USING (auth.uid() = id);
CREATE POLICY "Users can update own profile"
  ON profiles FOR UPDATE USING (auth.uid() = id);

-- Projects policies
CREATE POLICY "Users can view own projects"
  ON projects FOR SELECT USING (auth.uid() = owner_id);
CREATE POLICY "Users can create projects"
  ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);
CREATE POLICY "Users can update own projects"
  ON projects FOR UPDATE USING (auth.uid() = owner_id);
CREATE POLICY "Users can delete own projects"
  ON projects FOR DELETE USING (auth.uid() = owner_id);

-- Tasks policies
CREATE POLICY "Users can view tasks in their projects"
  ON tasks FOR SELECT USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can create tasks in their projects"
  ON tasks FOR INSERT WITH CHECK (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can update tasks in their projects"
  ON tasks FOR UPDATE USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can delete tasks in their projects"
  ON tasks FOR DELETE USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );

Poti rula aceasta migrare direct din panoul Supabase (SQL Editor) sau prin CLI.

Genereaza tipuri TypeScript

You: Generate TypeScript types from the Supabase database and save them to src/types/database.ts

npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts

Construieste interfata utilizatorului

Acum vine cea mai puternica parte a vibecoding-ului. Da instructiuni de nivel inalt lui Claude Code:

You: Create a dashboard page for the task management app with:

1. Sidebar with navigation between projects
2. Kanban view with 3 columns (Todo, In Progress, Done) with drag & drop
3. Modal to create/edit tasks
4. Header with user avatar and logout
5. Modern design with shadcn/ui and Tailwind

Use data from Supabase with React Server Components where possible
and Client Components only where interactivity is needed.

Claude Code va construi intreaga interfata, componenta cu componenta.

Adauga autentificarea

You: Add a complete authentication system with:

1. Login page with email/password and GitHub login
2. Registration page
3. Middleware to protect authenticated routes
4. Automatic redirect for unauthenticated users
5. Automatic profile creation after registration

Claude Code va configura middleware-ul Next.js si paginile de autentificare:

// src/middleware.ts
import { createServerClient } from '@supabase/ssr';
import { NextResponse, type NextRequest } from 'next/server';

export async function middleware(request: NextRequest) {
  let supabaseResponse = NextResponse.next({ request });

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) =>
            request.cookies.set(name, value)
          );
          supabaseResponse = NextResponse.next({ request });
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
          );
        },
      },
    }
  );

  const { data: { user } } = await supabase.auth.getUser();

  if (!user && !request.nextUrl.pathname.startsWith('/auth')) {
    const url = request.nextUrl.clone();
    url.pathname = '/auth/login';
    return NextResponse.redirect(url);
  }

  return supabaseResponse;
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],
};

5. Modele avansate de Vibecoding

Prompting iterativ

Secretul vibecoding-ului eficient este iteratia. Nu incerca sa descrii totul intr-un singur prompt. Procedeaza pas cu pas:

Pasul 1: "Create the base layout with header and sidebar"
Pasul 2: "Add the project list in the sidebar with a button to create new ones"
Pasul 3: "Create the Kanban view in the main area"
Pasul 4: "Add drag & drop between columns"
Pasul 5: "Implement the modal to create new tasks"
Pasul 6: "Add toast notifications for user feedback"

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.

Gestionarea erorilor

Cand ceva nu functioneaza (si se va intampla), poti spune pur si simplu:

You: I'm getting this error in the console: "TypeError: Cannot read property
'map' of undefined" in the TaskList component. Fix it.

Claude Code va analiza codul, va identifica problema si o va rezolva.

Refactorizare cu AI

You: The Dashboard component has become too large. Split it into smaller,
reusable components while maintaining the same functionality.

Testare

You: Add tests with Vitest for utility functions and Playwright tests for
the authentication and task creation flow.

6. Deploy pe Vercel: De la cod la lume

Pasul 1: Push pe GitHub

You: Create an appropriate .gitignore, commit everything, and push to a new
GitHub repository called "my-demo-app".

git add .
git commit -m "feat: complete task management demo"
gh repo create my-demo-app --public --push --source=.

Pasul 2: Conecteaza Vercel

1. Mergi la vercel.com si apasa "Add New Project."
2. Importa repository-ul GitHub pe care tocmai l-ai creat.
3. Adauga variabilele de mediu:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. Apasa "Deploy."

Pasul 3: Configureaza un domeniu personalizat (Optional)

Vercel ofera un URL gratuit precum my-demo-app.vercel.app. Pentru un domeniu personalizat:

You: Add the configuration for a custom domain in vercel.json

Preview Deployments

De 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.

7. Optimizari pentru demo-ul tau

Performanta

You: Optimize the app's performance:
1. Add loading states with Suspense and skeletons
2. Implement caching with Next.js unstable_cache
3. Optimize images with next/image
4. Add SEO metadata for each page

Realtime cu Supabase

O functionalitate care impresioneaza intotdeauna in demo-uri este realtime:

You: Add realtime synchronization for tasks using Supabase Realtime.
When a user updates a task, all other users should see the change
in real time without refreshing.

'use client';

import { useEffect, useState } from 'react';
import { createClient } from '@/lib/supabase/client';
import type { Task } from '@/types/database';

export function useRealtimeTasks(projectId: string) {
  const [tasks, setTasks] = useState<Task[]>([]);
  const supabase = createClient();

  useEffect(() => {
    const channel = supabase
      .channel('tasks-changes')
      .on(
        'postgres_changes',
        {
          event: '*',
          schema: 'public',
          table: 'tasks',
          filter: `project_id=eq.${projectId}`,
        },
        (payload) => {
          if (payload.eventType === 'INSERT') {
            setTasks((prev) => [...prev, payload.new as Task]);
          } else if (payload.eventType === 'UPDATE') {
            setTasks((prev) =>
              prev.map((t) =>
                t.id === payload.new.id ? (payload.new as Task) : t
              )
            );
          } else if (payload.eventType === 'DELETE') {
            setTasks((prev) =>
              prev.filter((t) => t.id !== payload.old.id)
            );
          }
        }
      )
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, [projectId, supabase]);

  return tasks;
}

Mod inchis (Dark Mode)

You: Add dark mode support with a toggle in the header.
Use Tailwind dark classes and save the preference in localStorage.

8. Bune practici pentru Vibecoding eficient

1. Fii specific in prompt-uri

❌ "Make a nice page"
✅ "Create a landing page with a hero section with a purple-blue gradient,
   a features section with 3 cards with icons, and an orange CTA button"

2. Ofera context

❌ "Add authentication"
✅ "Add authentication with Supabase Auth. The project uses Next.js 15 App
   Router with TypeScript. I want email/password login and OAuth with GitHub.
   Use the SSR pattern with @supabase/ssr"

3. Itereaza in pasi mici

Nu incerca sa construiesti totul intr-un singur prompt. Procedeaza incremental:

1. Layout de baza
2. O functionalitate pe rand
3. Stilizare si finisare
4. Gestionarea erorilor
5. Testare

4. Revizuieste codul generat

Vibecoding nu inseamna sa nu citesti codul. Revizuieste intotdeauna:

• Securitate: politici RLS, validarea input-ului, sanitizarea datelor.
• Performanta: interogari N+1, componente client-side inutile.
• Bune practici: structura proiectului, conventii de denumire.

5. Foloseste Git strategic

You: Commit the changes with a descriptive message after each completed feature.

Acest lucru iti permite sa revii la o versiune anterioara daca ceva merge prost.

9. Costuri: Este totul cu adevarat gratuit?

Iata o defalcare a costurilor pentru fiecare serviciu:

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.

Alternative AI gratuite

Daca vrei sa mentii costurile la zero absolut, poti folosi:

• Cursor (nivel gratuit cu limitari).
• GitHub Copilot (gratuit pentru studenti si open source).
• Codeium/Windsurf (nivel gratuit generos).

10. De la demo la produs: Pasii urmatori

Odata ce demo-ul tau este live, iata cum sa procedezi:

1. Colecteaza feedback: partajeaza demo-ul cu utilizatori potentiali si aduna opinii.
2. Itereaza rapid: foloseste vibecoding pentru a implementa modificarile cerute.
3. Monitorizeaza metrici: Vercel Analytics si Supabase Dashboard iti ofera date esentiale.
4. Scaleaza cand este necesar: treci la planuri platite doar cand ai validat cererea.

Concluzie

Vibecoding-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.

Cheia 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.

Viitorul 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.

Lista de verificare pentru primul tau demo:

• Claude Code instalat si configurat
• Proiect Supabase creat cu schema bazei de date
• Proiect Next.js initializat cu shadcn/ui
• Autentificare configurata
• CRUD complet implementat
• UI modern si responsiv
• Deployment pe Vercel
• URL partajabil gata pentru feedback