Skip to content
VercelLogotypeVercelLogotype
LoginSign Up

TiDB Cloud Starter

A bookstore demo built on TiDB Cloud and Next.js.

DeployView Demo

Bookshop Demo

Bookshop is a virtual online bookstore application through which you can find books of various categories and rate the books.

You can perform CRUD operations such as viewing book details, adding and deleting ratings, editing book inventory, etc.

Powered by TiDB Cloud, Prisma and Vercel.

🔥 Visit Live Demo

👉 Click here to visit

Deploy on Vercel

🧑‍🍳 Before We Start

Create a TiDB Cloud account and get your free trial cluster.

🚀 One Click Deploy

You can click the button to quickly deploy this demo if already has an TiDB Cloud cluster.

Integration will guide you connect your TiDB Cloud cluster to Vercel.

Manually Deploy (Not recommended)

1. Get connection details

You can get the connection details by clicking the Connect button.

Get User and Host field from the dialog.

Note: For importing initial data from local, you can set an Allow All traffic filter here by entering an IP address of 0.0.0.0/0.

Your DATABASE_URL should look like mysql://<User>:<Password>@<Host>:4000/bookshop

2. Deploy on Vercel

Deploy on AWS Linux

Install git and nodejs pkgs

sudo yum install -y git
# Ref: https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/setting-up-node-on-ec2-instance.html
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash;
source ~/.bashrc;
nvm install --lts;
node -e "console.log('Running Node.js ' + process.version)"

Clone the repository

git clone https://github.com/pingcap/tidb-prisma-vercel-demo.git;
cd tidb-prisma-vercel-demo;

Install dependencies

corepack enable;
corepack yarn install;
yarn;

Connect to TiDB Cloud and create a database

mysql -h gateway01.us-west-2.prod.aws.tidbcloud.com -P 4000 -u user -p
mysql> create database tidb_labs_bookshop;

Set environment variables

export DATABASE_URL=mysql://user:pass@gateway01.us-west-2.prod.aws.tidbcloud.com:4000/tidb_labs_bookshop

Build the project

yarn run prisma:deploy && yarn run setup && yarn run build

Start the server

yarn start

Open the browser

Open the browser and visit http://<ip>:3000.

📖 Development Reference

Prisma

Prisma Deployment Guide

Bookshop Schema

Bookshop Schema Design

GitHub
Ownerpingcap
Repositorytidb-prisma-vercel-demo
Use Cases
Ecommerce
Stack
Next.js
Material UI
Database
TiDB

Related Templates

Fullstack Blog with Next.js + Prisma

Fullstack Blog with Next.js, Typescript and Prisma
Fullstack Blog with Next.js + Prisma thumbnail

CockroachDB + Prisma + Next.js Starter

A starter for full-stack serverless apps using CockroachDB, Prisma, and Next.js.
CockroachDB + Prisma + Next.js Starter thumbnail

Agent Stack

  • AI SDK
  • AI Gateway
  • Sandbox
  • Workflows
  • EveNew
  • ConnectNew

Core Platform

  • CI/CD
  • Content Delivery
  • Fluid Compute
  • Observability

Security

  • Platform Security
  • WAF
  • Bot Management
  • Bot ID

Tools

  • Vercel DropNew
  • Vercel Agent
  • Vercel PluginNew
  • Next.js
  • Domains
  • v0

Frameworks

  • Nuxt
  • SvelteKit
  • Nitro
  • Turborepo
  • Tanstack Start
  • FastAPI
  • xmcp
  • All frameworks

SDKs

  • Vercel SDK
  • Workflow SDKNew
  • Flags SDK
  • Chat SDKNew
  • Queues SDKNew
  • Streamdown

Build

  • AI Apps
  • Web Apps
  • Marketing Sites
  • Platforms
  • Commerce
  • Platform Engineers
  • Design Engineers

Learn

  • Docs
  • Blog
  • Changelog
  • Knowledge Base
  • Academy
  • Articles
  • Community

Explore

  • Customers
  • Marketplace
  • Templates
  • Partner Finder
  • Vercel + AWS

Company

  • About
  • Careers
  • Press
  • Events
  • Startups
  • Shipped on Vercel
  • Open Source Program
  • Enterprise
  • Pricing
  • Help

Legal & Trust

  • Privacy Policy
  • Terms of Service
  • Cookie Policy
  • DPA
  • Acceptable Use Policy
  • Legal (all documents)
  • Trust Center
  • Status

Social

  • GitHub
  • X
  • LinkedIn
  • YouTube
  • Instagram
  • VercelVercel
Agent Stack
  • AI SDK
  • AI Gateway
  • Sandbox
  • Workflows
  • Eve
Core Platform
  • Security
  • Content Delivery
  • Fluid Compute
  • Observability
  • CI/CD
Tools
  • Next.js
  • Vercel Agent
  • Vercel Plugin
  • Domains
  • v0
Learn
  • Docs
  • About
  • Blog
  • Changelog
  • Knowledge Base
Build
  • AI Apps
  • Web Apps
  • Marketing Sites
  • Platforms
  • Commerce
Explore
  • Customers
  • Marketplace
  • Partner Finder
  • AWS
  • Community
EnterprisePricing
Contact
Log InSign Up
Dashboard

Products

Agent Stack

  • AI SDK
  • AI Gateway
  • Sandbox
  • Workflows
  • Eve

Core Platform

  • Security
  • Content Delivery
  • Fluid Compute
  • Observability
  • CI/CD

Tools

  • Next.js
  • Vercel Agent
  • Vercel Plugin
  • Domains
  • v0
Resources

Learn

  • Docs
  • About
  • Blog
  • Changelog
  • Knowledge Base

Build

  • AI Apps
  • Web Apps
  • Marketing Sites
  • Platforms
  • Commerce

Explore

  • Customers
  • Marketplace
  • Partner Finder
  • AWS
  • Community
Enterprise
Pricing
Sign UpLog In
Contact
DeployView Demo

Loading status…

Select a display theme: