Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/margo-yunanova/vk-music-audio-widget
Музыкальный плеер - виджет
https://github.com/margo-yunanova/vk-music-audio-widget
react react-use-audio-player storybook typescript vk vk-music vkui
Last synced: 1 day ago
JSON representation
Музыкальный плеер - виджет
- Host: GitHub
- URL: https://github.com/margo-yunanova/vk-music-audio-widget
- Owner: margo-yunanova
- Created: 2024-06-20T13:16:40.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2024-06-23T20:39:48.000Z (3 months ago)
- Last Synced: 2024-09-21T15:33:18.815Z (6 days ago)
- Topics: react, react-use-audio-player, storybook, typescript, vk, vk-music, vkui
- Language: TypeScript
- Homepage: https://vk-music-audio-widget.netlify.app
- Size: 2.47 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Музыкальный плеер
Данное приложение разработано в рамках выполнения профильного задания - Фронтенд-разработчик на стажировку в VK-Музыка.
## Ссылка на деплой приложения
Storybook задеплоен на сайте, чтобы можно было просматривать и тестировать все доступные компоненты в одном месте.
https://vk-music-audio-widget.netlify.app/
## Сборка и запуск проекта
### Запуск Storybook
```bash
npm install
npm run storybook
```
Откройте http://localhost:6006, чтобы посмотреть результат в браузере.
### Запуск в режиме разработки
```bash
npm install
npm run dev
```
Откройте http://localhost:5173, чтобы посмотреть результат в браузере.
### Локальное тестирование приложения
```bash
$ npm run build
$ npm run preview
```
## Стек технологий
Фронтенд написан на React + TypeScript со сборщиком Vite
|Пакеты|Назначение|
|:----|:----|
|[VKUI](https://vkcom.github.io/VKUI/#/About)|Библиотека компонентов для создания интерфейсов на Material Design System от Google|
|[Storybook](https://storybook.js.org/)|Библиотека для разработки, тестирования и документации компонентов UI.|
|[react-use-audio-player](https://github.com/E-Kuerschner/useAudioPlayer)|Библиотека React, предоставляющая хук для управления аудиоплеером в приложениях.|
## Техническое задание
Необходимо реализовать виджет для воспроизведения аудиозаписи по макету.
Макет в Figma: [https://www.figma.com/design/9d3ErSuSrLY1qCuSRPk80C/AudioCell?m=dev&node-id=0-1&t=iqVcRzScrwfGr94t-1](https://www.figma.com/design/9d3ErSuSrLY1qCuSRPk80C/AudioCell?m=dev&node-id=0-1&t=iqVcRzScrwfGr94t-1)
В качестве аудиозаписи можно использовать любую аудиозапись (как загруженную в репозиторий, так и из внешнего ресурса, на ваш выбор).
#### Условия:
* Минимальные версии браузеров [https://caniuse.com/es6-module](https://caniuse.com/es6-module).
* Использовать React и mobx.
* Использовать VK UI (можно найти тут [https://vkcom.github.io/VKUI/](https://vkcom.github.io/VKUI/)).
#### Рекомендации:
* Можно использовать готовые шаблоны приложений.
* Можно использовать библиотеки из npm.
* Стоит уделить внимание принципам проектирования: KISS, SOLID и др.
## License
| Название | Автор | Ссылка | Лицензия | |
|----------------------------------|------------|-------------------------------------------|--------------------|---|
| Whip Crack 01.wav | CGEffex | https://freesound.org/s/93100/ | Attribution 4.0 | |
| Cartoon Pop (Clean) | unfa | https://freesound.org/s/245645/ | Creative Commons 0 | |
| Bubble Pop | elmasmalo1 | https://freesound.org/s/376968 | Attribution 3.0 | |
| Thunder, Very Close, Rain, A.wav | InspectorJ | https://freesound.org/s/360328/ | Attribution 4.0 | |
| SoundHelix | | https://www.soundhelix.com/audio-examples | GNU GPLv3 | |
| Картинки | | https://ru.freepik.com/ | | |