Веб-приложение: "Wine cellar" (Frontend)

---

Оглавление

1. Описание проекта
2. Стек технологий
3. Установка и запуск приложения в локальном репозитории, эксплуатация
4. Функционал
5. Планы по улучшению

1. Описание проекта

Приложение "Wine cellar" было разработано для моей мамы, чтобы она могла фиксировать продегустированные вина (Она большая любительница посещать винные дегустации) добавлять комментарии и указывать рейтинг. А затем искать нужные ей вина в своей коллекции. Проект изначально был реализован на React, в последствии перенесен на Next, где добавились еще функции. Кочено, вы также можете пользоваться этим веб-приложением для хранения своих винных предпочтений 😊.

Проект размещен на сервере Yandex Cloud (Frontend, Backend) IP: 158.160.113.66

---

Ссылки на проект:

Frontend (деплой): https://my-wine-cellar.space/

Backend: https://api-my-wine-cellar.space/

Backend (repository): https://github.com/Markelov97Vad/wine-cellar-ts-api

---

2. Стек технологий

---

(к оглавлению)

3. Установка и запуск приложения в локальном репозитории, эксплуатация

1. git clone https://github.com/Markelov97Vad/wine-cellar-ts.git - клонировать репозиторий на свое устройство (HTTPS)
2. npm i - установить зависимости
3. npm run build - создать оптимизированную сборку приложения
4. npm run start - запустить приложение

Важно!

Для корректной работы в локальном репозитории следует также клонировать Backend и запустить в первую очередь его командой `npm run dev` (после установки зависимостей), а также СУБД NoSQL MongoDB.

---

(к оглавлению)

4. Функционал

• Поиск вина по названию, с фильтрацией по типу и цвету среди всех вин
• Поиск только своих добавленных вин
• Кеширование данных ввода поиска и выбранных фильтров отдельно на каждой странице (Session Storage)
• Регистрация и авторизация пользователя
• Аутентификация пользователя по JWT токену
• Добавление вина в коллекцию, указание рейтинга, комментария, ссылка на изображение
• Выбор сорта винограда, типа и цвета из слектора react-select
• Валидация данных в форме
• Возможность открыть интересующее вино на другой странице, где находится вся информация о нем, с возможностью удаления (Если данное вино ваше), увидеть комментарий пользователя (Если пользователь его сотавил)
• Возможность заменить изображение (Если данное вино ваше)
• Добавить или удалить из избранного
• Личный кабинет, где хранятся избранные вина и данные пользователя
• Возможность изменять данные пользователя
• Адаптивная верстка под все виды устройств

(к оглавлению)

5. Планы по улучшению

• Оптимизировать компоненты (разгрузить их)
• Добавить анимацию с помощью GSAP
• Оптимизировать код (убрать лишнии ререндоры)
• Добавить сорта виноградов (расширить список выбора в селекторе)
• Перенести проект на React Native

---