We’re giving away user management, UI and recurrent billing(with Stripe) for free(MIT license). We’ve used and made it functional by slapping and on top. Adminator Firebase Svelte 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 Adminator, 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. Adminator 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 section. Architecture 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. It’s 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 section. Architecture 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 from GitHub you will notice two important folders: and . Rollup(a build tool) takes as input the src folder and produces the version of your web app. The public folder is what gets deployed to Firebase Hosting. src public public The source(src) folder 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. App.svelte 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 and the The tells the which components to render, by using the tag. MenuDrawer TopBar. MenuDrawer router Link Here’s an example: <Link to=”ui”>UI Elements</Link> At build time, Svelte knows how to unpack the Link attribute The renders the user email and allows one to sign out. TopBar 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). ContentContainer 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 with your own, and from the project root, run: src/common/resources/firebase/index.js(line 6) 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 :)

Facebook

Google

Stripe

Read My Stories

Too Long; Didn't Read

CTA: Download the FREE AI Productivity Shift report

This Is How We Build User Management System For SaaS MVP

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 React Admin Dashboard Templates For Your Next Website

10 Fascinating PHP and PHP-friendly admin templates

10 Dashboard Templates and Effective Indicators for Tracking KPI’s

5 Cool React Admin Templates for Bootstrap Dashboards in 2021

6 VueJS Admin Templates With Cool UX Design You Should Check Out

10 React Admin Dashboard Templates For Your Next Website

10 Fascinating PHP and PHP-friendly admin templates

10 Dashboard Templates and Effective Indicators for Tracking KPI’s

5 Cool React Admin Templates for Bootstrap Dashboards in 2021

6 VueJS Admin Templates With Cool UX Design You Should Check Out

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps