def1s / unialbums

Личная библиотека музыкальных альбомов.

UniAlbums

Краткое описание

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

---

Ссылки

• Backend
• Deploy

---

Реализованный и задуманный функционал

• Интеграция со Spotify API (Node JS и features)
• Создание аккаунта
• Редактирование профиля
  • Личные данные
  • Аватар
  • Имя пользователя
  • Пароль
• Добавление альбомов
  • Обложка
  • Исполнитель
  • Название
• Оценка альбомов
• Изменение информации об альбоме
  • Основная информация
  • Оценки
• Возможность делиться своим профилем
• Возможность создавать плейлисты
• Подробный просмотр информации об альбоме
  • Комментирование

---

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

Основное: React, TypeScript, Webpack
Хранение данных: Redux Toolkit
Архитектура: FSD (Feature-Sliced Design)
Сборка: Webpack
Тестирование: Jest, RTL (React Testing Library), Storybook
Линтинг: ESLint, Stylelint

---

Архитектура проекта

Проект использует архитектуру Feature-Sliced Design

Ссылка на документацию - FSD

---

Тестирование

На данный момент в проекте реализовано 2 вида тестов:

1. Обычные unit тесты на jest - npm run test:unit
2. Тесты на компоненты с React testing library -npm run test:unit
3. Скриншотное (скоро)
4. e2e (скоро)

---

Линтинг

В проекте используется eslint для проверки typescript кода и stylelint для проверки файлов со стилями.

Запуск линтеров

• npm run linter:ts - Проверка ts файлов линтером
• npm run linter:ts:fix - Исправление ts файлов линтером
• npm run linter:scss - Проверка scss файлов style линтером
• npm run linter:scss:fix - Исправление scss файлов style линтером

---

Storybook

В проекте для каждого компонента описываются стори-кейсы. Запросы на сервер мокаются с помощью msw-storybook-addon.

Файл со сторикейсами создается рядом с компонентом с расширением .stories.tsx

Запустить сторибук можно командой:

• npm run storybook

---

Конфигурация проекта

Для разработки проект содержит webpack конфиг:

• Webpack - ./config/build

Вся конфигурация хранится в /config

• /config/build - конфигурация webpack
• /config/jest - конфигурация тестовой среды
• /config/storybook - конфигурация сторибука