GoFood Web App
GoFood is an online food delivery service that's part of Gojek, an Indonesian company known for its wide range of on-demand services and digital payment tech.
Specifications
- Built with HTML5 semantic tags, React.js, SCSS, BEM method, Node.js, Express.js, MongoDB
- Total of 9 pages
- Mobile-first workflow
- Responsive on all devices
Features
- Authentication
- Verifying user phone number validity using Google's Libphonenumber, the React International Phone package, and Twilio
- Account registration and login with user data (email, password, etc.)
- User input validation on both the frontend and backend
- Kindly note, since I'm using Twilio's free trial, verification code access for phone numbers is limited to the ones I've registered with Twilio
- Display restaurant list
- Filtering by location and category
- Loading skeleton
- Displaying meal list
- Meal lists sorted by category
- A "Menu" button that implements smooth scrolling to navigate from one category to another
- Loading skeleton
- Cart functionality
- Adding, reducing, and removing items from the cart
- Price calculation of items in the cart, validated with backend calculations
- A popup warning if the user has items in the cart from one restaurant but then wants to order from another
Lesson Learned
I decided to create a GoFood clone project simply because I love working on e-commerce projects, and I'm a big fan of Gojek's user interface, including their GoFood's. Their design is so intuitive and consistent, making it not only easy to use but also great to look at. From my standpoint as a frontend developer, it wasn't hard to style, even using plain CSS.
This clone is still simple, but I learned a lot, especially about using third-party services to validate user numbers. I also learned on how to use TanStack Query a.k.a React Query. It was my first time implementing it, I feel I still need to learn to use its configurations correctly so I can fully utilize one of the library's main features, caching. Overall, I am quite happy with the result since I think it really looks like the original GoFood website UI and also mimics some of its functionalities.