Данное клиент-серверное веб-приложение появилось в 2023 году, но до сих пор поддерживается и дорабатывается мною. Изначально оно представляло из себя небольшой проект, созданный в качестве финального задания на курсах Яндекс.Практикума. Приложение было написано на JS, использовало React Context для хранения данных и fetch для запросов к серверу, а собиралось с помощью Webpack; авторизация была непродуманной и уязвимой, а с API Яндекса приходил массив лишь из 100 фильмов.
На сегодняшний день приложение использует наиболее современные технологии, имеет продуманную архитектуру и строгие алгоритмы для регистрации/авторизации/восстановления пароля, а также взаимодействует с API, где можно найти более миллиона фильмов. Данное приложение - мой наиболее крупный и продуманный pet-проект, в котором отражено большинство моих навыков и инструментов, используемых мною.
Прежде чем запускать данное приложение у себя на ПК, убедитесь, что ваш компьютер обладает всем необходимым ПО, нужным для функционирования проекта (Node.js, MongoDB, Yarn).
После скачивания репозитория вам необходимо осуществить следующее:
- Находясь в корне репозитория moonclown-backend, создать безымянный файл с расширением .env и заполнить его следующими переменными:
- PORT - данная переменная определяет, на каком порту будет запускаться серверная часть (по умолчанию: http://localhost:3333. Если хотите изменить, необходимо также поменять соответствующую переменную в файле moonclown_frontend\src\utils\constants.ts).
- WEBSITE_URL - в данную переменную следует записать адрес клиентской части в браузере (по умолчанию: http://localhost:5173/moonclown).
- SECRET_KEY - в данную переменную необходимо записать секретный ключ, который будет использоваться для авторизации.
- RESET_PASSWORD_KEY - в данную переменную необходимо записать секретный ключ, который будет использоваться для восстановления пароля.
- MONGODBADDRESS - данная переменная отвечает за адрес БД для серверной части (по умолчанию: mongodb://127.0.0.1/moonclown).
- MONGO_DUPLICATE_KEY_ERROR - код ошибки duplicate (по умолчанию: 11000).
- MAIL_LOGIN - логин от почты, с которой пользователям будут отправляться сообщения на почту.
- MAIL_PASSWORD - пароль от почты, с которой пользователям будут отправляться сообщения на почту.
- MOONCLOWN_EMAIL - адрес почтового ящика, на который будут приходить сообщения, которые пользователь может отправлять с главной страницы.
- SALT_ROUNDS - количество итераций соли в хэше (рекомендуемое значение - 10).
- MOVIES_API_URL - адрес используемого API для поиска фильмов (по умолчанию: https://api.kinopoisk.dev/v1.4).
- MOVIES_API_KEY - ключ от API для поиска фильмов.
-
Находясь в корне репозитория moonclown-backend, создать папку images и добавить туда фотографию на своё усмотрение с именем "default" и расширением ".png". Данная фотография будет использоваться в качестве начальной аватарки для всех пользователей.
-
Находясь в терминале репозитория moonclown-backend, выполнить следующие команды:
yarn installyarn devПосле выполнения данных команд серверная часть должна запуститься на порту, который вы указали в файле .env.
-
Находясь в терминале репозитория moonclown-frontend, выполнить следующие команды:
yarn installyarn devПосле выполнения данных команд клиентская часть должна быть доступна в браузере по адресу http://localhost:5173/moonclown.
- Сборщик проекта: Vite
- Стилизация: SCSS
- Библиотека: React
- State-Менеджер: Zustand
- Библиотека для HTTP-запросов: Axios
- Платформа: Node.js
- Фреймворк: Express
- СУБД: MongoDB
- ODM: Mongoose
- Модуль для отправки писем: Nodemailer
1. Главная страница.
- Доступна по роуту '/'.
- На данную страницу может зайти как авторизованный, так и неавторизованный пользователь.
2. Страница с фильмами.
- Доступна по роуту '/movies'.
- На данной странице можно искать фильмы среди тех, что приходят с API. Также можно лайкать фильмы и таким образом сохранять их в базу данных.
3. Страница с сохранёнными фильмами.
- Доступна по роуту '/saved-movies'.
- На данной странице отображаются только те фильмы, которые вы лайкнули. По нажатию на крестик их можно удалить с данной страницы.
4. Страница профиля.
- Доступна по роуту '/profile'.
- На данной странице вы можете менять информацию, пароль и фотографию своего профиля, а также осуществить логаут.
5. Страница регистрации 1 (ввод почты).
- Доступна по роуту '/auth/register', или '/auth/register/identify'.
- На данной странице вы можете ввести почту, на которую будет отправлен код для продолжения регистрации.
6. Страница регистрации 2 (ввод кода).
- Доступна по роуту '/auth/register/verify'.
- На данной странице вы можете ввести код, который пришёл вам на почту.
7. Страница регистрации 3 (ввод никнейма и пароля).
- Доступна по роуту '/auth/register/complete'.
- На данной странице вы можете окончательно зарегистрироваться. Нужно ввести никнейм и пароль 2 раза. После сабмита ваши данные сохранятся в базу, сразу же произойдёт логин и направление на страницу с профилем.
8. Страница логина.
- Доступна по роуту '/auth/login'.
- На данной странице можно авторизоваться, если у вас уже есть аккаунт. При успешной авторизации вас направит на страницу с профилем.
9. Страница с ошибкой 404.
- Доступна по любому роуту, который не предусмотрен в приложении.
- На данной странице пользователь может нажать кнопку "назад", которая вернёт его на главную страницу проекта, а также в данном компоненте находится местный свин приложения, которого не стоит злить.
10. Страница восстановления пароля 1 (ввод почты).
- Доступна по роуту '/password/forgot-password'.
- На данной странице вы можете ввести почту, с которой был связан аккаунт, от которого был забыт пароль. После сабмита на указанную почту придет ссылка для восстановления (если, конечно, аккаунт с такой почтой действительно есть в базе приложения).
11. Страница восстановления пароля 2 (сообщение об отправке).
- Доступна по роуту '/password/send-password'.
- На данной странице показано сообщение о том, что ссылка для восстановления была отправлена на почту. Данное сообщение отображается в любом случае, даже если почты не было в базе данных.
12. Страница восстановления пароля 3 (ввод нового пароля).
- Доступна по роуту '/password/reset-password/:id/:token'.
- На данной странице вы можете ввести новый пароль для аккаунта, чтобы в дальнейшем залогиниться с его помощью.