Matchy Frontend

Read the contributing guide first

Table of contents

• Prerequisites
• Setup
• Recommended Tooling
• Used Libraries
• Recommended IDE Setup
• Customize configuration
• Project Setup
  • Re-generate Supabase Types
  • Compile and Hot-Reload for Development
  • Type-Check, Compile and Minify for Production
  • Run Unit Tests with Vitest
  • Lint with ESLint
    
    
    
    

Prerequisites

• Node 16 or greater. Don't install Chocolatey.
• A code editor (see below)
  
  
  
  

Setup

1. Fork the repository
2. Clone your fork
3. Open the frontend folder in your IDE
4. npm install
5. npm run dev
   
   
   
   

Recommended Tooling

I recommend using Visual Studio Code with

• Prettier Extension to format your files
• Settings → Format On Save → Enable ("editor.formatOnSave": true,)
  • If you are using autosave: Settings → Autosave → On Focus Change ("files.autoSave": "onFocusChange",)
• Vue Language Features (Volar) Extension for Vue.js
• TypeScript Vue Plugin (Volar) Extension for Vue.js. Take-over mode is not recommended, so just get this plugin.
• (optional)Error Lens to see all the errors inline with the code
• (optional)TODO Highlight Extension
• (optional - project specific)Eslint Extension to automatically show lots of little warnings
• (optional - project specific)i18n Ally for translating and internationalizing code

As for settings, I personally am a fan of those "inlay hints".
I also totally recommend using a decent browser such as Firefox or a Chromium browser with

• Vue Devtools to get top-notch debugging support
  
  
  
  

Used Libraries

The most important ones are

• Typescript - Typesafe Javascript
• Vue 3 - Vue 3 with the composition API
• Vuetify 3 for our UI components and for icons

We are also using

• Vite - a speedy Vue.js framework
  
  
  
  

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Page Structure

Vuetify wraps a lot of standard component to facilitate usage with the framework, therefore a couple of rules should be followed when creating pages:

• The main content should be wrapped in <v-main>. This gives it an offset to compensate for the Header.
• Generally when wrapping many elements inside another element <v-container> should be used as a wrapper.
• For grid-layout use <v-row> and <v-col>.
• Footers should use the <v-footer app> component with the app prop set to true.
  • Do not abuse footers for positioning. They are semantic elements that convey meaning.
• Most common style options are available as utility-classes. Check Vuetify's Styles and animations

Re-generate Supabase Types

Read here about Supabase Typescript types

npm run type-gen

Compile and Hot-Reload for Development

npm run dev

Development and Testing on the Local Network

npm run start-network

and then visit the sites from other devices. Make sure to use https.

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

npm run lint