Building a Trello Clone from Scratch with TiDB Serverless
Table of contents
- Prerequisites for Project Creation
- Building the Project
- Key Features of the Project using TiDB Serverless:
- Challenges Addressed in Building with Traditional Databases:
- How does TiDB Solve These Challenges?
- Features of TiDB Serverless
- Cost Savings with TiDB Serverless
- Watch & Learn: Blog Recap
- Conclusion
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:
Login to TiDB Cloud and click on the "Start Free" button at the top right
.
Log in to your TiDB Cloud account using any of the three options provided.
Once logged in, access the dashboard.
Click on the Create Cluster button and choose TiDB Serverless as the cluster type.
Enter a name for your cluster (e.g.,
trello-clone
). Click Create Cluster and wait a few minutes for the cluster to be ready.
The cluster name is now listed below.
-
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:
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.
System Availability: Ensuring high availability in the face of hardware failures or maintenance is challenging, especially for services requiring 24/7 uptime.
Real-Time Analytics: The need for real-time analytics alongside transactional processing poses challenges for systems designed primarily for either OLTP or OLAP workloads.
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?
Horizontal Scalability: TiDB addresses scalability challenges by allowing easy horizontal scaling, handling larger volumes of data and more concurrent users with minimal infrastructure overhaul.
High Availability: TiDB's distributed architecture ensures high availability, automatically replicating data across nodes and minimizing downtime during node failures.
HTAP Capability: TiDB supports Hybrid Transactional/Analytical Processing (HTAP), efficiently handling both transactional and analytical workloads within the same system.
Strong Consistency: Despite its distributed nature, TiDB guarantees strong consistency across all replicas, crucial for applications requiring accurate and up-to-date data.
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.
MySQL Compatibility: TiDB's compatibility with MySQL simplifies the migration process, allowing businesses to use existing applications and tools with minimal changes.
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:
Pain-Free Distributed SQL Database: Liberates developers from database frustration and manual tasks like sharding, providing a powerful, distributed platform.
Automated Scaling at an Affordable Cost: Elastically scales storage, transactional, and analytical workloads to meet application demands in seconds.
Powerful AI-Enhanced Analytics: Advanced features facilitate SQL queries, real-time analytics, and on-the-fly assistance, making developers' lives more comfortable.
Familiar SQL Interface, MySQL Compatible: Maintains developer familiarity and transactional consistency with standard SQL and relational schema efficiency.
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.
Subscribe to my newsletter
Read articles from Kunal Kushwaha directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Kunal Kushwaha
Kunal Kushwaha
Building a better future through technology and innovation.