The Shoes.js object will have metadata about the products our website is selling. Let's start creating this interface:

1. Under the src directory, create a folder called Items, and within the Items folder, create a .js file called all.js. List out all of the shoes you want to display on the site within this file. This is how my all.js file looks:

import Shoes1 from './Shoes1';
import Shoes2 from './Shoes2';
import Shoes3 from './Shoes3';
import Shoes4 from './Shoes4';
import Shoes5 from './Shoes5';

const Shoes = [
 Shoes1,
 Shoes2,
 Shoes3,
 Shoes4,
 Shoes5, 
];

export default Shoes;

The Shoes constant contains the details of all of the items listed and can be used to access their information.

2. Now, define the parameters of each individual shoe component. This is how my Shoes1.js file looks:

export default {
 price: 200,
 name: "Badidas",
 logo: "Badidas.png",
 image: "Shoe1.jpg"
 }

Do this for all of the shoe components from Shoes2 through to Shoes5.