https://github.com/nicolasdra/autocomplete-app
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 displayed ina table. Stack: React Hooks, Material-UI
https://github.com/nicolasdra/autocomplete-app
Last synced: 3 months ago
JSON representation
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 displayed ina table. Stack: React Hooks, Material-UI
- Host: GitHub
- URL: https://github.com/nicolasdra/autocomplete-app
- Owner: NicolasdRa
- Created: 2021-08-04T05:25:01.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-08-06T18:01:13.000Z (almost 5 years ago)
- Last Synced: 2025-12-29T14:47:28.000Z (7 months ago)
- Language: TypeScript
- Size: 889 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Autocomplete App
This project was created with [React Hooks, Typescript & Material UI](https://github.com/NicolasdRa/autocomplete-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
### `npm test`
Launches the test runner in the interactive watch mode.\
### `npm run build`
Builds the app for production to the `build` folder.\
You may serve it with a static server:
### `npm install -g serve`
### `serve -s build`
or just run
### `npx serve build`
## General
* Product feed file (products.csv) is parsed and converted into JSON by means of the `react-papaparse` library in a useEffect hook in the `App` component. Alternatively, it could have been processed and served through a mock server like json server, the data fetched in the same useEffect hook and the date fed to the local state in the same way.
* The app is a `PWA`, and has been optimized bringing lighthouse report values to high scores (96, 98, 100, 100). Further optimization can still be made to bring all values to a 100.
* `Testing` has been implemented with `Jest` and `Enyzme`. Spnapshot tests and a selection of functionality tests have been implemented. Further tests can still be implemented with more time.
## Components and functionality
* Search component filters by product name and price.
* Dynamic pagination implemented with options to display from 5 to 200 rows per page.
* Rows display required info and is expandable showing a photo gallery of the product
## Optional features
* `gender` filter implemented.
* `sale_price` checkbox filter implemented.
* images are natively lazy loaded by browsers
* Being a PWA loaded images are cached and are accessible offline served by the service worker.