movies-explorer-frontend - Фронтенд дипломного проекта в Яндекс Практикум по специальности "Веб-разработчик".
Movies Explorer - интерактивный сайт с регистрацией и авторизацией, с поиском и сортировкой фильмов как в основной базе так и в сохраненных фильмах пользователя. При создании сайта использовалась отзывчивая (резиново-адаптивная) верстка.
В проекте задействовано два API - мой API с регистрацией, авторизацией пользователей и с их избранными (сохраненными) фильмами и сторонний API с базой фильмов.
На главной странице расположена краткая информация обо мне, дипломной работе и ссылки на проекты, сделанные мной за время учебы в Практикуме.
После регистрации на сайте станут доступны страницы с фильмами и их поиск с фильтром по короткометражкам.
При установке лайка фильму, карточка с фильмом сохраняется в избранные. Их потом можно посмотреть на странице с сохраненными фильмами. Там же можно сделать поиск по сохраненным фильмам и удалять их оттуда. У каждого пользователя на странице с избранными фильмами отображаются только те фильмы, которые сохранил именно он.
В формах регистрации, авторизации и изменения данных пользователя задействована кастомная валидация полей "на лету". На мой взгляд валидация "на лету" тут не нужна, но это требование из ТЗ. Я бы оставил валидацию только при сабмите формы.
• Frontend: React.js, JavaScript, Grid Layout, Flexbox, HTML, CSS, БЭМ, Семантическая верстка, Отзывчивая (резиново-адаптивная) верстка. • Backend: Node.js, Express, CORS, MongoDB, mongoose, celebrate, helmet, express-rate-limit, escape-html, dotenv, bcryptjs, jsonwebtoken, winston, express-winston.
Ссылка на сайт https://movies.tw1.ru
Ссылка на бэкенд проекта: https://github.com/UserGitHub37/movies-explorer-api
Ссылка на макет в Figma https://www.figma.com/file/qAlCioWW8mCU7r1AkvgW4Y/MyDiploma?node-id=891%3A3857
Ссылка на пул реквест, открытый из ветки level-3 в main: #2
- Клонирование репозитория
git clone https://github.com/UserGitHub37/movies-explorer-frontend.git- Запуск dev-сервера фронтенда
npm start