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 |
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:
├── dist // Bundled application output
├── node_modules // Dependencies
├── public // static files, are copy-pasted to dist directory at build-time
│ └── 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)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 |
| Class Validator | Validation annotations on database entities |
| Joi | Input validation library |
| Lodash | Utility library for basic functionalities |
| Node Mailer | Sending mails from node.js |
| Passport | Auth strategy resolver for nestjs |
| Stripe | Processes Credit-Card Payments |
| uuid | UUID generator |
The backend file structure is as follows:
├── dist // Transpiled application output
├── node_modules // Dependencies
├── src
│ ├── config // Backend / Database configs
│ ├── flox // Flox core modules and functionalities
│ │ ├── core // Core modules and general helpers
│ │ ├── modules // Flox modules
│ │ │ ├── XXX // Module name, contains std. folder structure
│ │ │ │ ├── dto // Domain Transfer Objects (IO-Objects)
│ │ │ │ │ ├── args // Query Argument definitions for GraphQL
│ │ │ │ │ └── input // Mutation Input definitions for GraphQL
│ │ │ │ ├── entities // Entity defintions for TypeORM
│ │ │ │ ├── helpers // Helper functions
│ │ │ │ ├── outputs // Output Object definitions (if they diverge from entities)
│ │ │ │ ├── xxx.module.ts // Nest module definition
│ │ │ │ ├── xxx.resolver.ts // GraphQL resolver
│ │ │ │ └── xxx.service.ts // Nest service
│ │ │ └── ...
│ │ └── testing // test utilities
│ ├── i18n // locale json files
│ ├── modules // customer specific modules (empty at time of fork)
│ ├── app.module.ts // Nestjs setup file
│ ├── bootstrap.ts // Bootstrap application in different environments
│ ├── main.ts // Entrypoint of application
│ └── schema.gql // GraphQL schema file - auto-generated by Apollo
└── test // e2e testsThe 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.
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 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 |
The following diagram shows the interactions between modules in both front- and backend and the various AWS services that are involved.
One thing of note is that apart from AWS services, the diagram shown below includes Google Cloud Services as well. These are used as follows: A regularly scheduled Cloud function triggers backups of certain S3 buckets (marked with the tag gcp_backup set to true) to Google Cloud Storage. For access to these S3 resources, a CGP-specific IAM user named e.g. flox-dev-gcp-backup-manager is set up automatically by Terraform for each deployment.
