Basic

Here's how your admin dashboard works, in plain english.

Client

The most basic building blocks you will work with are the Svelte components. These are simply files that resemble an all too familiar HTML file: they have a script, a css style and an html part, that also happens to have a template system in place. The menu and the top bar are examples of such components. You can include components inside other components - for instance, the Menu component includes button components.

If you were to implement your dashboard using vanilla html, you would have to write on every single page the code for your menu - this is prone to errors and boring. Instead, on each page that needs to have a menu, you will include the Svelte component, and simply type <Menu /> in order to display it. You can rest assured that each time you modify something in the Menu component, it will change on all your internal admin pages.

The entry point for the app is the App.svelte file. Here, we decide what to show the user if it's authenticated or not, and instantiate the Router. The Router knows how to draw different Components based on the url the user has typed in.

How do we avoid importing the Menu and TopBar component in each page component? We have a component named AdminLayout, where we instantiate the Menu and TopBar components. Then, we tell the router that we have a parent component, and a set of nested routes. The nested routes will be the inner pages of our admin dashboard.

The firebase client exposes functions that help us deal with authentication: log in, register users, reset password. Firebase also helps us work with files and call cloud functions(our server-side or backend system).

All of the above can be found in the src folder.

Server

The only server component your admin dashboard needs are the cloud functions, which can be found in the functions folder.