How to Clone Airtable

Create a full-stack Airtable-style relational database app called GridBase using Next.js (App Router), Tailwind CSS, TanStack Table, Prisma and Postgres.

## What to build
A per-seat team SaaS where users build tables of typed fields, edit them in a virtualized grid, link records between tables, and switch between grid/kanban/calendar views over the same data.

## Key screens
- Bases home: grid of base cards, create-base button
- Base workspace: table sidebar, view switcher (Grid/Kanban/Calendar), toolbar (Filter, Sort, Group, Hide fields)
- Grid: virtualized editable table - inline cell editing, add row, add field, resizable/reorderable columns, frozen first column
- Record modal: all fields as a form, linked records shown and editable as chips
- Kanban: cards grouped by a single-select field with drag-to-move-between-columns
- Calendar: records on a month grid by a date field
- Field editor popover: pick a type and configure its options (choices for selects, target table for link)
- Members & sharing: invite by email + role, read-only share link

## Schema (Prisma)
Base (id, ownerId, name), Table (id, baseId, name, order), Field (id, tableId, name, type, options Json, order), Record (id, tableId, createdAt), Cell (id, recordId, fieldId, value Json), Link (id, fieldId, fromRecordId, toRecordId), View (id, tableId, type, config Json), Member (id, baseId, userId, role)

## Logic that must work
- Linked-record fields write two-way Link rows; both records show each other as chips, and deleting a record removes its links
- View config (filter/sort/group) is applied server-side when loading records so large tables stay fast; the grid is virtualized client-side
- Field-type validation: a number cell rejects text, a date cell stores ISO, a single-select cell must be one of its options, a multi-select stores an array
- Reordering rows uses a fractional sort key so a single move doesn't reindex the whole table
- Cell edits are optimistic with rollback on server error
- Each view persists its own filter/sort/group config; switching views re-queries with that config
- Role check on every mutation: viewers are read-only

## Style
Productivity-dense: white canvas, #2D7FF9 primary, thin grid lines, compact rows, colored chips for select fields, subtle hover. The grid must feel snappy with 1,000+ rows - virtualize it. Responsive: mobile falls back to a card list.

## Quality
Keep field-type validators in one shared module used by UI and API; store cell values as typed JSON; index cells by record and by field; add column resize/reorder persistence; frozen first column.
Persist each view's config so reopening a base restores its filters, sort and grouping; keep the record-detail modal in sync with the grid so an edit in one updates the other.

Seed a demo base 'Marketing Hub' with 3 linked tables (Campaigns, Tasks, Team), ~40 records total, a kanban view on Tasks by status and a calendar view on Campaigns by date. If real-time is too much for the MVP, make the grid optimistic-update on edit and refetch; note clearly where real-time would slot in.

You are building a production-quality Airtable clone. This is a hard project - the relational engine is the core, not the grid. Work iteratively and run the app after each step.

## Stack
- Next.js 14 App Router, TypeScript, Tailwind CSS, shadcn/ui, TanStack Table + react-virtual
- PostgreSQL via Prisma; Supabase for auth (email + Google) and Realtime
- Stripe Billing for per-seat subscriptions with proration
- Zod for all validation; a typed field-value layer shared by UI and API

## Architecture requirements
- Model fields generically: a Field has a type and a JSON options blob; a Cell stores a JSON value validated against its field type by a per-type validator in lib/fields/
- Links are first-class rows (from_record, to_record, field) so relationships are two-way and queryable in both directions; never store links as an array on one side only
- View computation (filter, sort, group) happens server-side and returns paginated, ordered record ids; the client virtualizes rendering - never load a whole large table into the DOM
- lib/derived.ts: lookups and rollups compute across links; recompute on dependency change via a background job, cache the result on the cell

## Data model
bases, tables, fields (type enum, options json), records, cells (value json), links, views (config json), members (role). Index cells(record_id), cells(field_id), links(from_record_id), links(to_record_id), records(table_id). Add a generated index strategy for filtered/sorted views.

## Implementation order
1. Scaffold + Prisma schema + Supabase auth + base/table/field CRUD with the field-type registry
2. Grid: virtualized editable table, inline editing per field type, add row/field, column resize/reorder, optimistic updates
3. Linked records: link field type, the two-way Link table, a record picker, chips on both sides
4. Views: server-side filter/sort/group returning ordered ids; persist view config; build Kanban (group by select) and Calendar (by date)
5. Realtime: Supabase Realtime channel per table; broadcast cell/record changes; presence indicators; resolve concurrent edits last-write-wins per cell to start
6. Lookups & rollups: derived fields recomputed on change via a worker; cache results
7. Per-seat billing: Stripe with proration on member add/remove; gate record limits by plan

