Keystone JS: The Ultimate Admin Panel Generator

Keystone JS is a powerful tool that can save full stack developers a lot of time. Essentially, it allows you to generate an admin panel for your application in under 10 lines of code. Not only does this save time, but it also provides authentication, a GraphQL API, database migrations, relationships, filtering, and file uploads out of the box.

In this tutorial, we build an admin panel for an app similar to Twitter, demonstrating how Keystone JS works. We start by installing Keystone and TypeScript, then creating a keystone.ts file in which we configure our database and data shape. We create a user with two fields (name and email) and set them to be required and unique, then make read and write operations public with allow all access.

We generate a GraphQL and Prisma schema, create a SQLite database, and generate an admin panel using Next JS. This all runs on localhost:3000 where our admin panel is accessible. From here, we can see a dashboard with a single model for users. Clicking on the users model takes us to a list of users, which we can create, edit, and search by fields.

To demonstrate how Keystone JS handles relationships, we add a tweet model, which has a content field and a created date. We link it to the user model using the relationship function, creating a connection between the two. We can now create tweets with authors associated with them, and users will have fields for all the tweets connected to them.

Finally, we demonstrate how Keystone JS can be used for authentication, access control, and extending the GraphQL schema. With just a few lines of code, we can configure Keystone to only allow certain users to create, update, and delete tweets. Additionally, we can define our own mutations and resolvers to perform custom functions.

Overall, Keystone JS is a highly valuable tool for full stack developers, saving them a great deal of time while providing powerful features.