Todos App (Next.js 13)

A basic todo app, that enables you to write descriptions for todos and categorise them. Everything is synchronised real-time and is accessible anywhere.

Visit Website

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)

Run Locally

1. Clone the repository

git clone https://github.com/danpiths/todos-next-13.git

2. Open a terminal in the cloned folder
3. Install required packages

pnpm install

4. copy the .env.example to .env and populate the environment variables from respective sources (all instructions should be clear in .env.example file)

5. Synchronise the schema and database

pnpm run drizzle:push

6. Run the app

pnpm run dev

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

Learn More

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

Deploy on Vercel

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.