/music_reports

Music Reports Web Development Test

Primary LanguageJavaScript

music_reports

Filter Search App

Screen Shot 2022-09-11 at 5 23 50 PM

Search for your favorite products

Screen Shot 2022-09-11 at 5 23 38 PM

steps to run project locally

  1. git clone
  2. npm i
  3. npm start

Music Reports Web Development Test

Step 1: Create a react project using either create react app or webpack

Here I used create-react-app

Step 2: Create 2 pages using hooks to navigate between them

Here I used React Router v6 navigating between pages with useNavaigate();

Step 3: Add a form with at least one input and a table to each page In this Application, I defined a component called TableData this contains a search input and a table of data. This component is rendered in two seperate pages. SearchPageOne and searchPageTwo.

Step 4: Add data to the tables using an ajax call. If you have an existing dataset you can use it.

Here I used the Fetch API to get data from this data set. Data Source - https://dummyjson.com/products

Step 5: Create a filter/search for each table using useEffect/useState to trigger from the input on the same page

Here I wrote a function that checks if the search input is empty, and if so it shows all the data, else it will filter the products according to the search input.

Step 6: Using context maintain the filters on each page when navigating back and forth. This step is a WIP - aim is for the searchValueto persist while navigating between pages.

In my most recent comment I have updated my implementation to more closely match react documentation. I haven't cracked it just yet. But i'll get there! :)

Step 7: Post your code on your github.

Here it is :)

Thank you for reading!

Angeline