Проект: Книгоплан для Киноплан

Общие требования к проекту

Приложение должно состоять из следующих страниц:

1.Главная - "/"

2.Корзина - "/cart"

3.Личный кабинет - "/personal-account"

4.Страница авторизации - "/auth/sign-in"

5.Страница регистрации - "/auth/logout"

Приложение должно работать со следующим функционалом:

0. Общие требования

0.1. Реализовать базовый функционал на JS, next.js и react. Использование стейт-менеджеров остается на усмотрение исполнителя, но не рекомендуется.

0.2. Необходимо настроить eslint, tsconfig, stylelint, editorconfig.

0.3. Для стилизации можно использовать любой подходящий css-фреймворк, либо же писать CSS самому (допускается CSS Flexbox или же CSS Grid).

0.4. В рамках реализации можно использовать Popover из https://ant.design/components/popover/. Реализации кнопок, селектов и т д должны быть самописными.

0.5. Добавить иконку сайта (во вкладку и на сайт, где на макете указано Icon)

0.6. Данные о выбранных книгах в корзине нужно запоминать между сессиями

0.7. Авторизацию необходимо сделать на node.js, или как вариант используя supabase

0.8. Необходимо валидировать формы на проекте используя библиотеку (antd / react-hook-form)

0.9. Реализован адаптив приложения

1. Главная

1.1 Cобрать себе на любом сайте, который позволяет мокать (использовать заранее подготовленные структуры данных) данные (например https://my-json-server.typicode.com/) о книгах - достаточно 20 штук.

1.2. Реализовать заглушку на случай если данные не пришли с сервера с возможностью повторного запроса данных

1.3. Сделать loader, пока данные грузятся

1.4. Список книг должен быть доступен в двух видах - табличный и строчный.

1.5. Необходимо реализовать фильтрацию и сортировку по (жанру, году издания, автору), а также заглушку, на случай если данных нет по выбранным фильтрам.

2. Карточка книги

2.1. Должна содержать базовую информацию: - фото; - автор; - год издания; - жанр.

2.2. Реализовать функционал добавления / удаления книги из корзины для покупки.

2.3. Реализовать счетчик добавленных экземпляров (например можно добавить в корзину более одного экземпляра книги)

2.4. Реализовать заглушку для картинки на случай, если картинка не придет с сервера

3. Корзина

3.1. Корзина должна быть доступна глобально

3.2. При клике на значок корзины открывается popover с информацией о купленных книгах. В информации должны быть указанны те же данные, что и в книгах, с возможностью добавить или уменьшить количество товаров.

3.3. Также необходимо реализовать подсчет суммы оплаты исходя из количества выбранных книг.

3.4. Если корзина пустая, то должна быть ссылка "Перейти в корзина", при клике на которую будет осуществлен переход на страницу "Корзина"

3.5. Реализовать возможность очистить корзину полностью

4. Корзина (страница)

4.1. Должна быть кнопка "Вернуться на главную"

4.2. Реализовать список книг со всей информацией, которая есть на главной в каждой книге с возможностью добавлять и удалять товар из корзины.

4.3. Необходимо вывести подсчет суммы в зависимости от количества книг

4.4. Сделать кнопку "Оплатить", по нажатию на которую появляется popup с информацией о том, что заказ оплачен или вывод той же информации в любом другом виде.

4.5. Реализовать заглушку, если корзина пуста.

5. Личный кабинет

5.1. Личный кабинет должен быть доступен глобально

5.2. Если пользователь не авторизован, то должны показываться ссылки на страницу "Авторизация" и "Регистрация", иначе ссылки на "Личный кабинет" и "Выйти"

Конечная цель:

Реализованное приложение согласно предоставленному ТЗ

Используемые технологии

• UI Frameworks (Antd)
• Styling (modules)
• SSR (next js)
• Typification (Typescript)

Запуск проекта

1. Конечно же сначала нам нужно установить все зависимости npm i в помощь
2. Ну и все, что нам остается это просто запустить проект npm run dev