This is some text inside of a div block.
Technologies
  • React
  • Firebase
  • Redux
  • CSS Sass
  • Node.JS
  • React Stripe Checkout
  • styled-components
  • React Router
  • React Spinners
  • Basin
Project Overview
Sylence is an online apparel site that I created using react and redux. This app includes Google Sign On Authentication and React Stripe Checkout. My main purpose in creating this application was to highlight my ability to use redux - a widely used state management library.  In this article, I'm going to guide you through the steps I took to create this application. Enjoy!
Project presentation.

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 sign in/ sign out tab on the navigation bar will direct you to the page shown below. Upon first registration, the data entered on the form will be sent to the Firebase authentication service. Firebase authentication is a user-friendly software development kit that supports authentication across multiple facets. In this application, we will use simple e-mail/password authentication and Google Sign-in. The email and password entered on the registration form are entered into Firebase authentication as a hash for security. The sign in with Google button allows the user to select their email and login automatically without entering a password. If the user has not already created an account, a new account will be created by selecting the Google Sign-In button. Alternatively, the Google login method will be added to an existing user's profile by matching the email addresses. The main purpose of creating a profile is to remember the products added to your cart.

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.

Selecting the go to checkout button from the cart drop-down menu will direct you to the page above. When you click the Pay Now button, a popup menu displays a form requesting user e-mail and billing/shipping information. The information input in the form will be defined as properties for the StripeCheckout component. To use the StripeCheckout component, I had to register for a Stripe account. Once my account was created I was provided with a publishable key that linked the StripeCheckout component in the application to my Stripe account. Once the Stripe API processes the checkout, I can see the transaction in the Stripe dashboard.

Project Summary

I hope this presentation clarified my thinking process when creating this application. While coding this project, I acquired a large amount of knowledge, including things such as: the integration of the API, breaking down a complex idea into smaller pieces, using Redux to manage state throughout the application, and creating styled components using Sass. My confidence in coding sky rocketed after completing this project and I know this is only the beginning. Don't hesitate to check out the other projects in this portfolio.

Contact.

Have a project that could use a skilled designer hand? Get in touch!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.