RealWorld example app with TiDB Serverless

A RealWorld example app built with Next.js, Prisma and TiDB Serverless.

Getting Started

Prerequisites

• Node.js – JavaScript runtime
• pNPM – Package manager
• TiDB Serverless account – Serverless cloud database

Set up database

Register an account on TiDB Serverless and create a new database in the cluster.

Then you can find the connection string in the portal that will later be used to configure the .env file to connect to the database.

We will select Connect with Prisma as the connection method.

Set up RealWorld app locally

First, clone this repository:

git clone https://github.com/likidu/realworld-nextjs

And then install dependencies:

pnpm install

Next, rename .env.example to .env and fill in the database connection string you got from the previous step. And also the NEXTAUTH_SECRET which is used to encrypt the session in localhost.

Now push the database schema to your TiDB Serverless database using Prisma.

pnpm prisma db push

Run the seed script to populate your database with some initial data.

pnpm prisma db seed

The seed script will first clean up the existing records and create a few mocking users and posts.

Run the app locally

Finally, run the development server:

pnpm run dev

Open http://localhost:3000 with your browser to see the result.

To test with Sign in, use the following credentials:

Email: [email protected]
Password: 123456

One-click Deploy on Vercel

You can deploy this template to Vercel with the button below. Make sure you have finished the database setup step before deploying.

Learn More

To learn more about TiDB Serverless, take a look at the following resources:

• TiDB Serverless Documentation - learn about TiDB Serverless features and get started to build your application.

Tech Stack

Platforms

• TiDB Serverless – Serverless cloud database that is MySQL compatible

Frameworks

• Next.js – React framework for building performant apps with the best developer experience
• Auth.js – Handle user authentication with ease with providers like Google, Twitter, GitHub, etc.
• Prisma – Typescript-first ORM for Node.js

UI

• Tailwind CSS – Utility-first CSS framework for rapid UI development
• Shadcn-UI – Radix UI based components that you can copy and paste into your apps
• next/font – Optimize custom fonts and remove external network requests for improved performance

Utilities

• Faker.js - Generate seeding data for testing and development
• bcrypt for Node.js - A library to help you hash passwords before saving and reading from database
• html-react-parser – Parse HTML post strings into React components
• lodash – For sampling random elements from an array

Code Quality

• TypeScript – Static type checker for end-to-end typesafety
• Prettier – Opinionated code formatter for consistent code style
• ESLint – Pluggable linter for Next.js and TypeScript