Making an interactive Big Mac Index using React and Quarkly

Hey! To begin with, I will quote a page from Wikipedia, May Jimmy Wales and all editors who maintain the free encyclopedia be healthy. According to her, the big mac index is an unofficial way to determine purchasing power parity. To put it simply, this index quite clearly shows the level of prices in the country, because the cost of a Big Mac is based on: two grilled meat patties, a special sauce, cheese, cucumbers, salad and onions, all on a bun with sesame seeds … In addition, of course, the price tag includes rent of premises and equipment, labor force and many other factors.

Another thing is also important: the restaurants with the yellow letter “M”, dear to the heart of many, have an extensive network, which makes it possible to compare prices almost all over the world. Research has been conducted since 1986 and is constantly updated by The Economist magazine.

We visualized the freely available data and collected a simple attachmentusing React and our Quarkly project.

The post would have turned out less interesting without the technical part, although playing with the numbers and seeing how many big macs you could afford a few years ago for your salary in Israel or, for example, in Vietnam, traveling like a real nomad is also interesting.

We are not campaigning to take foreign currency mortgages, focusing on the Big Mac index (by the way, in African countries there is also the KFC index), our post is a little different. Our main task was to see in practice how easy and fast it will be to implement such an idea, working in only one tool. Briefly about man-hours – at the very end of the post.

Part 1. Writing the component code from scratch

We recorded a video of the whole process with Russian and English subtitles. There are timecodes in the description to save time and see only what you are interested in.

We write the entire code part inside Quarkly.iousing hooks. We pull the data from the database, which is freely available on githabe

Part 2. Setting up the visual of the application

The beauty is that for this we don’t have to switch to another tool and think over the logic of how to link our code and design.

At Quarkly, everything is at your fingertips.

You don’t need to start styling from scratch, since the structure and logic have already been created in the previous step. This saves a lot of time.

We look at the result

The application is available here

The whole work, taking into account the writing of the component code and the subsequent visual adjustment, took about 15 hours, with breaks dividing the process into two days. Probably, it was possible to cope faster, but this was not a task initially. It was interesting to understand how the project is suitable for the practical solution of such a problem as a whole.

We invite you to our Quarkly community on telegram, where we share news about updates and answer questions.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *