03_Tech Stack

The technology stack within this repository should cover all aspects of a basic application. On a basic level, it is structured as follows:

Level	Technology	Description
Server Infrastructure	AWS	Infrastructure where hosting, authentication, data storage, etc. happen
Database	PostgreSQL	Data storage & access
Backend	NestJS	Link between frontend and database / other services
Frontend	Vue 3 + Quasar CLI	User-facing part of the application

Frontend

The Frontend is built using the technologies outlined below. You don't necessarily need to read the full documentation of every technology, but it's a good idea to at least have a general understanding of what each technology is used for, and how it works.

Name	Description
Typescript	Language that is used; JavaScript with syntax for types
Vue 3	Progressive JavaScript framework (although we use TypeScript)
Quasar	Framework for components and many essential functionalities
AWS Cognito	User authentication
Vue Apollo	GraphQL integration
GraphQL	Structured database query language
Vue i18n	Multilanguage support
Pinia	State management / modular data store
Jest	Testing framework
Capacitor	Native iOS/Android application development tools (optional)
Lodash	Utility library for basic functionalities
date-fns	Date manipulation library
Vite	Build tools (instead of webpack); we use some polyfills on top
VueUse	Vue utility library full of useful components
Joi	Input validation library
Stripe	Processes Credit-Card Payments

The frontend file structure is as follows:

├── public
│   └── icons
├── src
│   ├── apollo              // Apollo setup functionalities
│   │   ├── index.ts        // Middlewares (auth, caching, ...)
│   │   ├── invalidation.ts // Cache invalidation
│   │   ├── mutations.ts    // Mutation execution helpers 
│   │   └── query.ts        // Reactive query execution helpers
│   ├── assets              // Static assets (e.g. pictures)
│   ├── boot                // Quasar Boot files, see https://quasar.dev/quasar-cli/boot-files
│   │   ├── apollo.ts       // Boots apollo client and caching
│   │   ├── auth.ts         // Boots auth $store and server/client authentication
│   │   ├── axios.ts        // Boots and injects axios
│   │   ├── i18n.ts         // Boots vue-i18n and sets up locales
│   │   └── router.ts       // Boots vue-router and handles route protections
│   ├── components          // Vue components that are used cross-modules
│   ├── css                 // Styling
│   │   └── fonts           // .woff and .woff2 fonts
│   ├── flox                // Flox core functionality and flox modules
│   │   ├── core            // Core functionalities, used by multiple flox modules
│   │   └── modules         // Modules, mostly integrated end-to-end with the backend
│   │       ├── XXX                 // Module name, contains std. folder structure
│   │       │   ├── components      // Vue components provided by this module
│   │       │   ├── entities        // Typescript Object modelling backend entities provided by GraphQL
│   │       │   ├── enums           // Enums
│   │       │   ├── services        // Service files abstracting queries/mutations
│   │       │   ├── stores          // Pinia stores provided by this module
│   │       │   ├── tools           // Helpers provided or used by this module
│   │       │   ├── xxx.query.ts    // GraphQL Query definitions
│   │       │   └── xxx.mutation.ts // GraphQL Mutation definitions
│   │       └── ...
│   ├── format      // Visual formatting functions
│   ├── i18n        // i18n translations
│   ├── layouts     // Vue Page Layouts (shown within pages)
│   ├── pages       // Vue Pages
│   ├── router      // Routing logic
│   ├── services    // Services that are shared throughout the app (e.g. ErrorService)
│   └── stores      // State management / data store, module independent
│   ├── ├── ssr     // Server-Side rendering store
│   ├── └── ...
│   └── tools       // Generic helpers
├── src-capacitor   // Capacitor (iOS/Android) files (optional)
│   ├── android
│   └── ios
├── src-pwa         // PWA-related files, see https://quasar.dev/quasar-cli/developing-pwa/introduction (optional)
└── src-ssr         // SSR-related files, see https://quasar.dev/quasar-cli/developing-ssr/introduction (optional)

Backend

The Backend is built using the technologies outlined below. You don't necessarily need to read the full documentation of every technology, but it's a good idea to at least have a general understanding of what each technology is used for, and how it works.

Name	Description
Typescript	Language that is used; JavaScript with syntax for types
NestJS	Link between frontend and database / other services
TypeORM	Object-relational-mapping for database access
GraphQL	Structured database query language
Express	Node.js framework (used by NestJS)
Multer	Package for handling multipart file upload
Jest	Testing framework

The backend file structure is as follows:

├── dist              // Built application output
├── node_modules      // Dependencies
├── src
│   ├── auth          // Authentication logic/rules
│   ├── base-entity 
│   ├── config        // Configuration files
│   ├── modules       // Individual modules
│   │   └── user      // A module
│   │       ├── dto       // Data transfer objects
│   │       └── entities  // entity definitions
│   └── flox          // Flox contents
│       ├── modules   // Flox modules
│       └── core      // Core Flox contents
└── test              // e2e tests

Database

The database uses PostgreSQL and is accessed directly from the backend, using TypeORM. See the Development Setup wiki page for more information on working with the Flox database.

Infrastructure

Flox and projects derived from it use AWS server infrastructure to host the backend, database, and frontend. The following technologies and services are used throughout:

Name	Description
Terraform	Infrastructure-as-code (IAC) tool
Terraform Cloud	Automated, cloud-based Terraform runs
AWS Cognito	User authentication & permissions
AWS S3	File storage
AWS Elastic Beanstalk	Auto-scaling backend deployment
AWS SES	E-Mail sending
AWS ECS	Containerized test systems
AWS Route53	Domain management
AWS Route53	Domain management
AWS Certificate Manager	SSL Certificate management
AWS Cloudtrail	Logging
AWS IAM	User role & permission management
AWS RDS	Production database
AWS SSO	Access management
AWS Backup	Backups