Я учусь на Lambda и в настоящее время работаю над проектом Labs. Мой проект называется Citrics и посвящен городской статистике. Цель приложения — предоставить пользователям статистику по любому американскому городу с населением от 30 000 человек. Приложению нужен простой для понимания способ выбора городов для сравнения, а затем приятное для просмотра сравнение выбранных городов. Основные проблемы с приложением будут связаны со стилем и адаптивностью целевой страницы к мобильным устройствам.

Проект был разбит на ряд задач. Первая задача — лендинг. Когда пользователь открывает приложение, ему предоставляется карта и панель поиска. Карта интерактивна, и они могут осмотреться и посмотреть, есть ли выбранный ими город в нашей базе данных с помощью панели поиска. Затем они могут увидеть список выбранных городов, до 3, и после выбора второго города могут сравнить их в любое время.

На прикрепленном изображении видно, что передо мной стояла задача отобразить статистику каждого города для сравнения. Эта страница является точкой сайта, поэтому это была важная задача.

Подзаголовок: Реагируйте сюжетно

Моя задача заключалась в обработке и использовании информации из нашего бэкенда. Я работал со своими товарищами по команде над общим глобальным управлением состоянием с помощью Redux и решал основные проблемы с потоком пользователей, прежде чем сосредоточиться на своей странице сравнения. Мы решили, что в этом приложении лучше использовать Redux, а не Context, потому что он допускает более сложное использование состояния. Мы хотели, чтобы штат обрабатывал в фоновом режиме вызов и сохранение информации о городе, когда пользователь выбирал города. Это ускорит загрузку страницы сравнения, так как большая часть информации уже будет получена, и не будет ожидания вызовов axios.

Несколько дней я подрабатывал бэкендом, помогая отлаживать некоторые проблемы с конечными точками и таблицами. Информация от нашей команды Data Science была очень минимальной, и мы должны были быть готовы ко всему.

Подзаголовок: Формирование реакции

Пока у нас есть следующие особенности:

  • Полностью интерактивная карта
  • Интерактивные графики
  • Функция выбора города с картой, четко отображающей выбранные города
  • Полная функциональность автозаполнения панели поиска

Эти функции были нашим основным MVP, и мы потратили много времени на их отладку, а затем стилизацию, чтобы они выглядели великолепно. Мы очень гордились нашим прогрессом в этих компонентах.

Будущие функции:

Отредактируйте карту, панель поиска и ящик, чтобы сделать их более интуитивно понятными. В настоящее время наша карта выглядит великолепно, но, к сожалению, функциональность нашего ящика оставляет желать лучшего. Смысл нашего приложения не сразу очевиден, и мы должны добавить заголовок на страницу или всплывающее окно, которое закрывает карту, объясняющую некоторые из наших приложений перед использованием.

Несмотря на отменённые фичи, за это время наша команда многое узнала о новых хуках React, а затем эффективно их использовала. Я специально научился быть более конкретным в отношении функций, которые я разрабатывал, чтобы предотвратить дублирование с товарищами по команде.

Тест ИСА: