Vibe Coding Training

Why this technical knowledge matters

You might think the technical side does not concern you. You want a tool that works, no matter how. That stance carries a major risk: dependency.

Imagine you build your client-management application on Lovable. Everything works perfectly for six months. Then Lovable triples its prices, or pivots to another market, or shuts down. If you have no idea what your application is made of, you lose everything. If you understand that your application breaks down into separable building blocks (the interface on one side, the data on the other), you know you can rebuild the interface elsewhere while keeping the essential part: your data.

This minimal knowledge is not optional. It is your insurance against proprietary lock-in.

The four components of a web application

The front-end refers to everything the user sees and interacts with: the buttons, the forms, the colors, the layout of elements on screen. When you describe "I want a blue button in the top right that shows the list of clients", you are talking about the front-end. This layer is the most visible but also the most easily replaceable. Losing your front-end is annoying; rebuilding it takes a few hours.

The back-end is the invisible engine of your application. It stores the data (who your clients are, which cases you have opened, the history of exchanges), manages authentication (who is allowed to access what), and runs the business logic (when a case has been closed for a year, archive it automatically). The back-end is the precious part. Losing your back-end means losing your data. Rebuilding it is then impossible.

The integrations connect your application to the outside world. Stripe to collect payments, Resend to send emails, the Légifrance API to query the texts of law. Each integration adds capabilities but also complexity and potential points of failure.

The automations keep your application running without human intervention. Sending a reminder 24 hours before a limitation deadline, generating a monthly activity report, archiving cases inactive for two years.

To generate the code

The market for vibe coding tools is evolving at a speed that quickly renders any exhaustive list obsolete. Rather than an inventory, here are the main categories and their characteristics.

Visual generators like Lovable and Bolt excel at rapid prototypes. You describe your application in a few sentences, and it appears in a few minutes. The interface is intuitive, the results often impressive for simple applications. The limit appears as soon as you want something custom or complex logic.

Augmented editors like Cursor are aimed at those who want to go further. Cursor is a code editor where AI assists your work rather than replacing it entirely. You see the code being built, you can modify it, understand it, version it.

Command-line agents like Claude Code represent the most powerful approach for ambitious projects. Claude Code works directly in your terminal: you describe what you want, the agent generates the code, runs it, identifies the errors, fixes them, tests again, autonomously.

Installing Cursor

Cursor is a code editor based on VS Code, augmented by artificial intelligence. Installation takes less than five minutes.

1. Go to cursor.com
2. Click "Download" and choose your system (Mac, Windows or Linux)
3. Launch the downloaded installer
4. On first launch, sign in with your Google or GitHub account
5. Cursor offers to import your existing VS Code extensions: accept if you have any

The free plan includes 2,000 completions per month and 50 "slow" requests to the premium model. For intensive use, the Pro subscription costs $20/month.

Installing Claude Code

Claude Code is a command-line agent developed by Anthropic. It runs in your terminal and can create, modify and execute code autonomously.

Prerequisites

• Node.js 18+: check with node --version in your terminal
• An Anthropic account with an API key (console.anthropic.com)

Installation on Mac/Linux

Open your terminal and run:

npm install -g @anthropic-ai/claude-code

Then configure your API key:

export ANTHROPIC_API_KEY="sk-ant-your-key-here"

To make this configuration permanent, add the line above to your ~/.zshrc file (Mac) or ~/.bashrc (Linux).

Installation on Windows

Open PowerShell as an administrator and run:

npm install -g @anthropic-ai/claude-code

For the API key, add a system environment variable named ANTHROPIC_API_KEY with your key as the value.

First launch

Navigate to your project folder and launch Claude Code:

cd my-project
claude

The agent starts and waits for your instructions in natural language. Type your request, press Enter, and watch Claude work.

The recommended technical stack

To store the data: Supabase

In the current landscape, Supabase stands out as the obvious choice for vibe coding projects aimed at the European market.

• A generous free plan: 500 MB of database, 1 GB of file storage, unlimited authentication.
• Open source: If the company shut down tomorrow, the software would keep existing.
• Servers in Europe: Frankfurt or Ireland, simplified GDPR compliance.

The applicable legal framework

You collect personal data: names, emails, phone numbers, the content of cases. You are a data controller within the meaning of the GDPR. Theoretical sanctions reach 20 million euros or 4% of annual worldwide turnover. For a lawyer, disciplinary risk is added on top.

