The goal of this project was to test my design and coding skills by creating an app for a restaurant.
I first started by creating a brand for the restaurant in Figma. I wanted to replicate the experience of producing an app for a customer. So, I designed a style guide using specific colors and fonts, as well as creating a custom logo.
The number of images for restaurant apps is usually high to advertise the menu, so I opted to build the project using Vite and ReactJS. This method would ensure that the images would load quickly, as opposed to using create-react-app.
The decision to use React was an easy one; React is a popular library, but I also really enjoy using React. I love component-based programming for its utility, particularly with navigation bars, footers, and forms. Using React also gave me a chance to practice hooks. Some hooks have been challenging to implement, but I will solidify those skills with more projects.
One of the challenges I faced with this project was, surprisingly, in deployment. The app is deployed through Vercel. I originally wrote the code for the Order Online page using React components and JS mapping. However, the images repeatedly failed to load. After numerous searches, I finally decided to simplify the code, which was disappointing. Nevertheless, I learned that in some cases, the simplest option is best, especially if it means the project works as intended.
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh