App Starter

Week 14 •

This week, I set up an app template with authentication, a database, and support for a couple of features. I'm hoping to use this template as a starting point for future projects that have those requirements, instead of trying to set everything up from scratch each time.

The App

I forked my existing Next.Js starter template, which this site is based on. That starter has a lot of components from shadcn, so it's easy to get started building stuff, but it doesn't have any sort of backend. For the new app, I added authentication using Clerk, and a database using Prisma.

The app has places for unauthenticated pages (eg the splash site portion), auth routes, and a few empty views like "dashboard" and "projects" which are placeholders for authenticated views.

Authentication

I'm using Clerk for authentication, which provides a simple way to add authentication to apps. Clerk handles the login flow, and provides a user object that I can use to check if a user is logged in. I'm upserting the user into my own database when they log in, so I can store additional information about them, like their name and tokens, which I'll discuss later.

Clerk provides some default UI components for logging in and a user avatar, which allows users to sign out or update their profile details. Ultimately, I'd like to replace these components with my own, but for now, they work.

ImageThe login screen

Database

I'm using Prisma for the database, which provides both a way to manage the database and apply migrations and a way to interact with the database from the app (an ORM). I'm just using a SQLite database for now, but I can easily switch to a different database if I need to. Not much more to say about the DB, but it's nice to have it set up.

User Tokens

The last feature I added was some basic support for allowing users to add tokens to the database, linked to their account. The idea here is that users can add in their own OpenAI API key, for example, and the app can use that key to make requests on their behalf. Several of the projects I've worked on recently require calls to external services, so I thought it would be useful to have a way to store those keys securely. The keys are encrypted in the database and only decrypted when they're needed, so they should be safe.

This could also be used as a way to store other user-specific data, like preferences or settings.

ImageThe user tokens screen

Wrapping Up

I'm not a huge fan of complex templating systems, since I find that I need to change so much of the template to fit my needs that it's not worth it. But I think this template is simple enough that I can use it as a starting point for future projects without changing too much.

One area I didn't make much progress was in the API layer. I'd like to have a more streamlined way to set up an API for the app, but since APIs vary so much depending on the project, it felt like it was a bit too much to try to add to the template. I'll have to think more about how to handle that in the future.

I've got a couple of ideas for projects that I'd like to use this template for, so I'm excited to work on in the coming weeks.

See you next week!