В данном проекте я реализовал веб-приложение с нуля, написав на TS, используя сборщик Webpack, также в данном проекте присутствует валидация полей сделаная с помощью библиотеки Just-validate, интерактивный UI c анимациями. Сделана адаптивная вёрстка. Также в работе использовался препроцессор SASS/SCSS, библиотеки redom и navigo.
При открытии приложения Вам откроется страница для авторизации в приложение. Если Вы не зарегестрированны, при попытке авторизироваться, Вам будет выпадать модальное окошко с соответствующей информацией. Чтобы зарегестрироваться, Вам надо будет нажать на ссылку 'Регистрация' ниже.
Как только Вы нажмете на ссылку, Вам откроется страница для регистрации. Теперь Вы можете зарегестрироваться. Страница регистрации имеет валидацию, сделаную с помощью Just-validate. Как только Вы зарегестрировались, появится модальное окошко с соответствующей информацией и Вас перебросит на страницу авторизации, где Вам нужно будет продублировать то, что вы написали при регистрации.
Как только, Вы авторизуетесь, Вы попадете на главную страницу, перед Вами откроется список композиций. При нажатии на какую-либо композицию, откроется плэйер и композиция начнет играть. Также в списке Вы можете добавлять композицию в избранное нажав на сердечко, увидеть длительность композиции. Также на странице реализована пагинация. Помимо этого есть поле поиска, с помощью которого Вы можете найти композицию по названию. Если Вы нажмете на кнопку, где прописан Ваш username, то Вы выйдете из аккаунта.
В открывшемся плэйере Вы можете поставить на паузу, перелистнуть на следующую или предыдущую композицию, или сделать так, чтобы трек проигрывался сначала. Помимо этого, можно сделать так, чтобы заиграл сначала какой-либо рандомный трек из списка. Также вы можете регулировать громкость и добавить прослушиваемый Вами трек в избранное, нажав на сердечко.
Помимо этого у приложения есть навигационное меню слева, состоящее из двух страниц: 'Аудиокомпозиции' (Главная страница, на которой Вы сейчас находитесь) и 'Избранное', при клике на данную кнопку, Вас перебросит на страницу, в котором Вы увидете все композиции, которые Вы добавили в избранное. Эти композиции Вы также можете проигрывать с помощью плэйера и искать среди Избранных композий с помощью поискового поля.
https://www.figma.com/design/lO9aaBqUdW6vp1N33iydRY/TypeScript?node-id=0-1&t=h3zshPipgCY9tdLv-1
Для того, чтобы запустить проект надо:
-
Открыть проект и запустить терминал
-
Перейти в папку 'server', для этого в терминале надо прописать:
cd server -
Установить необходимые зависимости, для этого в терминале надо прописать:
npm install
-
Запустить сервер, для этого в терминале надо прописать:
npm start
-
Запустить новый терминал
-
Перейти в папку 'client', для этого в терминале надо прописать:
cd client -
Установить необходимые зависимости, для этого в терминале надо прописать:
npm install
-
Запустить приложение, для этого в терминале надо прописать:
npm run dev
-
После запустка в приложении появится строка с ссылкой по которой надо перейти:
[webpack-dev-server] Loopback: http://localhost:8080/