Getting set up

Once the repo is cloned and dependancies are synced up you will need to CD into two different folders and run the following commands.

/client/server nodemon .
/client npm start

this will allow the app to run as intended.

Packages used

Client:

Axios - Promise based HTTP client for the browser and node.js. I used this npm package to help interact with mongodb.
Scss - This packages was installed as a method for styling the front end.

Server:

Cors/Express - Cors and Express are middleware packages used to help push information to the mongodb.
Mongoose - Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment. Mongoose supports both promises and callbacks.
Nodemon - Nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.

A Quick runthrough of the App:

The server side:

I used mongoose to help build a schema that could be pushed up to the MongoDB colection for quick and easy storage.
Mongoose connected to the database using the link generated by the collection.
The commented out code in /server/index.js is the structure i used to add code to MongoDB rather than using the interface on the website.
I then set up a get request from the module storing the MongoDB data on localhost3001/read which was passed to the front end to be displayed.

The client side:

The client made a request to the localhost3001/read in App.jsx using the Axios npm package.
The request was hosed in a useEffect and the function was issued a promise in the form of a .then which delayed the site from rendering the components until the information for MongoDB had arrived.
A loading message was set up to inform the user that something was happening (You will see this if you dont set up the nodemon . correctly as no data will be passed to the front end.)
An error message was also stored in a catch to inform me if the response failed to load.
Now that I had data being supplied to the front end I needed to display it:
- This was done inittially (before I filtered the data) by storing the information in state and passing it the the child component "Card" as props.
- I rendered this information for each tire collection on a different card and had it displaty on the App.
To filter this information and provide the user with the ability to manipulate which tyres they saw on screen I filtered the data in three different useEffects storing each filter in state so as to be used in the display.

As you can see if you are running the App, there is: - A dropdown search bar that allows you to filter via brand name. - A slider to filter tyres by price. - Another slider to filter the tyres by tyre size.

The final part to the data display manipulation was pagination.
- This was done by using state to store a max number of cards on one page and then adding the other pages via a pagination component so the user could cycle through at will.
- This method allowed the filtering to push all items that met the filtered criteria to the front page, incentivising the user to filter and thus speeding up the process of finding products they are looking for and making their experience better.