Skeleton Key

💀 🔑

There you are again. Inspiration hits. What if I built it this way? I could maybe structure the data like so. A user model, a data model. Yeah, and then I could even add this cool little feature. Oh that’d be so awesome. The singular fateful sentence comes smashing into your brain and dooms you to likely weeks of design and development.

‘I can build that.’ your brain says.

This feeling might be my favorite part of software development. It’s that part where your brain is working faster than your conscious mind to accomplish some task. You know this ultimate goal, right? This nascent piece of software that could just change the world. Or at least be fun to build. It’s just starting to take shape.

Of course, you’re nowhere near a computer. You’re at the grocery store, or in the shower, or in your car. But it’s there. And it’s exhilarating. You can see it’s edges. You can see yourself using the finished product already. It’s solving some problem, it’s providing some type of community.

And so maybe you skip the last bit of your shower. Or maybe you skip your last bit of errands and you get to your laptop.

And it all comes crashing down. User Authentication. Frontend. Backend. Password reset? Administration? What about Oauth with Facebook and Github? Twitter? Data models. Spin up a database. Maybe we should use some type of css framework to speed up dev time? But in the end it’s just learning some new thing that’ll actually slow it down, right?

How long, usually, does it take to get CRUD operations on a database? I would argue for at least the stack of technology that I use, React/Node.js, it takes a bit. I haven’t found a suitably lightweight boilerplate or project setup that lets it happen sooner.

There are some inspiring things like Sahat’s hackathon-starter but that doesn’t use React. And React is like half the fun of software development.

What I’m looking for is something that can be both robust, and lightweight, with the stack that I’m familiar with. One that is efficient and future proofed, with well documented components and actively developed software and interactions.

So I’m building it. And it’s going to be called Skeleton Key. I’ve been crazy busy lately, so I haven’t made much progress. However, the last few projects I’ve built have been long-form. Things that have taken massive chunks of my time, without releasing them. 🤷 ‍it’s what I do. However, I have learned a ton building them. Going from zero software knowledge to two full stack applications is pretty damn good practice. But I don’t intend to spend that much time on Skeleton Key between releases.

My goal is to speed my (and your!) development time drastically. I hate that beginning part, where you decide how to implement users, and how to set up login, and the initial styling. Spinning up a DB and getting something updated in the database. These are all things that with the majority of big software projects need to be done. And they are always done in the same order. And they are always a pain in the ass.

By the time you’ve spun up user auth and error reporting on the front end, you’ve forgotten the excitement for the original problem you wanted to solve. That feeling you had in the shower or at the grocery store is gone. Poof. You didn’t have a tight enough feedback loop on the idea. Suddenly it’s a slog. Suddenly the idea has lost it’s magic and you have this half built piece of software with a logo and user auth and you are just getting to the meat and potatoes of solving the problem. You’re five or ten hours deep on development and you’re just now starting on the actual problem.

That’s dumb.

So far I’ve structured it into roughly three pieces or doors, if you’ll excuse my intense lameness.

The first is a simple Next.js frontend. It has styled-components set up, with basic styling already put in, with a nav bar and space for blank pages. To me this is the bare bones of a user facing application. Perhaps you need to interface with a specific restful API, or maybe it doesn’t need to communicate with anything and you don’t need to store/move data serverside. This is where you start. I chose Next.js for basically the reasons they list on their front page. It’s dead simple. Routing is dumb easy. Static assets are served easily. I didn’t include a state management library because this is intended for lightweight stuff. Maybe something in the future though?

The second is an Express API. That’s it. Boom. A backend. No DB, just something that takes requests or sends requests. I’ve found in my travels that sometimes this is all you need to get started. I’m not entirely sure on how well this fits in with the project. Maybe I’ll never use it. But I think it’s a valuable tool to have in my toolkit anyway, and you’d be surprised what kind of data manipulation you can do with just Node. Potential for websockets here and other cool stuff.

The third and final is the pièce de résistance. The talk of the town. The one you’ve all been waiting for. The big kahuna. This piece will have a couple different versions under the same umbrella.

The first is a tightly-coupled frontend and backend. To accomplish this we’ll be using Next.js, Apollo Client, GraphQL Yoga, and Prisma. You’ll be left with a blank database, and components that are set up in various ways to allow easy data fetching and local state management. From here you can add any type of data model to your backend, and move into userless application development. This is the stripped lightweight version of the third piece.

v2 is user integrated. Permissions, authentication, password reset or account recovery, maybe optional 2FA, user profiles, protected routes, user administration. All with corresponding frontend and backend functionality. It means you can get right to the actual development. All you have to do is add data to the user datamodel and get rocking.

v3 includes support for teams. Team invite, management, permissions, and potentially communication.

And last but not least, in fact maybe the most important, is payments. You’ll be able to optionally include support for Stripe single payments, Ecommerce style payments, or subscriptions.

Wow, what a fucking list. When I write it out like that it seems a little bit more daunting than what I was intending. Kinda scary. Luckily, V1 of everything besides users, teams and payments is done already!

Oh and one last thing: I intend on building extensive written and video documentation. A few videos about initial setup of an application, and some basic data manipulation. How to add data to the DB models, how to access that data from the front end, and how to update it. Written docs about how certain components are structured and used.

Boom. Insane, I know. Will I ever finish? Goodness I hope so. Wish me luck.

Yo if this interests you, if it’s cool, if it’s hip, it would really make me happy if you share it, clap for it, comment on it, whatever. A retweet goes a long way let me tell you what. Especially since I directly associate my self worth with the amount of views I get. Ha ha ha. Sigh.

Love you all ❤ Do something great.