Autoline

Autoline is a multifunctional automobile-centric service. It allows searching by filters, detailed comparing, and reviewing, but also it picks up the available options on the market to choose the best price.

Table of contents

1. Introduction

  1.1 Useful Links

2. Domain

3. Database Schema

4. Architecture

  4.1 Global

    4.1.1 Technologies

  4.2 Frontend

    4.2.1 Directory Structure

  4.3 Backend

    4.3.1 Directory Structure

  4.4 Shared Package

    4.4.1 Reason

5. How to Run

  5.1 In Docker

  5.2 Manually

6. Deployment

1. Introduction

1.1 Useful Links

• Pay attention, that we have certain quality criteria , which we should follow during application development.

• Production deployment

2. Domain

Our task is to help the buyer quickly and conveniently find the best offer auto offer. For those who are determined by the choice, in each section, there is a selection by parameters and an opportunity to compare products with each other. Available and convenient text search allows users to search both the desired sections and specific products by name. And on the page of each model, there is detailed information that will help you make a decision: description, technical characteristics, photos and videos, useful links, and reviews. There is also a block "Where to buy?" with a list of online stores, prices, and direct links to the purchase page.

3. Database Schema

To store that data we use the MariaDB, community-developed, commercially supported fork of the MySQL.

Diagram:

1. Data is stored in a few schemas - public, cars, and locations.
2. Tables are named in the snake_case and the plural form.

4. Architecture

4.1 Global

4.1.1 Technologies

1. Typescript
2. NodeJS 17
3. Express
4. MariaDB
5. Prisma ORM
6. Passport + various auth strategies
7. React 18
8. Vite
9. Redux Toolkit
10. Redux Persist
11. MUI
12. Docker
13. Docker-Compose
14. nginx
15. Github Actions

4.2 Frontend

4.2.1 Directory Structure

1. assets - static assets (images, global styles)
2. common - common/shared files (types, enums)
3. components - plain react components
4. exceptions
5. helpers
6. services - api accessing services
7. store - redux store with all features as sub directorys
8. validation-schemas - schemas that used for forms validation

4.3 Backend

4.3.1 Directory Structure

1. routes - rest endpoints paths definitions. There should be no domain logic
2. controllers - rest endpoints. There should be no domain logic
3. services - domain logic and implementation for the rest controllers
4. data - everything related to data access (migrations, models, repositories)
5. helpers
6. common - common/shared files (types, enums)
7. exceptions
8. validation-schemas - schemas that used for input data validation

4.4 Shared Package

4.4.1 Reason

As we are already using js on both frontend and backend it would be useful to share some contracts and code between them.

5. How to Run

5.1 In Docker (preferred)

1. Create and fill all .env files. These files are:

• .env/frontend.env
• .env/backend.env

You should use .env.example directory as a reference and consult coaches or colleagues for the secret keys

2. Install dependencies (node_modules). Run yarn install:all in the root folder.

3. Run docker-compose: cd .docker/autoline && docker-compose -f docker-compose.dev.yml up --build

4. Let's go!

5.2 Manually

1. Create and fill all .env files. These files are:

• .env/frontend.env
• .env/backend.env

You should use .env.example directory as a reference and consult coaches or colleagues for the secret keys

2. Install dependencies (node_modules). Run yarn install:all in the root folder.

3. Run the database. You can either run it in docker using command cd ./docker/autoline && docker-compose -f docker-compose.services.yml up --build or by installing Mariadb on your computer. Docker variant is preferred.

4. Apply migrations: cd backend && yarn db:migrate:dev:local

5. Run shared: cd shared && yarn start:dev

6. Run backend: cd backend && yarn start:dev:local

7. Run frontend: cd frontend && yarn start:dev:local