As of current time of this repository's creation, the current Burger Street website needed a face-lift. My problems with their site:
- Their site is NOT mobile friendly.
- Design feels outdated in my opinion compared to the usual restaurant web page.
- Their loading time on slow 3g was timely, which could drive away impatient customers.
- Wanted to start a fun project to see if I could create an improved version in terms of performance, and work on design skill along the side.
- Vite + Yarn
- React
- Libraries: (GSAP, react-scroll, react-router-dom)
- Tailwindcss
The main issue I had was "How can I make it so that the new webpage shows improvement in loading speeds for slower internet?"
I learned about a method called "code splitting" which very much helped only load what the page NEEDS, instead of loading every component at once. This combined with lazy loading of images helped the production build of the redesigned version perform in an optimised manner compared to the offical site.
To improve our lighthouse score even further, I could compress the images possibly, and rewrite some of the code and get rid of unnecessary writing.
Did I learn a lot from this as a first project?
Yes. Taking time to read Documentation for libraries/technologies you plan on using really does help solve your general problems. It was a very fun experience to rummage through their Documentation and take the time to understand why what I had done originally was not working, and proceed to work on a fix for the situation.
Wanted to redesign and improve a website of a local burger chain I enjoy. I was able to learn much from taking on this project as my first.
I think design-wise, it could use work around the edges, especially in the hero section. But for my first website, I am slightly satisfied with the results.