Делаем интерактивный Big Mac Index на React и Quarkly

Привет! Для начала процитирую страницу из Википедии, да будет здоров Джимми Уэйлс и все редакторы, поддерживающие свободную энциклопедию. Согласно ней, индекс бигмака — это неофициальный способ определения паритета покупательной способности. Если проще, этот индекс довольно наглядно показывает уровень цен в стране, ведь в основе стоимости бигмака: две мясных котлеты гриль, специальный соус, сыр, огурцы, салат и лук, всё на булочке с кунжутом… Кроме этого, конечно же, в ценник заложены аренда помещений и оборудования, рабочая сила и многие другие факторы.

Важно и другое: милые сердцу многих рестораны с желтой буквой «M» имеют обширнейшую сеть, что дает возможность сравнить цены почти по всему миру. Исследования ведутся с 1986 года и постоянно актуализируются журналом «The Economist».

Мы визуализировали имеющиеся в свободном доступе данные и собрали простое приложение ^[1], используя React и наш проект Quarkly.

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

Не агитируем брать валютные ипотеки, ориентируясь на индекс бигмака (к слову, в странах Африки есть ещё и индекс KFC), наш пост чуть об ином. Основной нашей задачей было посмотреть на практике, насколько просто и быстро получится реализовать подобную задумку, работая лишь в одном инструменте. Коротко про человекочасы — в самом конце поста.

Часть 1. Пишем код компонента с нуля

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

^[2]

Всю кодовую часть пишем внутри Quarkly.io ^[3], используя хуки. Данные подтягиваем из базы, которая есть в свободном доступе на гитхабе ^[4].

Часть 2. Настраиваем визуал приложения

Прелесть в том, что для этого нам не нужно переключаться на другой инструмент и продумывать логики того, как связать наш код и дизайн.

В Quarkly всё уже находится под рукой.

^[5]

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

Смотрим на результат

Приложение доступно по ссылке bigmaconomics.com ^[1].

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

Приглашаем в наше комьюнити Quarkly в телеграме ^[6], где мы делимся новостями про апдейты и отвечаем на вопросы.

Автор: Oleg Pavlov

Источник ^[7]