Resto Finder

Context & Challenge

This project is the final submission from Dicoding Indonesia Class Course "Menjadi Front-End Web Developer Expert". Making restaurant finder Web App by applying basics of display responsibility on mobile devices, responsive layout using @media query and flexbox CSS, Optimization of UI elements such as implementing a navigation drawer, setting appropriate text spacing, Using focus and screen reader to input data on the website (Experiencing Focus & Experiencing Screen Reader). In this project, I am required to be able to create a front-end web application that is responsive, has good accessibility, is easy to maintain, has native properties, can be tested, and has good performance. Because, companies such as Tokopedia, Twitter, and Facebook have succeeded in developing websites that are conveniently accessed on smartphone devices. This can be achieved by paying attention to aspects of mobile-friendliness, accessibility, and optimization.

Architecture & Scope

1. Integration Test: Implement integration tests for the like and unlike restaurant feature.
2. End to End Test: Implement End to End Test with the following scenario: Like a restaurant, unlike the same restaurant.
3. Image Optimization:Compress the hero image used to be below 200kb in size; Implement responsive image technique for the hero image. The image resolution on mobile and desktop screens should be different; Apply lazy loading technique to the restaurant list images displayed.
4. Bundle Optimization: Install bundle analyzer on the project submission; Use Code Splitting technique to separate vendor code from the original code you write.
5. PWA implementation, responsive design, website accessibility, and so on.