This repo is a clone of https://github.com/martink-rsa/medium_react_mui, made by following this tutorial on Medium.
The repository can be accessed here: https://github.com/arefeena/ECE444-F2020-Lab9
Here are the insights for the homepage:
The desktop score for this page was 79. The diagnostics point to an issue with asset size, namely the background image we use.
The mobile score for this page was 62. Similar to the desktop diagnostics, there are concerns about the assets.
Here are the insights for the search results of a "chicken" query:
The desktop score for this page was 91. The diagnostics again refer to the assets.
The mobile score for this page was 69. Similar to the desktop diagnostics, there are concerns about the assets.
Here are the insights for a chicken curry recipe:
The desktop score for this page was 98. This time, the diagnostics point to unoptimized loading practices (such as webfonts and passive scroll listeners).
The mobile score for this page was 63. Similar to the desktop diagnostics, there are concerns about the loading performance including use of 3rd party code.
Although we used Flask as a framework for the web application as a whole, the frontend work for Apprentice was mostly done using vanilla HTML/CSS/JS (i.e. no framework) with Jinja as a templating engine to interface the frontend with Flask.
That being said, we did use some Bootstrap which could count as a CSS framework. Bootstrap helped us style elements such as buttons and form fields with minimal effort. It also has extensive documentation and readily available integrations with Flask, so it was easy for us to pick up.
Looking back after having done this lab, it would have been a good idea to use a proper frontend framework for our project as it would have made development much easier.