Trello, a popular project management tool, offers a simple, intuitive, and flexible way to organize tasks using boards, lists, and cards. In this blog post, we'll explore creating a Trello-like web application using TiDB Serverless, a fully managed, scalable, and distributed SQL database service.

TiDB stands out as the most advanced open-source distributed SQL database with MySQL compatibility. Organizations worldwide leverage TiDB for applications that demand elasticity, versatility, and reliability akin to Titanium (Ti).

Prerequisites for Project Creation

Before diving into the tutorial, ensure you have the following:

• Basic understanding of Frontend.

• Node version 18.x.x

• TiDB Cloud account, sign up for free here

• Code editor of your choice, such as Visual Studio Code

Building the Project

To kickstart our Trello clone, let's establish the fundamental project structure. We'll utilize the structure from this repo.

Check out the final deployed project here.

Creating a TiDB Serverless Cluster

Let's start by setting up a TiDB Serverless cluster on TiDB Cloud to host our database for the Trello clone. Follow these steps:

1. Login to TiDB Cloud and click on the "Start Free" button at the top right

   

   .

2. Log in to your TiDB Cloud account using any of the three options provided.

   

3. Once logged in, access the dashboard.

   

4. Click on the Create Cluster button and choose TiDB Serverless as the cluster type.

   

5. Enter a name for your cluster (e.g., trello-clone). Click Create Cluster and wait a few minutes for the cluster to be ready

   

   .

6. The cluster name is now listed below.

7. 

   After creation, view cluster information, including the connection string, username, and password. You'll need these details later to connect your application to the database. Optionally, click Launch SQL Workbench to access a web-based SQL editor.

Setting Up .env File

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=

DATABASE_URL=

NEXT_PUBLIC_APP_URL=

Setting Up Prisma

Add MySQL Database (TiDB used)

• Connect, generate a password, and copy the DB connection string obtained during the cluster creation.

npx prisma generate
npx prisma db push

Starting the App

pnpm run dev

Updating the DB Schema

Prisma schema at (./prisma/schema.prisma)

datasource db {
  provider     = "mysql"
  url          = env("DATABASE_URL")
  relationMode = "prisma"
}

generator client {
  provider = "prisma-client-js"
}

model List {
  id     String  @id @default(uuid())
  title  String
  order  Int
  userId String
  cards  Card[]

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

model Card {
  id          String  @id @default(uuid())
  title       String
  order       Int
  description String? @db.Text

  listId String
  list   List   @relation(fields: [listId], references: [id], onDelete: Cascade)

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@index([listId])
}

Viewing Data

• Download TablePlus

• Create a connection with the connection string.

• Explore the database.

Key Features of the Project using TiDB Serverless:

• Auth

• List creation & manipulation (rename, delete, drag & drop reorder)

• Card creation & manipulation (description, rename, delete, drag & drop reorder)

• TiDB & Prisma ORM

• shadcnUI & TailwindCSS

Challenges Addressed in Building with Traditional Databases:

1. Scalability and Manual Sharding: Traditional relational databases face challenges in scaling for high-volume, high-concurrency workloads typical of modern applications and also require manual sharding for complex data distribution across servers.

2. System Availability: Ensuring high availability in the face of hardware failures or maintenance is challenging, especially for services requiring 24/7 uptime.

3. Real-Time Analytics: The need for real-time analytics alongside transactional processing poses challenges for systems designed primarily for either OLTP or OLAP workloads.

4. Complexity in Cloud Migration: Migrating to or operating in a cloud environment can introduce complexities, particularly for databases not originally designed for cloud infrastructures.

How does TiDB Solve These Challenges?

1. Horizontal Scalability: TiDB addresses scalability challenges by allowing easy horizontal scaling, handling larger volumes of data and more concurrent users with minimal infrastructure overhaul.

2. High Availability: TiDB's distributed architecture ensures high availability, automatically replicating data across nodes and minimizing downtime during node failures.

3. HTAP Capability: TiDB supports Hybrid Transactional/Analytical Processing (HTAP), efficiently handling both transactional and analytical workloads within the same system.

4. Strong Consistency: Despite its distributed nature, TiDB guarantees strong consistency across all replicas, crucial for applications requiring accurate and up-to-date data.

5. Cloud-Native Design: Being cloud-native, TiDB suits cloud environments well, supporting flexible deployments across public, private, and hybrid clouds and integrating seamlessly with cloud-native technologies.

6. MySQL Compatibility: TiDB's compatibility with MySQL simplifies the migration process, allowing businesses to use existing applications and tools with minimal changes.

7. Automatic Sharding: TiDB implements automatic row-level sharding, transparently distributing data across the cluster and balancing the load without manual intervention.

Features of TiDB Serverless

TiDB Serverless employs a storage-compute separation architecture, seamlessly scaling from 0 gigabytes to petabytes without the complexity of sharding. It proves highly reliable, making it a preferred choice for tech giants not only in Silicon Valley but also in Japan and Europe.

Key features include:

1. Pain-Free Distributed SQL Database: Liberates developers from database frustration and manual tasks like sharding, providing a powerful, distributed platform.

2. Automated Scaling at an Affordable Cost: Elastically scales storage, transactional, and analytical workloads to meet application demands in seconds.

3. Powerful AI-Enhanced Analytics: Advanced features facilitate SQL queries, real-time analytics, and on-the-fly assistance, making developers' lives more comfortable.

4. Familiar SQL Interface, MySQL Compatible: Maintains developer familiarity and transactional consistency with standard SQL and relational schema efficiency.

5. Fully-Managed, Elastic Operations: Delivers and maintains an optimized TiDB deployment without concerns about server provisioning.

Cost Savings with TiDB Serverless

Real user data shows that TiDB Serverless not only offers a generous 25GB free quota but also helps users save an average of 50% on database costs compared to other solutions. This significant cost advantage stems from its rock-solid architecture. By efficiently separating storage and compute resources, TiDB Serverless scales resources independently, allowing you to only pay for what you use. This makes it a perfect choice for:

• Independent developers: Get started with a generous free tier and scale seamlessly as your project grows.

• Enterprise developers: Experiment and innovate risk-free with low-cost prototyping and proof-of-concept deployments.

Watch & Learn: Blog Recap

Conclusion

• Sign up for TiDB Serverless: https://bit.ly/signuptidb

• Join the Vector search waitlist: https://bit.ly/jointhevector

• Learn more: https://bit.ly/learnmoretidb

• Documentation: https://bit.ly/tidbclouddoc

• TiDB YouTube channel: https://www.youtube.com/@TiDB_Developer

TiDB introduces built-in vector search through MySQL, enhancing its capability for AI applications. This feature supports keyword vector searches for unstructured data like text, images, and audio, making it a valuable tool for MySQL and AI developers. Join the beta and be part of this transformative journey.