This project is a learning experience to get my feet wet at frontend development. its real world application is to provide customers with at-home appliance repair services as well as a small shop for appliance replacements.
React v18.2.0
React Router v6.3.0
css
to launch this project locally on your machine run the following commands :
git clone https://github.com/Mo-bakhtiari/handyman.com.git
npm install
npm start
this will run the project in development mode. to make a production build of the project to be deployed you can run:
npm run build
since the project was initialized by CRA this will automatically bundle React in production mode. you can now deploy build folder to a host server of your choice.
chances are to build as small as a single page website that loads much slower than a gigantic website like Amazon if you are not careful enough with the efficiency of your code. to avoid such scandal i implemented code splitting technique and took the chrome Lighthouse advices.
you can read about code splitting Here.
based on Lighthouse first recommendation, Serve images in next-gen formats, images were saved in WebP format.
the second recommendation was to Eliminate render-blocking resources and by taking that, external links for importing fonts and icons were removed and those fonts and icons were included locally in the project.
as the result of these enhancements performance score was doubled.
front design was adopted from Tamironline website but some pages were omitted to make a reasonable amount of work out of it.