Frontend

The frontend is a modern TypeScript + Vue 3 (Composition API) single page application. We use Tailwind for styling.

Reading materials

Must reads:

• Tailwind core concepts: https://tailwindcss.com/docs/utility-first

• Vue introduction: https://vuejs.org/guide/introduction.html

Optional:

• Why does ESLint complain so much? https://vuejs.org/style-guide/

• Vite does everything so we don't have to: https://vitejs.dev/

Development environment

We use ESLint and Prettier to automate the process of maintaining code quality (as much as possible). They are both very opinionated which is a good thing but it can also be quite annoying to navigate the rules.

We recommend using VSCode with some plugins which make developing the application much easier. Recommended plugins:

• ESLint - enforces TypeScript and Vue conventions

• Prettier - automatically formats code on save

• Tailwind CSS IntelliSense - you wouldn't want to read about every single class Tailwind generates, this gives hints and autocompletion so you don't have to

• Volar - Lots of magic stuff for writing Vue 3