I Made An App With Userbase And Have Written A Blog Post About It

This blog post is about Userbase. It's not a tutorial. I made one app with Userbase, these are some initial reactions. I'm impressed with how quickly I was able to get going once I figured out the very small API.

The documentation for Userbase is very complete. The docs include an excellent tutorial that explains how it works by showing how to build a user login screen and some other things.

I recommend reading through that and then making a NextJS, with Tailwind and Userbase:

yarn create next-app --example hi-roy next-userbase-app

The file-based routing in Next makes it my favorite React framework for building apps quickly. Not having to think through the router is one less thing to worry about when trying out a new thing.

The starter I used included Tailwind, which made me happy. I can make things look sort of good with Tailwind.

Anyway, this post is about Userbase. I was curious if it fit that pattern of easy to set up, work with like the other tools I mentioned.

No Setup Database, End To End Encrypted? Nice.

Userbase is a product I'd been meaning to try for a bit. I built an app earlier this year to try out blockstack.js, which also offers end-to-end decryption and a no set up database.

Some things that are super neato about both Usersbase and Blockstack are that you get a database backend with basically no set up. The database is very easy to get started with and is encrypted. This is great for privacy-first applications.

That's a cool benefit.

Userbase is more centralized than Blockstack. There is a paid service, which runs on AWS, or you can run your own instance, on AWS. Blockstack uses a blockchain and various cloud providers, and has a decentralized file system, as well as a wallet-based authentication. Having to set up a crypto wallet to login to an app isn't ideal, so I was interested in trying Userbase.

While signing up for a Userbase is very typical. You provide your email address and a password. The big catch with Userbase is there is no way to do a password reset. To be honest, that does me a concern.

Blue Boxes

I love graph paper. When I got stuck going to school, beacuse I was a child, one of my favorite things was the blue boxes on the graph paper. It's simple, and you can use it to make graphs or patterns. I also like to use graph paper for writing sometimes.

Anyway, it's November 2020 and the sun is getting dark earlier now, and I've been trying to channel my anxiety with JavaScript, and I saw this Visa tweet:

This was a nice way to stop doom scrolling, so I built the graph paper generator after work the other day. I like the idea of putting notes or links to tweets in boxes, so this felt like a good way to test out Userbase as a data store for this type of app.

I'm starting to enjoy these puzzles to make a surface that is X by Y and has different things in each box. I used two loops, one for rows and one for adding boxes to the row. Here is the code for the generator. This isn't a tutorial, but it's probably helpful to know what the data looks like. Here are the TypeScript interfaces for the graph object:

export interface IBox {
    boxId: string;
    rowId: string;
    content?: string;
    link?: string;
    open: boolean;
}

export interface IBoxes {
    [key: string]: IBox;
}
export interface IRow {
    boxes: IBoxes;
    rowId: string;
}

export interface IRows {
    [key: string]: IRow;
}
export interface IGraph {
    graphId: string;
    rows: IRows;
}

It was my original intent to store the entire object for a graph, with an array of rows, each one with an array of boxes in one "item" in the Userbase database.

I got a helpful error telling me that the max size of any item in the database is 10kb. It does say that in the documentation. I missed that, I was tired and it's been a week, but I think we'll be OK and that the data in productivity and wellness apps should be private.

The solution that worked for me was to create one database, identified by the graph's ID, per graph. All of the records in the database are boxes. The boxes know what row they are in, and there order in the row, so the graph can be re-assembled.

Saving Boxes

I kept the database name in a memo-ized value:

let databaseName = useMemo(() => `graph-${graphId}`, [graphId]);

Then I was able to create a function for saving individual boxes:

       const saveBox = async (box: IBox) => {
        const { boxId } = box;
        return await userbase
            .updateItem({
                databaseName,
                item: box,
                itemId: boxId,
            })
            .then(() => {
                return { boxId };
            })
            .catch((e) => console.error(e));
    };

Given that I never created that database with a CLI or back-end or waited for it to provision and the code is that little, I'm super duper impressed.

Creating Boxes

Originally I had a similar function to create one box. Then I looped through each row and created each box. I ended up getting rate-limited doing that. Which felt fair, also userbase supports bulk operations.

You are able to create, update or delete up to ten records at a time. I broke the boxes up into chunks of ten when they are created.

Userbase Is Very Cool

I am not going to go on about how I built the application. You can read the source here.

Clearly, I think Userbase is very neato. There is a lot of promise here and they are working on SQL. I will keep my eye on Userbase.

The big concern is that if a user looses there password, they can't reset it. That's a concern. Still, this is a great way to build an app quickly.

Oh Yah, The Blue Boxes

I do not identify as someone who can make a user interface, web blog or web application look good. I enjoy building user interface for other reasons, and assume someone with different skills will make it look right.

So, I was pretty proud of myself that I made the blue boxes. The graph is an HTML table. The table, table body, table rows and table cells have the class graph. The table cells, the blocks, also have the class graph-box. This little bit of Tailwind CSS made it look right:

.graph {
    @apply border-2 border-blue-500 border-opacity-50;
}

.graph-box {
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
}

Here is an image of the result:

Graphs Are Fun

This is the end of the blog post. If you have not yet, check out Userbase. This is a very promising framework. I used it for user authentication and data storage. There is also built-in file uploads, data sharing and payments.

You can check out the source code for the app I built or try the app. The graph paper interface is fun, I'll probably build something else with it, feel free to put it to use in your own thing.

Have fun. The blog post is now over.

Cover Photo by Gabriel Santiago on Unsplash