RU: Поиск, оценка и рекомендации о фильме в удобном формате.
EN: Search, evaluate and recommend a movie in a convenient format.
ВАЖНО: Это демонстрационная версия приложения, сделанная в формате MVP для презентации работы с фреймворком Next.js, языком JavaScript и надстройкой TypeScript. В приложении учтены не весь UX и проработаны не все элементы UI.
Описание задания
Создать мини-приложение для просмотра, оценки и комментирования фильмов.
- Использование
ReactиTypeScript, также можете использоватьNextJs. - Использование
React Hooks. - Для стилей можете использовать любой подход.
- Отображение списка фильмов с их названиями, кратким описанием и постерами.
- Возможность добавить новый фильм в список.
- Возможность оценить фильм (например, от 1 до 5 звезд).
- Возможность просмотра детальной информации о фильме (название, описание, рейтинг, длительность и др.).
Покрытие основных функций приложения юнит-тестами.
Приложение должно корректно отображаться на разных устройствах: смартфонах, планшетах и десктопе.
Краткая документация по проекту: архитектурные решения, использованные библиотеки и инструменты, инструкции по установке и запуску.
- Рассмотреть возможность использования состояния приложения с помощью таких инструментов, как
Effector,ReduxилиMobX. - Реализация маршрутизации с использованием
React Router. - Использование архитектурной методологии
Feature Sliced Design.
- Оставление комментариев к фильму и отображение комментариев других пользователей.
- Поиск фильма по названию.
- Фильтрация фильмов по рейтингу и/или длительности.
- Сортировка фильмов по дате добавления, рейтингу или длительности.
- Сохранение данных приложения (фильмы, оценки, комментарии) в
localStorage.
Если возможно, интегрировать приложение с публичным API для фильмов, чтобы обновлять список фильмов, предоставлять постеры и другую информацию.
Выполненные требования
- Приложение разработано с использованием фреймворка Next.js последней версии с использованием App Router.
- Код чистый и читабельный.
- Архитектурная методология - FSD.
- Отсутствует дублирование кода, приложение разбито на компоненты, отформатировано в едином стиле.
- Приложение адаптировано под различные устройства.
- Корректное отображение в браузерах Chrome, Firefox, Edge.
- Для описание стилей используется TailwindCSS вместе с DaisyUI.
- Используется TypeScript.
- В качестве state-менеджера используется Effector вместе с Farfetched.
- Выполнен деплой проекта на хостинг Vercel,
- Написана документация по сборке и настройке проекта.
Для работы приложения используется база данных PostgresQL (хранение комментариев пользователей). Источником сервера служит NextJS.
Приложение написано с использованием следующего JavaScipt/TypeScript стека:
Клиентская часть:
Серверная часть:
API:
State-менеджер:
Загрузка данных:
UI:
Архитектурная методология:
- Для корректной работы приложения необходимо указать переменные среды. Название переменных указаны в файле .env.example.
- Файл
.envрасполагается в корневой папке проекта. - Для получения информации о фильмах необходимо подключить сторонний сервис, предоставляющий доступ к библиотеке
фильмов. По-умолчанию, приложение настроено на работу с сервисом Kinopoisk Dev. Для
использования сервиса необходимо получить ключ API, затем указать данный ключ в
файле
.envвместе с адресом сервера. - В приложении используется база данных PostgresQL для хранения комментариев к фильмам. Для подключения к базе данных необходимо указать следующие данные: хост, порт, пользователя, пароль, имя базы данных или указать сразу строку для подключения.
- Описание файла
.env:# Kinopoisk API Token (see: https://kinopoisk.dev) NEXT_PUBLIC_API_TOKEN=PUT_API_TOKEN_HERE # Films Server URL (default: https://api.kinopoisk.dev) NEXT_PUBLIC_BASE_URL=PUT_BASE_SERVER_FILMS_URL # Next Server URL (default: http://localhost:3000) NEXT_PUBLIC_SERVER_URL=PUT_NEXTJS_SERVER_URL # Postgres Database User POSTGRES_USER=PUT_POSTGRES_USER # Postgres Database Password POSTGRES_PASSWORD=PUT_POSTGRES_PASSWORD # Postgres Database Name POSTGRES_DB=PUT_POSTGRES_DATABASE_NAME # Postgres Database Default Host with Port POSTGRES_HOST=PUT_POSTGRES_HOST_WITH_PORT # Postgres Database URL POSTGRES_URL=postgres://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}/${POSTGRES_DATABASE}?schema=public&connect_timeout=30&pool_timeout=30&socket_timeout=30
ВАЖНО: В качестве пакетного менеджера используется pnpm
- Для работы приложения требуется NodeJS версии
>= 18.18. - Для запуска приложения в режиме разработчика использовать
pnpm dev. - Для сборки использовать
pnpm build. - Для запуска использовать
pnpm start.
✨ Превью
👤 Разработчик Indar Basto (@wowblvck)