Vitesse is an opinionated Vite starter template made by @antfu for mocking apps swiftly. With file-based routing, components auto importing, markdown support, I18n, PWA and uses UnoCSS for UI.

However, most industry standard applications follow a microservice based modular clean architecture pattern instead of monolithic architecture. Because it gives a better team collaboration advantages and efficient future maintainability. This is exactly what you will get in this repository which is a forked version of vitesse template with some customizations.

• Apollo GraphQL with Typescript support
• Tailwind CSS V3 instead of UnoCSS
• Modular Architecture Pattern with separation of concern

Quick Overview

First thing you will notice there are no components/, pages/, stores/, styles/ folders under the src/ folder. You will see,

• common/
• orders/
• users/

and that’s it. Everything has been moved into the common/ folder (global settings). The orders/ and users/ folders are more like modules (modular architecture). In this project, I have made a demo order process using these two modules but in your case, you will delete everything other than the common/ folder. You will add a new module whenever you need it without breaking any changes. The main advantage you can see is that you don’t have to jump around different folders to implement a feature that is completely separate from other features (separation of concern). You can add the following folders in each module without any manual imports,

• components/
• modules/
• pages/
• stores/

I will highly recommend you to try Vitesse using monolithic architecture first. Then you can move to my repo https://github.com/shamscorner/vitesse-stackter-clean-architect when you feel comfortable.

// syntax highlighting example
function vitesse() {
  const foo = 'bar'
  console.log(foo)
}

Check out the GitHub repo for more details.