# Тестовое задание Умскул Frontend

### Общие требования:
- Vue 3;
- Composition API;
- TypeScript;
- Tailwind;
- Чистый код;

## Данные:

Есть 4 бизнес-сущности:
- Продукт
- Предмет
- Учитель
- Тип класса

Продукт это агрегат предмета, типа класса и учителя.

## Этапы выполнения
1. Создать типы для сущностей.
2. Сделать мокап-сервис который эмулирует бекенд идентично контракту.
3. Подготовить данные от бекенда для передачи их в UI.
4. Реализовать UI каталога

## UI
Страница каталога содержит: фильтр по продуктам, типам класса и список карточек продукта

> Фильтр это - выпадающий список, где первый элемент это "Все" который убирает фильтрацию по этому параметру.

### Карточка продукта
- Заголовок: `{subject.name} - {teacher.name}`
- Цена: `{product.price.amount} {product.price.currency}`
- Тип класса: текст `classType.name`, цвет фона `classType.color`
- Описание продукта: `product.description`

## Контракт:

URL: `api/products/`

Response:

[
  {
    "id": 1,
    "teacher_id": 1,
    "subject_id": 1,
    "class_type_id": 1,
    "description": "Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад.",
    "price": {
      "amount": 100,
      "currency": "RUB"
    }
  }
]

---

URL: `api/subjects/`

Response:

[
  {
    "id": 1,
    "name": "Математика"
  },
  // ..
]

---

URL: `api/teachers/`

Response:

[
  {
    "id": 1,
    "name": "Иван Иванов"
  },
  // ..
]

---

URL: `api/class-types/`

Response:

[
  {
    "id": 1,
    "name": "5-8 класс",
    "color": "#ADA8FF"
  },
  // ..
]

Статичные данные можно взять [тут](https://hackmd.io/@vadek/umschool-frontend-interview-data).