Делаем интерактивный Big Mac Index на React и Quarkly
Привет! Для начала процитирую страницу из Википедии, да будет здоров Джимми Уэйлс и все редакторы, поддерживающие свободную энциклопедию. Согласно ней, индекс бигмака — это неофициальный способ определения паритета покупательной способности. Если проще, этот индекс довольно наглядно показывает уровень цен в стране, ведь в основе стоимости бигмака: две мясных котлеты гриль, специальный соус, сыр, огурцы, салат и лук, всё на булочке с кунжутом… Кроме этого, конечно же, в ценник заложены аренда помещений и оборудования, рабочая сила и многие другие факторы.
Важно и другое: милые сердцу многих рестораны с желтой буквой «M» имеют обширнейшую сеть, что дает возможность сравнить цены почти по всему миру. Исследования ведутся с 1986 года и постоянно актуализируются журналом «The Economist».
Мы визуализировали имеющиеся в свободном доступе данные и собрали простое приложение, используя React и наш проект Quarkly.
Пост получился бы менее интересным без технической части, хотя поиграться с числами и посмотреть, сколько бигмаков вы могли себе позволить несколько лет назад на свою зарплату в Израиле или, например, во Вьетнаме, путешествуя как настоящий кочевник, тоже интересно.
Не агитируем брать валютные ипотеки, ориентируясь на индекс бигмака (к слову, в странах Африки есть ещё и индекс KFC), наш пост чуть об ином. Основной нашей задачей было посмотреть на практике, насколько просто и быстро получится реализовать подобную задумку, работая лишь в одном инструменте. Коротко про человекочасы — в самом конце поста.
Часть 1. Пишем код компонента с нуля
Записали видео всего процесса с русскими и английскими субтитрами. В описании есть таймкоды, чтобы сэкономить время и посмотреть только то, что вам интересно.
Всю кодовую часть пишем внутри Quarkly.io, используя хуки. Данные подтягиваем из базы, которая есть в свободном доступе на гитхабе.
Часть 2. Настраиваем визуал приложения
Прелесть в том, что для этого нам не нужно переключаться на другой инструмент и продумывать логики того, как связать наш код и дизайн.
В Quarkly всё уже находится под рукой.
Начинать стилизацию не нужно с чистого листа, поскольку структура и логики уже были созданы на предыдущем этапе. Это сильно экономит время.
Смотрим на результат
Приложение доступно по ссылке bigmaconomics.com.
На всю работу с учетом написания кода компонента и последующей донастройки визуала ушло около 15 часов с перерывами, поделившими процесс на два дня. Вероятно, можно было управиться быстрее, но такой задачи изначально не стояло. Было интересно понять, насколько проект подходит для практического решения подобной задачи в целом.
Приглашаем в наше комьюнити Quarkly в телеграме, где мы делимся новостями про апдейты и отвечаем на вопросы.
