BACKEND: GOOGLE FIREBASE v9

FRONTEND: VUE v2/3

Install

First you have to install Node Version Manager To confirm nvm is installed successfully run

nvm -v

Than run in powershell **as superuser

nvm install 18.5.0 x64

You should now be able to run (from both bash and powershell)

node -v

Now install pnpm

npm install -g pnpm

While being in project_folder directory run

pnpm i

To install all the dependencies in node_modeles/

Usage

To use pnpm you need to be inside frontend/ directory.

Development

Just run and visit http://localhost:5000

pnpm dev

Build

To build the App into static files, run

pnpm build

Testing

pnpm test

To run in seperate UI:

pnpm vitest --ui

Structure

• cypress/ end2end testing
• public/ static files that won't be processed on build. They are simply copied alongside build result
• src/
  • components\ Vue components
  • composables\ functions and vue composables
  • layouts\ components which help to structure how page looks
  • model\ CANDI 2 form definition. Read more in src/model/README.md
  • modules\ extra modules definitions
  • pages\ route components Read more
  • store\ pinia store definitions
  • styles\ stylesheet files

Features

• ⚡️ Vue 3, Vite 3, pnpm, ESBuild
• 🗂 File based routing
• 📦 Components auto importing
• 🍍 State Management via Pinia
• 📑 Layout system
• 📲 PWA
• 🎨 UnoCSS - the instant on-demand atomic CSS engine
• 😃 Use icons from any icon sets with classes
• 🗒 Markdown Support
• 🔥 Use the new <script setup> syntax
• 🤙🏻 Reactivity Transform enabled
• 📥 APIs auto importing - use Composition API and others directly
• 🖨 Static-site generation (SSG) via vite-ssg
• 🦔 Critical CSS via critters
• 🦾 TypeScript
• ⚙️ Unit Testing with Vitest, E2E Testing with Cypress

UI Frameworks

• UnoCSS - The instant on-demand atomic CSS engine.

Icons

• Iconify - use icons from any icon sets 🔍Icônes
• Pure CSS Icons via UnoCSS

Plugins

• Vue Router
  • vite-plugin-pages - file system based routing
  • vite-plugin-vue-layouts - layouts for pages
• Pinia - Intuitive, type safe, light and flexible Store for Vue using the composition api
• unplugin-vue-components - components auto import
• unplugin-auto-import - Directly use Vue Composition API and others without importing
• vite-plugin-pwa - PWA
• vite-plugin-vue-markdown - Markdown as components / components in Markdown
  • markdown-it-shiki - Shiki for syntax highlighting
• VueUse - collection of useful composition APIs
• vite-ssg-sitemap - Sitemap generator
• @vueuse/head - manipulate document head reactively

Coding Style

• Use Composition API with <script setup> SFC syntax
• ESLint with @antfu/eslint-config, single quotes, no semi.

Dev tools

• TypeScript
• Vitest - Unit testing powered by Vite
• Cypress - E2E testing
• pnpm - fast, disk space efficient package manager
• vite-ssg - Static-site generation
• critters - Critical CSS
• Netlify - zero-config deployment
• VS Code Extensions
  • Vite - Fire up Vite server automatically
  • Volar - Vue 3 <script setup> IDE support
  • Iconify IntelliSense - Icon inline display and autocomplete
  • i18n Ally - All in one i18n support
  • ESLint