XMDB (Xata Movie Database)

XMDB (Xata Movie Database) is a Next.js starter template that demonstrates how to build a search-driven movie catalog on Xata, using typo-tolerant full-text search, aggregations, and a type-safe ORM. The app is published by Xata under the xataio GitHub organization and ships with one-click deployment to Vercel.

What is XMDB?

XMDB is a working reference application for the Xata serverless data platform, built with the Next.js App Directory and React Server Components. It takes a Xata workspace connection (through a XATA_API_TOKEN environment variable) and an optional seed command, and outputs a complete web app for browsing, searching, and filtering a movie database. The project is maintained by Xata and lives in the xataio/xmdb repository on GitHub.

Key Features

• Typo-Tolerant Full-Text Search — Uses Xata's search API (documented at xata.io/docs/api-guide/search) so users can misspell movie titles and still get correct results.
• Aggregations — Demonstrates Xata's aggregation SDK for building faceted filters and counts, such as grouping movies by genre or year.
• Type-Safe SDK/ORM — The @xata.io/client generates TypeScript types from the database schema, giving end-to-end type safety from queries to components.
• Next.js App Directory with React Server Components — Server-side data fetching keeps the client bundle small and illustrates current Next.js data patterns.
• Intercepting and Parallel Routes — The template includes Next.js intercepting and parallel routes, useful for modal-based detail views and dashboards.
• One-Click Vercel Deployment — A Deploy with Vercel button clones the repo, installs dependencies with pnpm, and connects the Xata integration automatically.
• Seed Script — pnpm xata:seed inserts 100 rows of mock movie data so the app is populated immediately after linking to a workspace.

Who is it for?

• Developers learning Xata — They can clone the repo, link it to their own workspace, and see how Xata search, aggregations, and schema mutations behave in a real app.
• Next.js developers — They get a complete example of App Router, React Server Components, and advanced routing techniques in a non-toy codebase.
• Product teams building search-enabled directories — The movie dataset can be swapped for products, books, or other catalog content, and the search/filter patterns carry over.

What can you do with XMDB?

• Search-first catalogs: let visitors type partial or misspelled queries and receive relevant movies through Xata's typo-tolerant search.
• Faceted browsing: use Xata aggregations to display counts and filters that narrow results by genre, release year, or other fields.
• Experimentation: modify the Xata schema and rerun the seed script to test how changes affect search ranking and aggregation output.

How does XMDB work?

After deploying or cloning, run pnpm xata:link to connect the app to a Xata workspace and create a .xatarc file. Then run pnpm xata:seed to load 100 mock movie rows, and pnpm dev to start the development server at http://localhost:3000. Local setup requires a XATA_API_TOKEN; Vercel populates VERCEL_URL automatically, and locally it defaults to http://localhost:3000.

FAQ

Does XMDB require a Xata account?

Yes. The app uses Xata as its database and search backend, so you need a Xata workspace and a XATA_API_TOKEN to run it locally or on Vercel.

How do I get the mock data?

Run pnpm xata:seed after linking the project to your Xata workspace. The seed script adds 100 rows of simulated movie records to your database.

What stack does XMDB use?

The template uses Next.js App Directory, React Server Components, TailwindCSS for styling, Zod for schema validation, @xata.io/client as the ORM, vercel/OG for social sharing images, and react-icons for iconography.

Can I deploy XMDB with one click?

Yes, the repository includes a Deploy with Vercel button that sets up the project, installs dependencies, and integrates Xata through the Vercel marketplace.

Where can I find the source code?

The project is in the xataio/xmdb repository on GitHub, with documentation and setup instructions in the README.