Meet and greet

First of all, congratulations on your purchase, i think you've made an excellent choice! We appreciate you being here, and hope building your project will be as smooth as it was for our other customers.

Here's a brief overview of what you'll find in this guide, and how to use it.

Setting up

Intended to get your feet wet, and quickly deploy locally. If you're the tinkerer type and have some development experience, this should be enough to jump start you. You can start instantiating components, playing around with the layout and data sources, and even deploying to your own URL. You will refer back to this every time you go live or ship a new feature.

Basics

As developers, we know what conditional and loop statements are. This part is meant to explain javascript-specific constructs and point you to the unit tests in the project where you can play with these concepts. Here we also introduce Svelte framework and the build tool, Rollup in a high order fashion. You will get detailed info on this in the Architecture section.

Project structure

You might find that the components we've bundled with Dashboard Hero are useful as they are - or you might want to start from scratch, from our template project, and import components and data sources as you go.

Whatever you need to do - use just a couple of our components, with or without a data source, subtract from the example or build on top of our skeleton app - you will find detailed instructions in this section. Where to find components, how to customize their look, how to customize their data source. It's all here.

We have two flavours - one is a typical folder structure, if you prefer moving files yourself. Git is a single folder with multiple branches, where you'll find components and other features that can be merged directly into your project.

Architecture

At times, a deep understanding of the components included in the project, and how they fit together is crucial for customizations that we didn't think of. That's why we've drawn diagrams and explained how everything comes together. From the architecture of the project, to the build system and the deployment(CI/CD) pipeline you'll use to ship.

We also explain WET vs DRY engineering principles, and how this can be a 10x productivity enabler for your project.

Components

We've got north of 100 components. In this section, you'll get detailed info on each one - what parameters they expect, how to customize them visually or functionally. For each component, we've got an online sandbox that can be used for quick experiments or collaboration with team members.

Data sources

Most UI projects don't do any heavy lifting in this area, and that's why we recommend using Firebase. However, other data sources can be accomodated. We discuss how to test your data layer implementation separately before including it in your main project, bests practices and connecting these to your components. We also discuss security and how to enable access to data for a certain user or group of users(think Basic vs Premium plans).

User management

We've seen big companies mess this up. Why insist on re-inventing the wheel? Dashboard Hero comes with functional screens that you can almost drag and drop in your app for everything you might think of. Logging in, registering(with 3rd party accounts such as Facebook, Google, Microsoft), validating email, phone number. Forgot password screens and magic sing-in links are explained. Custom flows, like collecting information on the user before signing up and manually approving/rejecting users is also discussed here.

Dashboard: a full project

This section shows you how everything fits together - how we've used the page router to direct users to the login or content screen, how we've instantiated components and connected them to data sources.

Roadmap/tutorial

If you need guidance in building your UI, we have a very opiniated tutorial for you. It covers building the UI in it's simplest form(html + css) using our started project. You are then instructed on how to produce a data layer and how it typically looks for an UI project. Next, we talk about how to use our ready made components and or how to build your own from scratch. Finally, we talk about connecting those to data sources and shipping/deploying the project, live.