The seven concrete obligations

1. Informing users: an accessible privacy policy, complete legal notices, a cookie banner if you use analytics.
2. Explicit consent: separate, non-pre-ticked boxes. Never a single "I accept everything" box.
3. Data location: be sure to select the "EU (Frankfurt)" region when creating your Supabase project.
4. Data security: encryption in transit (HTTPS), encryption at rest, robust authentication, Row Level Security.
5. Rights of individuals: consultation, export, modification, deletion. These features are not optional.
6. Record of processing activities: a document listing each processing activity with its purpose, legal basis and retention periods.
7. Breach notification: alert the data protection authority within 72 hours of discovering a security breach.

The fundamental principle

The correlation between the precision of your request and the quality of the result is direct and measurable. A vague prompt generates a rough application that will need ten rounds of correction. A precise prompt produces a usable result in two or three iterations.

The structure that works

Six elements make up an effective prompt:

1. Context: who you are, the setting in which you work
2. Objective: one sentence summarizing what the application must accomplish
3. Features: what the application must do concretely
4. Technical constraints: Supabase, magic-link auth, data in Europe...
5. Design: style, color palette, inspirations
6. Exclusions: what you do NOT want in this version

A comparative example

The prompts that follow have been refined through successive iterations to produce functional code in the majority of cases. They assume the use of Claude Code or an equivalent tool.

Magic-link authentication

Implement an authentication system with Supabase using magic links exclusively.

The user journey:
- The user lands on /login
- They enter their email in a single field
- They receive an email containing a sign-in link valid for 1 hour
- By clicking the link, they are authenticated and redirected to /account
- Their session persists even after closing the browser

Pages to create:
- /login: email form + confirmation message after sending
- /account: a protected page showing "Welcome [email]" and a sign-out button
- Any attempt to access /account without a session redirects to /login

Technical aspects:
- Create a useAuth() hook centralizing all the authentication logic
- While checking the session on load, show a loading indicator
- Error messages must be in English and easy to understand

Supabase credentials:
- URL: [YOUR_URL]
- Public key: [YOUR_KEY]

A secure database structure

Generate the SQL code to create the following tables in Supabase. Each table must include Row Level Security policies allowing each user to see only their own data.

Table "clients":
This table stores contact information. A client belongs to a single user of the application.
- Unique identifier (automatically generated UUID)
- Creation date (automatic)
- Full name (required)
- Email address (required, unique per user, validated format)
- Phone number (optional)
- Status (required: prospect, active_client, former_client)
- Free-text notes (optional, long text)
- Reference to the owning user (required)

Table "cases":
A case belongs to a single client. A client can have several cases.
- Unique identifier
- Creation date
- Reference to the relevant client
- Case title (required)
- Detailed description (optional)
- Opening date (required)
- Closing date (optional)
- Status (open, in_progress, closed, abandoned)
- Reference to the owning user

Add:
- Referential integrity constraints (deleting a client = deleting their cases)
- An index on the email field of the clients table
- An index on the status field of the cases table

Also generate robust RLS policies. Explicitly enable RLS on each table and create policies for SELECT, INSERT, UPDATE and DELETE that verify that auth.uid() matches the record's user_id.

A complete management interface

Create a complete management interface for the existing "clients" table in Supabase.

Main table:
- Columns: name, email, phone, status, creation date
- Pagination: 25 clients per page with navigation and total count
- Search: a bar filtering instantly on name and email (300ms debounce)
- Filtering: a dropdown by status (all, prospect, active_client, former_client)
- Sorting: clicking a header sorts by that column (ascending then descending)

Actions:
- A "New client" button opening a form in a modal. Validate the email format and the required fields before submission.
- An "Edit" button on each row opening the same pre-filled modal.
- A "Delete" button asking for confirmation before deletion.
- An "Export CSV" button downloading the visible data (taking filters into account).

States:
- Initial loading: a table skeleton
- Network error: an explicit message + a "Retry" button
- After a successful action: a notification for 3 seconds

Supabase credentials: [URL] and [KEY]

Technical GDPR compliance

Add the mandatory GDPR features to the application.

A "My personal data" page accessible from the profile:

