Cutting Corners to MVP

---

Imagine it's the weekend and you're hanging out with some new friends. Someone finds out that you can program. “Oh man, I have the perfect app idea!”

Dread washes over you.

Potential ideas you may hear

• Facebook for nurses.
• Uber for your pets.
• A game with micro purchases, so we can make a lot of money!

If one of these ideas interest you, you should know how to prototype something quickly to see if it is a good idea. As an example, let's look at a plant themed todo list.

The app should have a few models like Users, Plants, and Reminders. API Endpoints for all actions on each model. Forms to use all the endpoints. Authentication flows like sign in, sign out, sign up, and forgot password. 🤯

You've probably never heard someone say, "Hey! I have an idea for an app where user's can enter and store data with a really awesome form." It's always implied that apps will have a solid data entry experience and user's data will persist. We should cut corners for those basics and focus more on what makes our app unique.

What can we use to help us move more quickly?

Keystone

Keystone is a "superpowered CMS for developers." It has all of the basic things needed for your app.

First, you describe your schema in code.

//...
  Reminder: list({
    fields: {
      name: text({ validation: { isRequired: true } }),
      dayInterval: integer({ defaultValue: 1 }),
      owner: relationship({
        ref: "User.reminders",
        many: false,
      }),
      startDate: calendarDay(),
      createdAt: timestamp({
        defaultValue: { kind: "now" },
      }),
      //...
    },
  }),
//...

Next, Keystone generates new UI for you through the admin site

You can click on any of the items and get a list of all items.

Click "Create Plant" to get a form that creates items

Clicking on a item will show a detail screen with a form to edit or delete an item.

Cutting Corners

Temporary CRUD Forms

To avoid having to create forms for each action on a model, you can link from your UI straight to the admin's UI. These links make it really quick to get going on data entry and updates. These forms won't match your app's UI, so once you are finishing prototyping, you can replace these links to point to your own custom UI.

Keystone Admin UI URL

const PUBLIC_ADMIN_URL = 'http://localhost:3004'

<!-- New Plant Link Example -->
<a href={`${PUBLIC_ADMIN_URL}/plants/create`}>Create New Plant</a>
<!-- Detail View with Edit and Delete Example -->
<a href={`${PUBLIC_ADMIN_URL}/plants/${plant.id}`}>{plant.name}</a>

CRUD Endpoints

Keystone creates basic CRUD operations for each model. You can explore all the available queries and mutations in the Apollo GraphQL playground that comes with Keystone. Test your queries or build mutations in the playground and then copy/paste them into your code.

Authentication

There are a few options when it comes to authentication

1. Build forms to use the built in mutations to sign in.
2. Use the Magic Auth link and email to authenticate users.

With both of these, you can skip the sign up flow, if you manually create user's accounts. Once you've proved out your idea more, you can work on the sign up flow.

Conclusion

Focusing on the unique parts of your app instead of the basic ones will help you crank out app ideas more quickly.

How does Keystone help?

• Temporary CRUD Forms
• CRUD Endpoints
• API Documentation
• Authentication
• Admin UI
• Easily Hostable

Alternatives

If you are looking for a more mature headless CMS, you could look into Strapi! Strapi is another JavaScript based headless CMS that has a lot more community support than Keystone. It has similar features like an Admin UI, API generation based on a schema, and more through their plugin API.

Overall, I enjoy the developer experience of Keystone more, but Strapi is still a solid choice for a headless CMS.