Lieferando Beta
Landing page for the Lieferando Beta app.
Services: React
Introduction:
The landing page for the Lieferando Beta app allows users to download and register as a tester for the new Lieferando app. It includes links to register for both iOS and Android, as well as steps on how to give feedback and frequently asked questions.
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 multiple languages:
At the moment the Lieferando Beta landing page only focuses on the Austrian market. However the Stakeholder mentioned that we may be releasing the app in different markets and if that was the case the design would be the same, with different content.
Therefore I decide that it made sense to build this project using Vue JS, as it allows me to create a content.js file with universal content.
Once the file has been created I also create a env.local file with the 'VUE_APP_LOCALITY' variable, which lets the code know which language to pull the content through for.
Ability to dynamically change content:
As this is a landing page for a new app, the Stakeholder wanted the ability to update the Frequently asked questions without the need to continuously come back to a developer. Therefore I created two separate json files named 'faqs-en.json' and 'faqs-de.json' (one for each language).
Then within the content.js file, I have a link to each file on the server, so that we can continue to add languages and don't need to change any of the code.
Following this I then call the data within the FAQs.vue component when the page first loads. I then loop through the questions and answers and show them on the page. This means that the Stakeholder can simply update the file on teh server and it will be reflected on the live page.
Conclusion:
Using Vue JS has allowed me to create a content.json file with various data for each language. It also allows me to create a separate JSON file which can be updated by the Stakeholder.