- Сайт доступен по ссылке. Если вдруг не заработает, напишите мне, пожалуйста, в телеграм. Развернуть у себя на локале скорее всего не получится, так как здесь использовался Convex, а также еле как откопанное неофициальное api кинопоиска
- Чуть-чуть переборщил и намудрил в некоторых моментах
- Дизайн значительно отличается от предложенного в задании дизайна. Это связано с тем, что некоторый функционал работает немного по-другому, нежели нарисован в Figma, а также с тем, что мне не все элементы предложенного дизайна понравились мне
- Получившийся сайт рабочий, но при этом есть некоторые шероховатости, которые я не успел доделать
Документация. Скорее всего вы ничего не слышали про эту технологию, так как стабильная версия вышла впервые в 2023 году. Вкратце, это аналог Google Firebase. Основная суть - упрощение работы с базами данных на React. Работает в реальном времени. Ниже попробую объяснить, как он работает
Документация. Не люблю его за шероховатости и приколы с localstorage, но все равно писал на нем, потому что роутинг и обработка изображений - имба. А также потому что заливать nextjs на Vercel одно удовольствие (Было бы странно, если vercel, который придумал nextjs, не умел бы его быстро и удобно заливать на хостинг 🫠)
Документация. Изначально хотел писать на нем, но работа не пошла, так как я больше задавался вопросом, как сделать что-то, чем писал код. Был вырезан, но возможно остались какие-нибудь остатки, которые я не заметил
Отказавшись от TailwindCSS, быстренько перешел на любимый scss module
Документация. Мини-библиотека для реализации оповещения на сайте. Честно говоря, не дожал. Мог использовать и в других местах, но получилось только в одном месте воспользоваться: изменение темы. В общем библиотека прикольная и опыт получился интересным
Github. Приятная библиотека для работы с темой. Почему-то nextjs неадекватно работает с localstorage, поэтому чтобы не городить сложные схемы, а также чтобы не напрягаться, воспользовался готовой библиотекой, которую сделали люди явно поумнее меня 🤓
npm. Изначально хотел использовать bcrypt для хэширования пароля. Но он у меня не завелся ни на стороне "бэка" (Convex), ни на стороне клиента (NEXT.js). Поэтому я забил и использовал md5, хотя я в курсе, что он является не надежной хэш-функцией
Документация. Приятная библиотека для использования иконок. Приятная и простая мелочь
GitHub. npm. Внезапно, собственная библиотека для создания Emoji Picker. Рабочая, но точно не до конца завершенная (как минимум поиск не работает, поэтому отключен). Идея в наглую украдена с notion. Так и живем 🫡
База для запросов. Весит меньше, чем axios и на этом все
Документация. Специальная библиотека от Convex для загрузки файлов
Все начинается с базы данных, в данном случае с Convex. Для начала в файле convex/schema.ts была описана схема бд в соответствие с документацией. После чего были описаны методы в файлах convex/users.ts и тд. Существует всего два метода mutation и query. Первый позволяет изменять данные в бд, а второй позволяет получать данные. Параллельно с разработкой сайта я запускаю бд с помощью команды npx convex dev. Это команда анализирует папку convex и в случае каких-нибудь изменений заливает их себе в облачные функции, которые потом использовать по необходимости
С бд вроде кратенько разобрались, теперь про сами фильмы/сериалы. Как это работает: когда пользователь (зарегистрированый) хочет добавить фильм/сериал, он ищет его с помощью поиска. Вначале поиск пытается найти этот фильм/сериал в бд, если он не находит, то пользователь может "попытаться найти в кинопоиске". Почему именно "попытаться": дело в том, что еле как неофициальное откопанное апи кинопоиска работает с жесткими ограничениями в день. Поэтому, чтобы лишний раз его не напрягать я добавил эту кнопку. Также если мы упремся в ограничение апи, тогда поиск не сработает, что и значит "попытаться". Если все-таки апи не упало и все хорошо, то выбрав фильм/сериал из апи кинопоиска он добавляет фильм в контекст и перебрасывает на другую страницу, после чего этот самый фильм/сериал добавляется в бд и происходит рендер информации о фильме/сериале уже, используя данные из бд. Это было сделано для того, чтобы не городить два разных компонента (один для рендера информации из кинопоиск апи и из бд)
Возможны проблемы с постером, но это не зависит от меня, так как картинки подгружаются из кинопоиска, и если он упадет, то упадут картинки и у меня. В идеальном мире нужно было загружать картинку себе в бд, но городить не хотелось, учебный проект все-таки
Концепция поиска в кинопоиске позволяет избавиться от функционала заполнения информации о фильме вручную, так как кинопоиск очевидно знает про фильмы/сериалы гораздо больше, чем пользователь
Коллекция фильмов/сериалов рендерит первые 100 объектов, которые хранятся в бд. У всех пользователей этот список будет одинаковый
Регистрация и авторизация пользователя работает на обычном сравнение данных, без разных приколов по типу JWT или еще чего похуже. Аватарка загружается в storage Convex и использует для этого компонент, который они сами предлагают использовать
Оценка фильма/сериала состоит из двух частей: первая - обязательная, оценка от 1 до 10. Некрасиво сверстано, но максимально базированно. Вторая - необязательная, выбор эмодзи на основе lemojis. Еще до этого дз занимался разработкой этой библиотеки(компонента), а после того, как задали дз решил их объединить и потестить мой компонент в "боевых условиях"
Смена темы основана на next-themes. Работает максимально просто и меняет тему между тремя состояниями: system, dark и light. CSS меняется в зависимости от значения в data-theme с помощью переменных
- Добавление фильмы в избранное или другие списки
- Создание "списков/плейлистов/коллекций" фильмов/сериалов
- Изменение информации о пользователе. Сюда входить изменение пароля
- Вычисление средней оценки фильма на основе данных в бд
- Попробовать вытащить из кинопоиска больше информации
- Переделать хедер, так как сейчас там данные подтягиваюсь странным образом
В общем, как-то так вышло. В целом можно было сделать круче, но тема мне абсолютно не понравилось, так как нормального, подробного и бесплатного апи с фильмами/сериалами тупо нет. TMDB заблокирован и теперь такие пет-проекты выглядят максимально скучно. Плюс сама тема очень заезженная. Надеюсь в дальнейшем темы будут гораздо интереснее
А еще хотелось какую-нибудь командную работу, хотя бы на двоих, мне кажется это очень сильно развивает, но это все субъективно. В общем, удачи, наверное, все это проверять. Я пошел спать
Разработано и расписано lldan для Агона