Armageddon 2023

RU: Онлайн-сервис по мониторингу и уничтожению опасных астероидов на основе данных API NASA.

EN: An online service for monitoring and destroying dangerous asteroids based on NASA API data.

Описание задания

Используя API NASA разработать сервис по мониторингу и псевдо-уничтожению опасных астероидов.

Макет: Figma

• На главной список подлетов астероидов к Земле от текущей даты в бесконечность. Загрузка астероидов при скролле порциями. По каждому астероиду: название, размер, оценка опасности, как близко будет к Земле, точная дата максимального подлёта. Иконка астероида в зависимости от размера (критерий малый-большой выбрать самостоятельно). И опция вывода расстояний: в километрах или расстояниях до Луны.
• Адаптивная вёрстка.
• Кнопка заказа отправляет заказ в корзину. Корзина — это плашка на странице списка. По нажатию на кнопку отправки открывается страница успешного заказа, где перечислены заказанные сближения.
• У астероида есть своя страница. Там указаны данные астероида и список всех его сближений. По каждому сближению: скорость относительно Земли, время максимального сближения с Землей, расстояние до Земли, по орбите вокруг чего летит.

Технические требования

• Использовать Next.js (также принимаются решения на React, если будет реализован SSR).
• Использование redux нежелательно.
• Стилизация с помощью CSS модулей.
• Решение предоставить в виде git репозитория (github/bitbucket/gitlab по выбору).
• Корректное отображение в последних версиях браузеров (chrome, firefox, safari, edge).

Дополнительные требования

• Использование TypeScript.
• Тесты.
• Деплой проекта на любой удобный для вас хостинг.
• Документация/инструкция по сборке проекта (README).

Выполненные требования

Общие требования

• Приложение написано с использованием фреймворка Next.js последней версии.
• В качестве state-менеджера используется Zustand.
• Стилизация выполнена с помощью SCSS модулей (для упрощения адаптации верстки под различные девайсы).
• Код чистый и читабельный.
• Отсутствует дублирование кода, приложение разбито на компоненты, отформатировано в едином стиле.
• Приложение адаптировано под различные устройства.
• Корректное отображение в браузерах Chrome, Firefox, Edge.

Дополнительные требования

• Используется TypeScript.
• Выполнен деплой проекта на хостинг Vercel.
• Написана документация по сборке проекта, а также по компонентам и функциям.

Описание приложения

1. Главная страница

   • При входе в приложение отображаются астероиды начиная с текущей даты.
   • Возможность выбрать единицы измерения дистанции до астероида (в километрах/в лунных орбитах).
   • Возможность добавить астероид в корзину по нажатию на кнопку "ЗАКАЗАТЬ". При повторном нажатии астероид удалится из корзины.
   • Отображается счётчик астероидов в корзине.
   • При клике на название астероида происходит редирект на страницу с информацией о выбранном астероиде.
   • При клике на кнопку корзины "ОТПРАВИТЬ" происходит редирект на страницу отправки заказа на уничтожение астероида(-ов).
   • При скроллинге страницы данные об астероидах загружаются с лимитов в 1 день.

2. Страница отправки заказа

   • На странице отображается список заказанных на уничтожение астероидов. При клике на название астероида происходит редирект на страницу с информацией о выбранном астероиде.
   • В случае отсутствия астероидов в корзине выводится информационное сообщение.

3. Страница с данными астероида

   • На странице отображается название астероида, статус опасности, кнопка заказать, данные о характеристиках астероида, все сближения астероида.
   • Возможность выбрать диаметр астероида в предложенных единицах измерения (метры, километры, мили, футы).
   • Возможность выбрать дистанцию до астероида в предложенных единицах измерения (километры, астрономические единицы, лунные единицы, мили).
   • Возможность выбрать скорость астероида в предложенных единицах измерения (км/ч, км/с, миль/ч).
   • Возможность посмотреть о сближениях с астероидом вплоть до точной даты.

---

Приложение написано с использованием следующего JavaScipt/TypeScript стека.

• Next.js
• Zustand
• React Query
• moment.js
• TypeScript
• ESLint
• Prettier

---

Описание фич

Настройка приложения

1. Для корректной работы приложения необходимо указать переменные среды. Название переменных указаны в файле .env.local.example.
2. Файл .env.local располагается в корневом разделе приложения.
3. Для работы приложения необходимо получить ключ на сайте NASA API.
4. Описание файла .env.local

NEXT_PUBLIC_BASE_URL="PUT BASE NASA URL HERE"
NEXT_PUBLIC_API_KEY="PUT API URL HERE"

5. Для обхода ограничений CORS можно использовать URL CORS Anywhere. Для этого необходимо вставить URL сервиса CORS Anywhere перед URL API NASA. В качестве работающего сервиса указан личный сервис CORS Anywhere.

NEXT_PUBLIC_BASE_URL=https://important-crab-cardigan.cyclic.app/api.nasa.gov/neo/rest/v1

Запуск приложения

1. Для работы приложения требуется NodeJS версии >= 18.17
2. Для запуска приложения в режиме разработчика использовать npm run dev
3. Для сборки использовать npm run build

Запуск Docker

ВАЖНО: перед запуском убедитесь, что у Вас установлен Docker, а также Docker Compose

1. Для запуска Docker-контейнера, необходимо в корневом разделе создать файл .env.production с ключами, указанными в разделе Настройка приложения.
2. Для запуска сборки Docker-контейнера выполните следующую команду:

docker-compose up -d

3. Docker-контейнер запустится в фоновом режиме.

---

✨ Превью

Автор

👤 Разработчик Indar Basto (@wowblvck)