Shopping Cart

[The Odin Project: Javascript] - Project: Shopping Cart

Intro

• This project was aimed as an introduction to React Router. I was familiar and have used Router in previous projects, so I decided to use Gatsby since I am still trying to learn this framework. Along the way I got learn a lot more. I am really proud of this project

• I borrowed images to make the website look like a real clothing store! I got the images from:

  • Photo by David Lezcano on Unsplash
  • Photo by Content Pixie on Unsplash
  • Photo by Heng Films on Unsplash
  • Photo by Brooke Cagle on Unsplash
  • Pacsun

• Project Task: The Odin Project - Shopping Cart

• View Project: http://sv_shoppingcart.surge.sh/

Demo

📗 Fonts used

• Secular One
• Lato

🎨 Color Reference

Color	Hex
Brown	#f6ecea
Black	#212122
Medium Brown	#be8643
Medium Brown Hover	#9a6e38
Card Hover	#ac401f

Overall

• I continued to use Gatsby to be more familiar with it. This project allowed me to practice more Gatsby functionality since I was using the pages directory and redirecting users to the pages
• For my next project,
  • I want to practice using CSS grid since I heard it can be a great alternative to CSS flexbox
  • Instead of using React-Bootstrap I am going to see if I can just use Material UI. In this project, I used it to get the icons in the footer

Design

• Learned how to use tools like Pixlr and Image Color Picker
• Pixlr allowed me to edit images. I was able to create the jumbotron background image thanks to this tool
• Image Color Picker allowed me to go to any picture on the internet and look at the hex colors they used. Really useful when looking at designs for inpirations
• Design Inspiration Came From Lorada | Minimalist Fashion Store Redesign

Styling

1. I learned to create global classes with styling such as text-align: center. Use this for cases where you need to apply that CSS but it is specific to only that HTML element
   1. It is still useful to create a class that will apply that styling to all elements since it will be a lot of work to place that class on every html element that needs it
2. Also one thing that I am going to start doing is to used the Row or Col as the overall container for content and any content inside of it will go inside another div. Leave the Row and Col alone since they already have their own css. Example:

<Row>
	<Col>
		<div className='exampleContainer>
			<p>...</p>
			<p>...</p>
			<p>...</p>
		</div>
	</Col>
</Row>

// Row and Col already have their own styling. I will rather keep Row and Col clean and
// apply the css I want to the exampleContainer

Development

• Learned how to use inline style to place a background image on a component! Really helped as I was having trouble figuring out how to place a background image in the scss file
• Learned how to create dynamic routing using Gatsby! This articles really helped:
  • https://medium.com/@ghoshanimesh/dynamic-routing-in-gatsby-b6ada258f6c2
  • https://www.qed42.com/blog/dynamic-routing-gatsby
• Learned how to use the pages directory to create the routes I want to link users to
• Learned how to add state to a link that a user clicks on! Really helped when clicking on the different categories for shop
• Learned how to set up Redux in a gatsby Application
  • These tutorials helped out
    • How to get started with Gatsby 2 and Redux
    • Setting up Redux with GatsbyJS V2
  • I noticed that when using Redux Dev Tools, my store was not appearing. For it to appear, I need to include. More here: https://extension.remotedev.io/#usage

window.**REDUX_DEVTOOLS_EXTENSION** && window.**REDUX_DEVTOOLS_EXTENSION**()

• Learned how to format numbers using Intl.NumberFormat. Resources to help me

  • How to Format Currency in ES6

• Learned how to use the array.splice(index, 1) → index represent the index of the element, the 1 represents how many elements to remove. Note that splice modifies the array in place and returns a new array containing the elements that have been removed.

• Learned how to create a reducer that adds elements to an array and deletes them

  • Really like the simplicity of the code. Easy to understand

  case shoppingCartTypes.SAVE_CART_ITEM:
  state.cartItems.push(action.payload.cartItem);
  
  return {
  	...state,
  	cartItems: state.cartItems
  };
  
  case shoppingCartTypes.DELETE_CART_ITEM:
  	state.cartItems.splice(action.payload.index, 1);
  
  	return {
  		...state,
  		cartItems: state.cartItems
  };

Technologies:

• React
• React Bootstrap
• Material UI for Icons
• Dribble
• Sass
• Surge.sh
• Gatsby