## Quality bar
- The grid must stay at 60fps with 5,000 rows - measure it, virtualize everything
- Every mutation is a server action with Zod validation and a role check
- Loading and error boundaries on async routes; optimistic UI with rollback on failure
- Keyboard navigation in the grid (arrow keys, Enter to edit, Tab to next cell, Escape to cancel)
- Per-seat billing with proration on member add/remove; gate record limits by plan
- Seed script: 1 base, 3 linked tables, 200 records, multiple views

Start with step 1. Be honest about where real-time and rollups get genuinely hard and propose the simplest correct version first. After each step, tell me what to verify.

Design the complete UI for an Airtable-style relational database app called GridBase. React + Tailwind, shadcn/ui components, lucide-react icons. Clean, dense, productivity aesthetic: white background, calm blue primary (#2D7FF9), thin grid lines, compact rows, colored chips for select values.

## Screens to generate

### 1. Bases home
- Top bar: logo, workspace switcher, 'Create base' button, avatar menu
- Grid of base cards, each with a colored icon, name, table count, and last-edited time

### 2. Base workspace - Grid view
- Left sidebar: list of tables with icons, an 'Add table' button
- Top toolbar: view tabs (Grid / Kanban / Calendar), then Filter, Sort, Group, 'Hide fields', and a Share button
- The grid: a true spreadsheet feel - header row with field-type icons next to names, a frozen first column, compact editable rows, a faint add-row at the bottom, a '+' add-field button on the far right; selected cell gets a blue outline; single-select cells render as colored pill chips; linked-record cells render as chips

### 3. Record detail modal
- A centered panel listing every field of one record as a labeled input; linked records appear as removable chips with an 'add link' picker; a comment thread on the side

### 4. Kanban view
- Columns by a single-select field (e.g. status: Backlog / In progress / Done), each column a scrollable stack of record cards showing a few key fields; cards are draggable between columns; per-column count badges

### 5. Calendar view
- A month grid with records placed on their date as colored chips; a mini month-picker and Today button in the header

### 6. Field-type picker popover
- A searchable list of field types with icons: Single line text, Long text, Number, Date, Checkbox, Single select, Multi select, Link to another table

### 7. View toolbar controls
- The Filter, Sort and Group buttons each open a popover: Filter builds 'where field is/contains value' rows with AND/OR; Sort picks a field and direction; Group picks a field; show active filter/sort counts as small badges on the buttons

### 8. Bases home
- A grid of base cards (colored icon, name, table count, last edited) plus a 'Create base' button and a workspace switcher in the top bar

### 9. Share & members panel
- A slide-over: an invite-by-email row with a role selector (Editor / Viewer), a list of current members with role badges and a remove action, and a 'Copy read-only link' button with a toggle to enable public viewing

Make every screen responsive. On mobile: the grid becomes a stacked card list (each record a card of label/value rows), the sidebar collapses to a drawer, and Kanban columns scroll horizontally. Use realistic placeholder data - a 'Marketing Hub' base with Campaigns, Tasks and Team tables, status chips, owner avatars and launch dates.

Build a spreadsheet-database hybrid app (Airtable model) called GridBase.

## Entities
- Base: name, owner (user reference)
- Table: base reference, name, order (number)
- Field: table reference, name, type (single-select: text/long_text/number/date/checkbox/single_select/multi_select/link), options (json: choices for selects, target table for link), order (number)
- Record: table reference, createdAt (date)
- Cell: record reference, field reference, value (text/number/date/json depending on field type)
- View: table reference, type (single-select: grid/kanban/calendar), config (json: filters, sort, group-by field)
- Member: base reference, user reference, role (single-select: owner/editor/viewer)

## Roles & permissions
- Owner: full control of a base, can invite members and manage billing
- Editor: can add and edit records, fields and views in bases they belong to
- Viewer: read-only access to a base

## Pages
1. Bases home: cards for each base the user can access, create-base button
2. Base workspace: table sidebar, the active table in a grid, a view switcher (grid/kanban/calendar), and a toolbar for filter/sort/group
3. Grid view: editable spreadsheet where rows are records and columns are typed fields; inline editing; add row; add field
4. Record detail: all fields of one record as a form, with linked records shown as chips
5. Kanban view: cards grouped by a single-select field, drag to change the value
6. Calendar view: records placed on a month grid by a date field
7. Members & sharing: invite by email with a role, read-only share link

## Rules
- A 'link' field connects records between two tables and shows the relationship on both sides (two-way)
- Each view stores its own filters, sort and grouping; the same table looks different per view
- Viewers cannot edit anything; only owners and editors can change data (enforce on every action)
- Each cell's value must match its field type (a number field rejects text, a single-select must be one of its options)

## Look & feel
Airtable-inspired: clean and dense, white background, calm blue (#2D7FF9) primary, thin grid lines, compact rows, colored pill chips for select fields. The grid is the centerpiece and should feel tight and fast. Mobile responsive with a card-list fallback for the grid.

Seed with one sample base 'Marketing Hub' containing 3 linked tables (Campaigns, Tasks, Team) with realistic records, a kanban view on Tasks by status, and a calendar view on Campaigns by launch date so every view has data.