Live on https://not-pizzahut.netlify.app/
This is a React version replica of the offical pizza hut. It mimics the functionality and design of the Pizza Hut food order website to build a website that looks just like the real deal. A fun project to train my React skills.
No real payment and real pizza involved. Just for my educational use only :)
Javascript, React.js (Hooks), npm, Firebase for backend server, CSS modules, Netlify (web hosting)
React.js is used because it allow a smoother web browsing experience and provides better performance, and the original site is not build upon it. Thus, I think it is a great oppounity to rebuild the site with React as a challenge for myself.
This website contains features you need to put an order through the internet, implemented through React and Javascript logics.
On top of choosing what to order, user can choose subitems / customize their order dynaically based on their preference.
Although there is no real payment involved, the order data will be sent to the database just like how the real orders do. With HTTP request and the fetch API, This website sends the POST request to the server when an order is confirmed, by which the server records the order.
This website has provided an option to fetch server data and print them on the console, so you see how the order has been stored on the Firebase server
Layout of the website is responsive to different screen sizes.
This website is built upon the React.js Library. It utilizes components to separate code blocks into reusable components and manages the app status with Hooks like props and state. I have used function & hooks instead of class components because the React offical site recommands it.
Multiple advanced Hook concepts is applied onto this project. The cart state is managed with useReducer to handle complex logic, and deliverd with useContext & Provider to make it more assessible to other components without passing too much props (~Redux). The HTTP fetch and input validation is handled by custom written Hooks (useHttp in use-http.js & useInput in use-input.js) to make them reusable and convenient to use.
Module CSS is used to manage CSS of each component to ensure they do not accidentally collide with each other. The responive layout is made possible thanks to media query to adjust flex size and other various properties based on screen size.
- Playing with actual Paypal payment
- Option to choose pick up time and location instead of delivery only (Google map to display store locations)
- Applying Coupon code
- Put food menu on the server (I wrote the menu on client-side code and I am too lazy to rewrite them on the server :P)