Skip to content

03_Tech Stack

Jump to bottom
David Wyss edited this page Jun 7, 2022 · 12 revisions

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
Vuex State management / modular data store, with type safety provided by vuex-smart-module
Jest Testing framework
Capacitor Native iOS/Android application development tools (optional)
Lodash Utility library for basic functionalities
date-fns Date manipulation library

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
Fastify Low-overhead web framework (used by NestJS)
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. Additionally, NocoDB can be used to directly perform operations and look at data on the database. Setting up a NocoDB container is part of the docker-compose file for running backend/database, described in (1). By default, NocoDB runs on localhost:8080. To use it, you will initially need to create an account as well as set up your project ("Create new project using an existing database"). Choose "Postgres" as the database type, and enter your database's details, as shown below:

nocodb

Note that the IP adress you have to use may be different. Due to the way networking works between Docker containers, using localhost will NOT work. To find your database container's IP, run the following command in your terminal of choice:

docker inspect database

Look for a field named "IPAddress", and use that value. You're now ready to start adding and inspecting data on your database using NocoDB!

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
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
Clone this wiki locally