# Tech Stack for the DriverXQ
###### tags: `Driver XQ`

> The DriverXQ Project consist of three main components as well as the administrator panel (Laravel Nova) for populating relevant data such as vehicles, reflection questions etc.

#### Here are the 3 main components of DriverXQ and links to Repositories:
> Please let me know if the link to github does not allow you to access it.
> I will invite you as collaborators to the repositories
- [Mobile App](https://github.com/collectiveactions/driver-iq-ionic) (For drivers)
- [Web App](https://github.com/collectiveactions/driver-iq) (For Team owners) -> This also includes the website of DriverXQ which is right now in https://staging.driverxq.com/
- Unified API (Used both in Mobile App as well as Web App)

### The tech stack used for the project is the following

#### Mobile App
- **[Vue JS 3](https://vuejs.org/)** with **[Ionic](https://ionicframework.com/docs/vue/overview)**
o **[Ionic](https://ionicframework.com/docs/vue/overview)** and **[Ionic Capacitor](https://capacitorjs.com/)** for bundling into mobile apps as well as accessing native mobile features
o **axios** for API calling
- **[Tailwind CSS](https://tailwindcss.com/docs/installation)** for styling
- No testing framework is used right now (can be added if necessary)

**Web App**
- **Vue JS** with [Inertia JS](https://inertiajs.com/)
- **Stripe** for billing (Not that relevant as of the moment since we are in a trial run for awhile)

**Admin Panel**
- **[Laravel Nova](https://nova.laravel.com/)**

**API**
- PHP with [Laravel](https://laravel.com/)
- Postgre SQL

**Infrastructure**
- **Github Action** for CI/CD
- [Laravel Vapor](https://vapor.laravel.com/)
- imgix for Images
- [Codemagic](https://codemagic.io/start/) for Autoamted Mobile Builds for Android and iOS

### Programming Style Guides

> These are some of the style guides for coding on each of the components.
> It is advised that every developers on the project follows it.
> Modification of style guide should be done minimally and should mostly be done if the situation calls for it.
> This allows us to have a unified coding style which allows easy onboarding of new developers in case it is necessary.
> Suggestions to improve the style guide is also always appreciated!

Frontend
- The project contains it’s own formatting in `prettier`. Simply run `npx prettier --write .` in the `src` folder and it will format all documents. More about it [here](https://prettier.io/docs/en/cli.html)
- Tailwind CSS is used for the inline styling. As much as possible please avoid writing style blocks on the Vue pages unless necessary (sometimes it really is necessary especially when editing ionic components).
- As much as possible use `<script setup>` syntactic sugar

Backend
- The development relies on Test Driven Development. Please make sure to write tests for each of the APIs you write. These tests are run in the CI/CD pipelines as well.

### Translations
Currently, we are using `vue-i18n` in the frontend to enable translations into Spanish.

In the code, you just have to import the `useI18n` hook from `vue-i18n`.

And then, all the translations can be found here in this [spreadsheet](https://docs.google.com/spreadsheets/d/1_SOdts_fnoRtwYEZk4eeqGyMgxO-5C2zTeExyDgo5e0/edit#gid=0)

the column **key** is the key you use in the frontend like this.

<template>
// The first item in the spreadsheet "2fa"
<h1>{{ t('2fa') }}</h1>
</template>
<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n() // mobile app
const { t } = useI18n({ useScope: 'global' }) // web app
</script>

>*Note: When adding new translation words, the key should be the actual word of the english word. For example, if the english word is `good morning` then key should be `good-morning`. If the text is really long, then the key should just describe the text block like `welcome-page-description`. When you add the english word in the column `en`, the other language columns get automatically filled with google translated words. If you know the right transaltion for the spanish, you can simply edit the `es` column to fix the translation as well*