Mihail Raulea

Posted on Sep 19, 2019

Building SaaS?

#javascript #opensource #react #angular

We're giving away user management, UI and recurrent billing(with Stripe) for free(MIT license). We've used Adminator and made it functional by slapping Firebase and Svelte on top. Grab it from Github: https://github.com/mihairaulea/DashboardHeroLite

Won't bore you - you know you need user management. You know you need a UI. Billing is what keeps your company alive, so better have that, too. Here's how to do it quickly and cheaply with Dashboard Hero Lite, and get your MVP up and running this week.

After becoming a master at building MVPs(and failed startups), one thing stuck. How to build quickly, cheaply and (somewhat)reliably.

After you've built out the core of your product, you should be able to present it to the world and start getting revenue fairly quickly. Only, that's not usually the case - we've got a customer which spent 181k USD on building just that before hiring us.

Dashboard Hero aims to help SaaS companies scale quickly and focus on the core of their product.

User management

At a bare minimum, you need a register and login interface. The point is to collect emails, so a communication channel can be established with your user.

You also need to filter access and render UI differently, based on the role of the user(authenticated vs guest, admin vs regular vs other roles).

Would be nice to be able to let user login and register with Facebook and Google(OAuth), block certain users, manually reset the password from a master admin dashboard and verify the email address.

How about registering a user manually? We've got that, too.

For details on how this is accomplished, read the Architecture section.

UI

Maybe you've put in the 3–6 months required to learn and become productive with React, Angular or Vue. Maybe you even like those frameworks. I haven't and don't.

Startups are strapped for resources - focusing on front-end best practices is the last thing you want to do in a hyper-competitive environment.

Svelte is pure awesomeness - it perfectly applies the Pareto principle: get 80% of the benefit with 20% of the effort.

You get components - isolated pieces of code, comprised of HTML, CSS, and Javascript. But none of the React hooks, component lifecycle, and Webpack build jazz. You'll be dancing on the keyboard like it's 2004. The idea is to ship the project and start learning and iterating.

Examples of components include the Menu and the TopBar, but also Buttons of different colors, notifications and more.

Svelte is one of the few frameworks I've used in 14 years of coding that does not get in the way AT ALL - simply write Html(with a templating system), CSS and javascript.

Explanations, hands-on and examples, in the Architecture section.

Billing

Dashboard Hero Lite is loosely integrated with Stripe. You can generate a URL for a plan subscription in the Stripe Billing dashboard, and manually assign it in Firebase. It should be enough for your first 10–20 customers.

Article and video explaining how to do this, coming soon.

Architecture

After cloning the admin dashboard GitHub you will notice two important folders: src and public. Rollup(a build tool) takes as input the src folder and produces the public version of your web app. The public folder is what gets deployed to Firebase Hosting.

The source(src) folder

App.svelte is the entry point for our admin dashboard. It fetches a Firebase instance and renders different components if the user is logged in, or not.

Pretty straight-forward, right? You can use Firebase Cloud Functions to hide sensitive business processes, and also deny access to a resource if the user is not logged in.

Important components are the MenuDrawer and the TopBar. The MenuDrawer tells the router which components to render, by using the Link tag.

Here's an example:
UI Elements

At build time, Svelte knows how to unpack the Link attribute

The TopBar renders the user email and allows one to sign out.

ContentContainer lists the Routes(pages) available and maps the URL path to the svelte Component. Only displayed when the user is logged in(see App.svelte).

UserContainer has a similar structure and handles Login and Register.

To run the project on localhost, from the project root, do:
npm install
npm run dev

To deploy to Firebase and get the whole world see your awesome admin dashboard: change the firebase credentials in src/common/resources/firebase/index.js(line 6) with your own, and from the project root, run:

firebase deploy

Conclusions

This article tries to keep it short and sweet, so you get up and running in no time. There's no substitute for reading and tinkering with the code yourself :)

Let us know in the comments what you're building - always passionate about new tech. Also, let us know if there's something that would need further explaining. And if you've found a bug - don't be shy, open an issue on GitHub.

Just saying hello also works :)