A basic todo app, that enables you to write descriptions for todos and categorise them. Everything is synchronised real-time and is accessible anywhere.
This is a Next.js project bootstrapped with create-next-app
.
Tech/Libraries Used in the project,
- Next.js 13 (with TypeScript and Tailwind CSS) as a React framework to take advantage of React Server Components (RSCs) and also to make deploying on edge easy.
- PlanetScale for hosting MySQL database as PlanetScale is very scalable (with the help of vitess) and also because it measures usage on number of reads and writes rather than execution time.
- Drizzle as the ORM to connect to MySQL database, makes exactly one call to the database for each query (unlike Prisma that reads mutiple tables and combines data on its own) and is also edge-ready with no cold-starts. Makes the application feel super responsive. Also great sense of humour.
- Drizzle-kit for SQL Schema Migrations (push or pull a schema to/from database)
- Clerk as authentication provider as it is edge ready.
- shadcn/ui component library for components styling that is opinionated but also could be modified as granularly as needed (uses Radix UI under the hood)
- Zod for env schema validation (used along with T3 Env library for typesafe environment variable handling)
- Clone the repository
git clone https://github.com/danpiths/todos-next-13.git
- Open a terminal in the cloned folder
- Install required packages
pnpm install
-
copy the
.env.example
to.env
and populate the environment variables from respective sources (all instructions should be clear in.env.example
file) -
Synchronise the schema and database
pnpm run drizzle:push
- Run the app
pnpm run dev
Open http://localhost:3000 with your browser to see the result.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out the Next.js deployment documentation for more details.