mohammadalijf / autocomplete-product-list-challenge

The general idea of this coding challenge is to implement a basic auto-complete list which will be updated dynamically while the user types in a search box. The result will be comprised of products containing information like title, price and a couple of images.

Auto-complete product list with basic filtering

The general idea of this coding challenge is to implement a basic auto-complete list which will be updated dynamically while the user types in a search box. The result will be comprised of products containing information like title, price and a couple of images.

Used Packages

• Create React App: For bootstrapping the react project.
• Material-UI: For Theming and design system.
• Redux/Redux Toolkit: For creating store and slices, reducers and action.
• PapaParse: For parsing product csv file.
• comlink-loader: For creating web worker to do filtering process on background thread and context without ejecting app.
• workbox: For creating service worker and caching system without ejecting app.
• Cypress: For End-To-End tests.
• Jest: For Unit tests.
• Testing Library: For Test utilities.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the unit test runner in the interactive watch mode uding jest.

yarn cypress:open

Launches the end-to-end test runner in browser using cypress.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Running the production build on HTTPS localhost

service workers are only available in production builds on HTTPS. To run app with service worker:

1. First use yarn build to create production build.

2. Create self signed certificate and key for localhost. This tutorial shows an easy way to create self signed cert and key.

3. Install serve packge to serve your production static files:

   yarn global add serve

4. serve build folder with created cert and key:

   serve build --ssl-cert /path/to/cert.pem --ssl-key /path/to/key.pem

5. visit https://localhost:5000

Image Caches

This projects uses service workers for caching app bundle and product images. if you run app in HTTPS production mode the image cache will do its magic. please refer to this section on how to run production on localhost using https. For checking cached images or cleaning them use Google Chrome DevTools. in Application tab under Cache Storage check product-image.

Attribution

cloth placehoder icon made by Freepik from www.flaticon.com