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

The frontend file structure is as follows:

├── public
│   └── icons
├── src
│   ├── apollo      // Apollo setup functionalities
│   ├── assets      // Static assets (e.g. pictures)
│   ├── boot        // Quasar Boot files, see https://quasar.dev/quasar-cli/boot-files
│   ├── components  // Vue components
│   ├── css         // Styling
│   ├── data        // Files containing constants (e.g. ROUTES) used throughout the app
│   ├── helpers     // Helper files containing general functionalities
│   ├── 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. AuthenticationService)
│   ├── flox          // Flox contents
│   │   ├── modules   // Flox modules
│   │   └── core      // Core Flox contents
│   └── store       // State management / data store
│       └── authentication // Individual store modules
│       └── ...
├── 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