"View" section:
A table listing all the data stored about the user, organized by category: account information (email, signup date), created data (number of clients, number of cases).

"Export" section:
A "Download all my data" button generating a structured JSON file containing: profile, clients, cases, documents (metadata only). Keys in English, readable format.

"Delete my account" section:
A multi-step process:
1. An explanation of what will be deleted
2. Typing the word "DELETE" to confirm
3. A confirmation email with a cancellation link valid for 30 days
4. Marking the account as "pending_deletion"
5. The option to cancel during 30 days
6. Permanent deletion via a scheduled task after the delay

A "deletion_requests" table for tracking.

Accessing official French legal sources

A legal application gains value when it can directly query the texts of law, case law or collective agreements. The MCP Factory provides unified access to all the French legal databases for 12 € a month: Légifrance, case law from the Cour de cassation and the courts of appeal, collective agreements, BOSS, company data via Pappers.

A severance-pay calculator

Create a severance-pay calculator.

Form:
- Reference salary: average monthly gross over the last 12 or 3 months (whichever is more favorable)
- Seniority: years and months with the company
- Collective agreement: a dropdown of the main ones (Syntec, Metallurgy, Retail trade, Construction) + an "Other" option
- Grounds: personal, economic, unfitness
- Employee's age (for any increases)

Calculations:
- Statutory indemnity under article L. 1234-9 of the French Labor Code: 1/4 month per year up to 10 years, 1/3 beyond
- Contractual indemnity if applicable
- A comparison indicating the most favorable amount

Result:
- Detail of each calculation with legal references
- An explicit recommendation
- Warnings if manual checks are needed

A presentable PDF export with references and space for notes.

A limitation-deadlines dashboard

Create a dashboard to track limitation deadlines.

Entering a case:
- Name and internal reference
- Client (selection or quick creation)
- Type of litigation with an automatic deadline: contractual liability (5 years), tortious liability (5 years), employment wages (2 years), dismissal (12 months), consumer (2 years)
- Date of the triggering event
- Notes

Main view:
- A list sorted by urgency (nearest deadline first)
- Color coding: green (>30 days), orange (15-30 days), red (<15 days)
- A counter of the cases requiring action within 30 days

Calendar view:
- A monthly display with deadlines positioned
- Navigation between months

Alerts:
- An automatic email at D-30, D-15, D-7
- Content: case name, client, due date, direct link

Multi-user:
- Each lawyer sees their cases
- Partners see all cases

Supabase backend with emails via Resend.

These mistakes are not theoretical. They recur systematically among beginners in vibe coding and can cost days of work.

The two-hour prototype

First half-hour: clarify the intent. Write in one sentence what your application must enable. If that sentence contains "and" more than once, you are aiming too broad.

Second half-hour: write the structured prompt. This time is not wasted; it saves hours of iteration.

Third half-hour: generate and test. Limit yourself to four iterations. Ignore aesthetic details.

Last half-hour: connect Supabase. Create the minimal table. Test with realistic data.

From prototype to viable product: 4 weeks

To conclude

Vibe coding reshuffles the deck. For decades, building an application required either rare technical skills or a budget to buy them. That barrier has dropped considerably.

The risks are real. Documented security incidents show that generated code can be functional without being safe. For applications handling client data, professional secrecy and ethical responsibility impose heightened vigilance.

But the opportunities are just as tangible. A lawyer who masters these tools can build, in a few hours, custom applications that even a substantial budget could not have produced five years ago. Technological autonomy is becoming accessible to anyone willing to learn it.

About the author

Rédigé par

Pierre Colliot

Fondateur Zevra • Expert Legal Tech & Vibe Coding

Entrepreneur digital depuis 2014, spécialisé en Legal Tech et IA pour avocats. Hôte du podcast Quasar. Diplômé KEDGE Business School. Pratique le vibe coding quotidiennement depuis début 2024 avec +50 projets livrés pour des cabinets d'avocats et entreprises.

• KEDGE Business School — Entrepreneuriat & Marketing (2013-2017)
• 13 000+ followers LinkedIn
• Fondateur Supernovia.io, Zevra, bl-nk.fr

+50

projets vibe coding

10+ ans

d'expérience

13K+

followers LinkedIn

Newsletter LEGAL | IA | TECH

La révolution legaltech arrive — rejoignez 200+ abonnés