The Starter App is meant to be more than just a simple boilerplate. The main idea is to provide full base functionality for features and issues that will quickly arise as the app starts to grow. It also comes as 2 in 1 app and admin with some standard sample CRUD out of the box.
The app outlined in the features below is a completely separate codebase from the API. Though the Starter App is designed for the Starter API it is not required and both the App and API can be used separately.
The only currently available version of the Starter App is a Vue 3 SPA. Support for React, Next, Nuxt, etc may come later depending on interest and demand.
Demos:
The Starter App is set up with Yarn for it's cross env support which allows multiple sub projects within the same repo. This makes for better organization of separate "app" and "admin" projects along with a "shared" common folder for reusability. Additional sub projects can then be added as needed, quickly and easily.
Vite has pretty much become the de facto build tool for Vue 3. It comes with a solid dev server & near instant hot reload. It is also comes with a great set of plugins such as svgLoader, tailwindcss and vueDevTools which are included in the Starter.
As TypeScript becomes increasingly more common it has been used for the Starter as well. Though there may be some arguments for it's usefullness in smaller starter type projects, it's so easy to learn that it really makes little sense to not use it at this point compared to the benefits it provides.
The default component library used in the Starter is PrimeVue 4, mainly since it has been well supported for a long time and continues to grow and transition with changes to front end dev. Version 4 supports layers, presets, tailwind integration and much more making it very easy to fully customize. With that said the Starter App takes a very modular approach to components with hot swap functionality in mind. Support for Reka UI and potentially other component libraries will be coming soon.
Like TypeScript, Tailwind is becoming a bit of a de facto standard and quite hard to live without once you've used it. The start App comes with Tailwind 4 out of the box and also includes some examples on how to manually include classes which are used dynamically via props.
The Starter App is built with mobile in mind and works great in all screen sizes.
Using icons should be simple but tends to be a bit of a pain point for easy customization. The Starter App is setup with the svgLoader plugin which autoloads icons placed in an icons directory on demand. This gives you full control for the icons used which can then be pulled from multiple icon libaries as needed.
A very simple composable/api approach is taken in the Starter APP which tries to keep things in very small resuable units of logic. It also comes with a handy reusable useApi composable for interacting with APIs containing commong logic for handling state and data with an option to persist the data in a store or leave it as single use.
The stores are compeltely isolated from the rest of the app logic and strictly used for storage. In the Starter App they should be thought of as mini localized copies of the database with specific operations for manipulating that data and do not directly interact with the API. This makes them much easier to consume with other composables that talk to the API in various ways (you can read more about this decions based on this article here).
Support for multiple languages with preload ships out of the box in the Starter App. It supports 3 levels of separation which means language files can be loaded as needed at the site, layout and page level. There is also integration with route interceptors to trigger and detect when these language files are loaded which can then be used to trigger site loaders and page transitions making for a much smoother user experience.
Support for app config which combines local config at the app level with config pulled from the api is also available. This typically will load only once at the beginning of the app and can also then be integrated with initial app loaders.
The Starter comes with a few common layouts out of the box. One is the the "center" layout, useful for auth login and register type pages. A second is the standard "header/body/footer" layout with an optional "aside". There is also <router-view> integration with the various site loaders to make for smooth page transitions as async content is loaded on demand.
With every SPA app there can be a slight delay where a blank page shows up while the initial app.js is loaded. There can also be a bit of a dark/light mode flicker depending on the initial settings there as well. The Starter App handles all of this gracefully with some Cover components and a tiny bit of hardcoding in the index.html which makes for a seamless smooth load every time.
Support for maintenance mode and version updates requiring a refresh is also setup and available out of the box. This is done via specific error codes from the api which are checked for in http intercepts and can be changed to whatever the API being consumed supports.
The standard set of auth pages and actions are also included out of the box. This includes login, register with auto login option, account activation and resend and finally, password reset and update.
The standard set of account update features are also included out of the box. This includes avatar update and delete, profile info update along with locale and timezone selection.
There are also some basic features for billing including credit card update and delete. As well some basic subscription signup with feature unlocks which in the sample app gives access to more todo lists that can be created.
The app of course would not be complete with some basic notifications functionality. This is also built in to the initial version as a slide out drawer which makes it easier access and perform operations on the notifications as a single or whole.
Of course where would be in this day and age without a dark/light mode switcher. The toggle is designed to initially load the preset from the user's browser. From there if a manual swap is made via the controls it will then stick with that choice.
It is quite common for apps to include some sorting feature at some poing. A sample of this has been provided with tasks sorting in the sample code via the SortableJs library.
The Starter also ships with a basic todo / task CRUD that provides a sample of the standard setup for routes, pages, stores, composable to fetch and display data from the api. This servers as a basic outline that can be repeated for much of any app.
On top of all the above there is also a full fledged admin app. It comes with a basic user and todo CRUD which shows all users and todos in the system. These basic admin pages also come with search and filtering making it easy to find particular items as well as being able to view individual users and todos allowing admins to drill down on specific administrative tasks for those items.