This project is is a lighter version of a website that I designed and coded from the ground up for the largest fast-food restaurant chain in Algeria 🇩🇿 : Mega Pizza.
This project is made with the help of :
▶ Visite the website
- Every picture is compressed and served with the
webPformat - Every font is compressed and served with the
woff2format - Every picture is lazy loaded
- Every picture has a
LQIP(Low Quality Image Placeholder) and a loading indicator - Every third-party
JavaScriptlibrary is lazy loaded - Every critical styling is preloaded
- Every non-critical styling is lazy loaded
- Every critical font/picture is preloaded
- Super responsive (min :
280px) - Super fast loading (
0.5s) - Super low initial page size
I'm sure there's more, but that's already enough 🐸
The most challenging and time-consuming aspect of this project was designing the website. I was given no specific pattern or information regarding the layout, colors, or design, and was simply told to make a website. As a result :
- I spent several days brainstorming ideas, sketching designs, researching inspiration, testing color palettes and backgrounds, searching for suitable SVGs and icons, and editing and creating custom banners and images, all while compressing them to ensure optimal loading times.
Coding the website was a fun challenge, but optimizing it proved to be a bit more difficult. As many are aware, Angular is notorious for its large bundle size, and I couldn't rest easy knowing that the website might have a poor Lighthouse score. As a result, I spent hours fine-tuning the website's performance and user experience, ultimately achieving my goal by implementing various strategies like lazy loading and preloading resources to prioritize their loading order. Another useful tactic was to use the webP image format, which helped to further reduce the website's load times.
This website is designed to be fully responsive and optimized for viewing on screens of all sizes. I thoroughly tested it on a wide range of viewports to ensure that it looks great and functions flawlessly no matter what device you're using. It's worth noting that the website's minimum supported width is 280px, which is compatible with devices such as the Galaxy Fold 1.
You may say that the website is simple enough to just use vanilla JavaScript, and yes, you are right, but like I already mentioned, this version is a lite version, the original one was supposed to have ton of features, like ordering online and having a realtime status of the latter, sharing thoughts and leaving reviews, a discount program, a mobile application...
Although it's true that the website could have been built using vanilla JavaScript, it's important to note that this version is a 'lite' version of the original concept. The full version was intended to include a multitude of features, such as :
- Online ordering with real-time updates on order status
- Customer reviews and feedback,
- A loyalty program
- A dedicated mobile application.
It follows a simple structure :
📦
└─ src/
├─ app/
│ ├─ components/
│ │ ├─ page1/
│ │ ├─ page2/
│ │ ├─ page3/
│ │ ├─ page4/
│ │ └─ page5/
│ ├─ shared/
│ │ ├─ components/
│ │ │ ├─ modal/
│ │ │ └─ slide/
│ │ ├─ interfaces/
│ │ ├─ pipes/
│ │ ├─ services/
│ │ └─ shared.module.ts
│ ├─ app.component.ts
│ └─ app.module.ts
└─ index.html
I just can't sleep if my website has a bad score 💯.
Checkout my article on dev.to explaining the steps & technique I used to optimize this website :
Clone this repo into new project folder (e.g., megapizza).
git clone https://github.com/aBrihoum/megapizza_website megapizza
Install npm packages.
cd megapizza
npm i
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory.