Нужно сверстать онлайн-сервис по мониторингу и уничтожению опасных астероидов на основе данных API NASA. АПИ: https://api.nasa.gov (https://api.nasa.gov/) Asteroids - NeoWs
На главной список подлетов астероидов к Земле от текущей даты в бесконечность. Подгрузка при скролле порциями. По каждому астероиду: название, размер, оценка опасности, как близко будет к Земле, точная дата максимального подлёта. Иконка сближения в зависимости от опасности. Фильтр по опасности. И опция вывода расстояний: в километрах или расстояниях до Луны.
В фоне шапки есть изображение, которое должно быть получено в API NASA APOD (картинка дня).
Адаптивная вёрстка.
В подробной информации по астероиду помимо инфы, перечисленной выше, список всех его сближений. По каждому сближению: скорость относительно Земли, время максимального сближения с Землей, расстояние до Земли, по орбите вокруг чего летит.
В списке и на странице астероида есть кнопка добавления астероида в список на уничтожение.
Список на уничтожение — это некая корзина, где отображаются выбранные подлеты астероидов. В конце страницы кнопка заказа бригады им. Брюса Уиллиса на выбранные астероиды. Бригада будет доставлена на астероид в нужный момент и выполнит свою нелёгкую работу.
Дизайн-макет отрисован только для первой страницы, остальные две вы делаете на своё усмотрение. https://www.figma.com/file/UOdZ5Qzkif1Ideye76OpjA/Armaggedon-V2?node-id=0%3A1
- Использовать Next.js (также принимаются решения на React, если будет реализован SSR);
- Использование redux нежелательно;
- Стилизация с помощью CSS модулей;
- Решение предоставить в виде git репозитория (github/bitbucket/gitlab по выбору);
- Корректное отображение в последних версиях браузеров (chrome, firefox, safari, edge);
Будет плюсом:
- использование TypeScript;
- тесты;
- если вы задеплоите ваш проект на любой удобный для вас хостинг;
- документация/инструкция по сборке проекта (README);
Локальная копия Figma есть в корне проекта /kvartirka.fig
.
Ссылка на оригинал (возможно уже не будет работать, но зато там есть примечания).
https://test-task-kvartirka.vercel.app/
npm install
# or
yarn
npm run build
# or
yarn build
и затем
npm run start
# or
yarn start
Для разработки или оценки результата (на живой странице) введите
npm run dev
# or
yarn dev