ogzhanolguncu / min-todo

Minimalistic To do App with tRPC, NextJS, Typescript, PlanetScale, Prisma, Chakra UI and Clerk

Minimalistic ToDo App with tRPC, NextJS, Typescript, PlanetScale, Prisma, Chakra UI and Clerk

Idea behind this project to create a minimalistic todo app with least amount of clutter with latest technologies. Only has priority setting, input field for todo, complete and delete.

Running the app

Live App

In order to run the you need couple of api keys. Create a .env file with these configs in it:

DATABASE_URL=""
NEXT_PUBLIC_CLERK_FRONTEND_API=""
CLERK_API_KEY=""
CLERK_JWT_KEY=""

For DB, you can use PlanetScale and create Mysql instance, and, for the Clerk just copy the keys to .env file. Finally,

npm run dev

You may need to configure the auth options in Clerk - gives lots of options like magic link, password, social logins etc... By the way, if you are deploying on Vercel, don't forget to add secrets to Vercel as well.

Tech Stack

• tRPC
• NextJS
• Typescript
• PlanetScale
• Prisma
• ChakraUI and Clerk

Feedback

If you have any feedback, please reach out to me or feel free to open up an issue.

min-todo's Issues

Type error from NextApiHandler

This is a really cool repo, thank you for the Clerk/trpc integration example!

I get the following error on yarn build, yarn dev still runs well though:

./src/pages/api/trpc/[trpc].ts:10:3
Type error: Argument of type 'NextApiHandler<any>' is not assignable to parameter of type 'Middleware'.
  Types of parameters 'req' and 'req' are incompatible.
    Property 'env' is missing in type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>> & { auth: { sessionId: string | null; userId: string | null; getToken: ServerGetToken; claims: ClerkJWTClaims | null; }; }' but required in type 'NextApiRequest'.

   8 | 
   9 | export default withAuth(
> 10 |   trpcNext.createNextApiHandler({
     |   ^
  11 |     export default trpcNext.createNextApiHandler({
  12 |       router: appRouter,
  13 |       /**