When you first access the application, you will notice an animated load icon that is present during the initialization process. I created this icon with an npm package called react-spinners. Once the application is loaded, you will be redirected to the home page as shown above.
At the top of the web page is the navigation bar which contains the following tabs:
When you select the shop icon, the drop-down menu presents the following collections: Mens, Womens, Hats, Sneakers, Jackets. Depending on the collection you have chosen, the web page will display all items from that collection. In my Redux folder, I created another folder named Directory that contains a reducer that attaches an ID number and a URL link to each collection(shown in photo above).
When the end user selects a collection from the popup menu redux extracts the section's data from the directory reducer. I then map through the sections array passing each section's props down to a component called ShopIconItem. The picture on the left shows the function I used to carry out this action..
I imported withRouter from npm package React Router DOM to obtain the current URL using the match property. Attached at the end of the current URL is the linkUrl property that I extracted from the sections array. History is a React Router dependency that gives users access to the browser's session history and navigates forwards or backwards. In the picture below, you will notice the history object used to push the new URL into the history stack.
The Shop icon and the Collections icon direct the page to the /shop URL. The Shop icon adds linkUrl to the /shop path, pointing the user to the exact collection (e.g., https://sylence.herokuapp.com/shop/womens. The Collections icon only uses the /shop path which directs the user to the collections overview page. The CollectionsOverview component extracts the collections data from redux then passes its properties to the CollectionPreview component. The CollectionPreview component filters the first four items of each collection into the PreviewContainer component, and then displays each PreviewContainer on the collections overview page as shown in the image below.
The contact page allows visitors the opportunity to request additional information. I used a form hosting service called Basin to view these form submissions.
Selecting the cart icon will display the drop-down menu displayed in the picture on the left. The drop-down menu shows the items added to cart, the quantity of each item added, and the price.
Have a project that could use a skilled designer hand? Get in touch!