Four weeks ago to this day I decided I want to try and start a business on my own and started creating a simply SaaS MVP - Shiftly. It started as an excuse to learn Sveltekit and Vercel, but after I realised how insanely quickly I can work with these tools, I decided to actually give it a real go and start a business.
About Me
Hey 👋, I'm Jacob, a Web Developer from the UK, and I've done it all. I've worked at start-ups, big corporates, local family businesses and everything in-between.
I've been a senior Angular developer for the last 5 years or so and felt I was lagging behind how Web Development is moving these days with SSR frameworks and futuristic zero config tools like Vercel and Supabase. I feel a bit late to the party, but from a long-term dev set in his ways - this new world is amazing.
How I used to work 🐌
So I've been an Angular developer for 5 years, however during that time I have done my fair share of Full-stack development with NodeJS. I'm familiar with AWS, servers and databases. But my passion is front-end.
So every time I've thought about starting an app for reals, I always get to hosting, or the backend or creating an API or authentication and just give up. I hate doing all of that. I can... But it's always felt like such a blocker.
My last project ended after weeks of me trying to perfect a Serverless infrastructure with an API and autoscaling EC2s before I'd even thought of a name for my last idea! Clearly, I was getting nowhere fast like this.
Introducing Sveltekit 💪
On a whim, I decided that I wanted to see what the hype was with Svelte and set about creating a few small projects thinking "Yeah ok it's nice, but maybe only for small projects..."
I saw the appeal immediately of how easy computed properties were.
Just a simple
$: computedVariable = anotherComputedVariable * 2
And I loved how easy Sveltekit made routing and forms. Suddenly I questioned if I'd ever touch Angular again!
Introducing Supabase 🚀
As I was looking at Vercel hosting, which I noticed had a zero-config adapter for Sveltekit applications, I found Supabase and a lightbulb went off in my head.
Suddenly everything clicked into place. Now I could create complex backend systems, using databases which I'm happy to use, but without any of the ridiculous complexity that comes with creating an initial back-end infrastructure!
I started looking at Supabase, which also has complete documentation for Sveltekit, and was able to get a prototype working in an afternoon with full Authentication-support and a few CRUD entities.
This, was, amazing.
Creating the Shiftly MVP
So after I had authentication in place, I set about creating a mechanism for users being able to invite other users to their Organisation. Which thanks to this superpowered stack only took a few hours to implement.
I then decided to implement Stripe into my app if I was ever going to try and get people to use this app.
Stripe with a traditional hosted API server approach that I used to use would have been a nerve wracking series of protected API routes and environment variable mishaps - as it always is!
With Sveltekit I was able to use environment variables on both my local machine and in Vercel with, again, zero config. Sveltekit even stops you from using PRIVATE_ environment variables in your front-end code!
This was the first time I'd used Stripe properly trying to actually create a payment system with it for recurring subscription payments. So it took a few days of tinkering with Stripe to make sure I was properly updating my user's db when a user had signed up. And how do I detect if a user has a card stored in Stripe? But in the end I'm happy with my current integration. It's somewhat rudimentary, but hopefully enough to get this app started!
So then after I'd implemented Stripe I was looking at adding Tailwind into Shiftly. I have used Tailwind for years now, but I thought I'd do this project without it. But every time I try to get out, Tailwind pulls me back in!
Then I discovered yet another tool that would increase my power again:
Introducing SkeletonUI
By this point in development, after a few weeks of creating Shiftly. I thought the game had been changed so many times I wasn't even playing the same sport anymore compared to how I used to develop apps. I thought it wouldn't change again and I was happy with the stack I had.
I watched a video by Huntabyte about SkeletonUI for Svelte. And well. Since I was already using Tailwind I decided to give it a shot.
Oh I'll only use it for the table component
I said. After a few minutes I had the perfect table.
Oh I'll only use it for some form styling
I said. And again, in less than an hour had refactored all my forms to use the Skeleton variant-form-material styling.
Oh ok I'll only use it for a top nav inside my application, but that's it
I mean... Talk about denial much. I instantly fell in love with Skeleton and spent the next two days refactoring my entire app to use Tailwind and Skeleton wherever I could.
Things now that would've not just taken a while, like a response modal component. Were instant.
Or even a menu drawer on mobile devices. Not impossible to create, but time consuming. Now is instant. Boom. Import the Svelte component and right awesome, you now have a complete Drawer for navigation on mobile.
So now I'm feeling pretty invincible, convinced I can implement any feature in only a day or two. Until I decided to implement an AI Shift builder feature. And oh boy was I... Completely correct.
In 3 hours I had a full feature for creating shifts in Shiftly from a text prompt. A feature that would have taken weeks with my old Angular and Nest setups.
Adding ChatGPT
One night, after the son and wife were in bed. I'd been thinking a lot about implemented some ChatGPT into Shiftly and thought "pfft, it can't be that hard!" And it wasn't.
With Sveltekit I can easily add a modal with a form, send the user's message to the backend where I can message the prompt and the response from ChatGPT. Now I can simply say:
Shiftly, can you create a shift for Bob, tomorrow at 12pm-8pm?
And it will go ahead and create a shift without you having to fill out a form.
Releasing Shiftly
So if I wasn't feeling absolutely invincible about how fast Shiftly is to develop, I certainly was now. I am confident I have stumbled into my personal, favourite stack of all time. In my whole life, I now feel as productive as I've always wanted to be thanks to these new technologies.
I decided to take the plunge and buy a domain and get in touch with some people and small business I knew. My dog walker, groomer, barber, things like that. And pleased to say, through some divine intervention they agreed to sign up and try out my app.
To sum up
I'm now super excited about where Shiftly can go. I'm not trying to create the biggest app in the world. I don't care if not everyone uses it. But if it can get any steps closer to leaving my day job, I'm happy!
This has been a whirlwind journey just from being a bit sick of using Angular and Nest and deciding to explore other tech stacks.
If you're wanting to really quickly develop an MVP or rebuild an existing one. I would highly recommend Sveltekit, Skeleton, Supabase and Vercel.
If you read this far, thank you, and good luck!
Jacob @ Shiftly
https://www.getshiftly.com
Top comments (8)
Inspiring!!! I tried Svelte + Tailwind a couple months ago and it was a game changer. As I am starting a new project, I'll give Supabase a try, thanks for writing this article and good luck with getshiftly!!
Nice choice! FYI, we are building ZenStack: a full-stack toolkit on top of Prisma with a powerful access control layer. You can check out the example of a fully functional SaaS Todo app built using Sveltekit + ZenStack:
github.com/zenstackhq/sample-todo-...
With the policy-enabled auto-generated API, It only has around 300 lines of Typescript code including multi-tenant and permission control.
Congrats on your MVP!
How did you accomplish this? I am trying to do something similar and not able to figure out how to implement authorization. Did you do it yourself or used some library?
Also, did you use private variables for Supabase as well? Or just for Stripe?
I got
The Crusaders - Rhapsody & Blues
Peter Frampton - Frampton Comes Alive
The Yellowjackets - Samurai Samba
Huey Lewis & the News - Fore!
Chuck Mangione - Feels So Good
Gamma - Gamma 1
Spyro Gyra - Free time
And a few more that I can't think of lol got a TON of Jazz and Jazz Fusion.
From where did you learn Supabase?
Mostly from their docs! But also I watched a lot of their YouTube videos, especially about RLS
you should write another article related to creating multitenant database using RLS, it' will be amazing :)
MVP = Minimally Viable Project. I'm an HW/SW/Embedded guy so this term was new to me. Had to look it up :-)