How to vibe codeBaserow

Prerequisites

• Dockerfree

  Required to run local PostgreSQL and Redis instances for development

• Pythonfree

  Backend runtime environment for Django and Django REST Framework

• Node.jsfree

  Frontend build tooling for the React or Vue interface

• GitHubfree

  Source code management and version control

AI coding tools

• Claude Code

  Best-in-class agent for multi-file backend and frontend scaffolding across a complex Django/React codebase

• Cursor

  Ideal for fine-tuning the dense spreadsheet UI, keyboard shortcuts, and cell navigation

Build guide

1. 01Initialize Django Project & Core Database Models

   Set up a Django project with Django REST Framework and PostgreSQL. Define models for Workspaces, Databases, Tables, and Fields using a JSON metadata structure to store user-defined column configurations.

   Initialize a Django project named 'baserow_clone' with Django REST Framework and PostgreSQL configured in settings.py using environment variables. Create core models: Workspace, Database, Table, and Field. The Field model must include a 'text_sub_type' or 'field_type' string field and a 'options' JSONField to store custom configurations like select dropdown choices or number decimal places. Include standard UUID primary keys, timestamps, and foreign key relationships. Write comprehensive pytest unit tests verifying workspace creation, table nesting under databases, and dynamic field definition storage.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Build Dynamic Row Storage and CRUD API

   Implement a generic row storage architecture where user table data is safely ingested, validated against field metadata, and exposed through a high-performance REST API.

   Implement a dynamic row storage architecture in Django for our no-code database. Create a 'Row' model linked to a Table, storing cell values in a flexible JSONField where keys correspond to Field UUIDs. Write a custom DRF Serializer and Viewset that validates incoming row mutations against the parent Table's defined Field schemas (e.g., ensuring number fields contain valid numbers, date fields match ISO formats). Add API endpoints for bulk row creation, filtering, sorting, and pagination. Write integration tests covering invalid type submissions and multi-field filtering.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Scaffold Next.js Spreadsheet Grid Interface

   Create a responsive frontend spreadsheet grid using Next.js, Tailwind CSS, and TanStack Table that mimics a collaborative data table.

   Scaffold a Next.js frontend dashboard featuring a spreadsheet grid view using TanStack Table. Implement virtualized row scrolling, inline cell editing with optimistic UI updates, column header menus for sorting and filtering, and a toolbar to add new text, number, or selection fields. Ensure keyboard navigation (arrow keys moving between cells) functions smoothly. Connect the frontend grid state to the Django REST API endpoints created in previous steps with SWR or React Query for data fetching.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Implement Real-time WebSockets with Django Channels

   Add real-time collaborative editing support using Django Channels and Redis, broadcasting cell mutations to connected clients instantly.

   Configure Django Channels and Redis layer in the backend to support real-time collaborative cell editing. Create a WebSocket consumer that accepts connections authenticated per workspace/table room. When a client updates a cell value via REST or WebSocket, broadcast the row update event to all other connected clients in the same table room. On the Next.js frontend, establish a WebSocket connection, handle live incoming cell update payloads, and flash modified cells to highlight live collaboration. Write tests verifying multi-client broadcast messages.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Add Kanban and Gallery View Alternatives

   Extend the frontend view engine to support card-based Kanban boards and visual Gallery cards alongside the primary grid view.

   Extend the Next.js frontend to support multiple view tabs per table: Grid, Kanban Board, and Gallery. For the Kanban view, allow the user to select a single-select or status field as the grouping column, rendering drag-and-drop columns where cards update their group field upon dragging. For the Gallery view, render cover images and primary text attributes in a responsive card grid. Ensure view configurations are saved persistently in the database per table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Implement Automation Engine and Background Tasks

   Set up Celery with Redis to execute automated workflows triggered by row creation or field updates, supporting webhook and email actions.

   Implement an automation engine using Celery and Redis in the Django backend. Define models for Workflows, Triggers (e.g., 'Row Created'), and Actions (e.g., 'Send Webhook' or 'Send Email via Resend'). Create a signal handler or polling service that intercepts table mutations, evaluates active triggers against row payloads, and dispatches asynchronous Celery tasks to execute actions. Provide a simple API and frontend configuration modal to set up and inspect automation execution logs.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Baserow