README_ru.md

React + TypeScript + Vite Music App
with Spotify Web API

Веб-приложение с использованием Spotify Web API для поиска и создания плейлистов, а также других функций.
Документация (русский) » · Documentation (English) »

Посмотреть демо · Сообщить о проблеме · Запросить новую функцию

Описание

Это веб-приложение разработано в рамках обучения на платформе Codecademy. Создавая этот проект, я хотел бы более глубоко изучить TypeScript и укрепить свои навыки работы с Redux, React Router и Tailwind CSS, а также углубить свое понимание React. Приложение позволяет пользователям искать музыкальные композиции в библиотеке Spotify, создавать персонализированные плейлисты и сохранять их в своем аккаунте Spotify.

Функциональность

• Аутентификация: Пользователи могут войти в свой аккаунт Spotify и получить доступ к своим плейлистам.
• Поиск музыки: Возможность поиска треков, альбомов, артистов и плейлистов через Spotify Web API.
• Создание и управление плейлистами: Пользователи могут создавать свои собственные плейлисты и добавлять в них треки.
• Навигация по приложению: Использование бокового меню для перехода между разделами приложения, такими как домашняя страница, поиск, создание и просмотр плейлистов, а также плейлист со списком избранных песен и другие плейлисты пользователя.
• Отображение информации о музыке: Пользователи могут просматривать подробную информацию о треках, альбомах и плейлистах, а также добавлять их в свои плейлисты.

Будущее функции

Помимо текущей функциональности, в разработке планируется добавить следующие возможности:

1. Управление плейлистом:

   • Возможность изменения обложки и описания плейлиста.
   • Возможность удаления песен из плейлиста.

2. Обновление состояния приложения:

   • Автоматическое обновление состояния приложения сразу же после любых изменений, таких как создание плейлиста, добавление или удаление песен из плейлиста, а также добавление альбома в сохраненные альбомы.

3. Добавление плеера для прослушивания:

   • Интеграция музыкального плеера в приложение для прослушивания музыки непосредственно из интерфейса.

4. Добавление раздела с похожим контентом:

   • Возможность просмотра похожего контента, основанного на предпочтениях и истории прослушивания пользователя.

5. Улучшение оптимизации приложения:

   • Оптимизация производительности и процессов работы приложения для более плавного и быстрого пользовательского опыта.
   • Улучшение пользовательского интерфейса и навигации для повышения удобства использования.

Эти дополнительные функции помогут расширить возможности приложения и сделать его еще более удобным и функциональным для пользователей.

Технологии

• React: Использован для разработки пользовательского интерфейса и управления состоянием приложения.
• TypeScript: Для статической типизации к JavaScript, что делает код более надежным и удобным для сопровождения.
• Redux Toolkit: Для эффективного управления состоянием приложения, включая информацию об аутентификации пользователя и его данных.
• React Router 6: Для навигации между страницами и компонентами приложения.
• Axios: Использован для выполнения HTTP-запросов к Spotify Wev API.
• Redux Persist: Для сохранения токена доступа пользователя между сеансами работы с приложением.
• Tailwind CSS: Для стилизации пользовательского интерфейса. Tailwind CSS позволяет быстро создавать кастомные стили с помощью набора предопределенных классов.
• Flowbite: Еще один инструмент для стилизации пользовательского интерфейса, который помогает создавать эстетичные и адаптивные дизайны.
• Netlify: Платформа для деплоя и хостинга веб-приложения, с использованием переменных окружения для безопасного хранения конфиденциальных данных.

Установка и запуск

1. Клонируйте репозиторий на свой локальный компьютер:

git clone https://github.com/valik3201/music-app.git

2. Установите зависимости:

cd music-app
npm i

3. Создайте файл .env в корне проекта и добавьте в него необходимые переменные окружения:

VITE_SPOTIFY_CLIENT_SECRET=your_client_secret
VITE_REDIRECT_URI=your_redirect_uri

4. Запустите приложение:

npm run dev

Приложение будет доступно по адресу http://localhost:5173.

Аутентификация через Spotify

Для получения подробной информации о процессе аутентификации в приложении, ознакомьтесь с файлом authentication.md.

Хуки для работы с Redux

import { useDispatch, useSelector } from "react-redux";
import type { TypedUseSelectorHook } from "react-redux";
import type { RootState, AppDispatch } from "./store";

export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

Данный фрагмент кода предоставляет кастомные хуки для удобной работы с Redux в React-приложении.

1. useAppDispatch: Этот хук предоставляет доступ к объекту dispatch, который используется для отправки actions в Redux store. Он инициализируется с помощью функции useDispatch из пакета react-redux.

2. useAppSelector: Этот хук позволяет выбирать части состояния из Redux store. Он принимает тип RootState, который представляет корневое состояние Redux store, и возвращает выбранный кусок состояния. Он инициализируется с помощью функции useSelector из пакета react-redux.

После определения кастомных хуков, их можно использовать в компонентах React для управления состоянием приложения с помощью Redux без необходимости каждый раз импортировать useDispatch и useSelector из react-redux и передавать типы состояния и диспатча.

Автор

Благодарности

Spotify

Хочу выразить благодарность компании Spotify за предоставление доступа к их Web API, что позволило реализовать функционал музыкального приложения в этом проекте.

Codecademy

Выражаю благодарность Codecademy за предоставление обучающего материала и возможность изучения технологий, которые использовались при разработке этого проекта. Благодаря курсам на Codecademy я смог углубить свои знания в React и TypeScript, что помогло в реализации данного приложения.