Zuri Isst
Unlock a new restaurant on the Just Eat platform every month.
Services: React
Introduction:
Zuri Isst is a project that ran from September 2023 until March 2024. Every month, a new restaurant in Zürich was added to the Just Eat Takeaway.com platform and featured on this landing page, giving potential customers an insight into the restaurant.
Services: React
Highlighted Features:
Below, I have listed some key features of this project. They include parts elements that I have coded to save time and repetition, features of functionality, and areas of the site that were key for user experience.
One file for two languages:
As this landing page is focused on restaurants in Zürich, there are two languages needed (German and English). Instead of having to replicate the same code twice, I have used a js file to contain the relevant data and then pulled that through whenever it is needed.
Different restaurants each month:
Each month, the landing page features a different restaurant. This means the featured image, restaurant logo, restaurant content and image gallery all change to display the new content.
Within the content.js file I have created an array, where I input the relevant details for the restaurant. This is done for both the German and English markets.
Getting the current month:
As the content changes each month, I have decided to use some JavaScript to get the current month and then display the relevant information.
Within each component I have created a function called applyClass. Once the page is loaded this function looks at which month it is currently is applies various active classes throughout the document.
Changing month:
One feature that the stakeholder wanted on this project was the ability to see the previous month restaurants using tabs on the page. This meant that I needed to create a changeMonth function and apply it to each tab. Once the user clicks on the previous month, this function gets the class name from the tab (which is the month) and finds the relevant content from the content.js file.
Conclusion:
Using a mixture of JavaScript functions I have been able to create a landing page to display different information depending on the month.