Shop Shop is an example of an ecommerce webpage built using the MERN stack. Additional technologies include using Redux to manage the global state of the frontend and uses GraphQL to manage requests to the server's database. Furthermore, Shop Shop utilizes the Stripe API in test mode to simulate the process of checking out.
SN: Shoutout to the Full-Stack Coding Bootcamp from the University of Texas for providing initial CSS assets and back-end code for this project.
Redux has been described to me as both a technology and a philosophy. The philosophy is to use a global state that tracks multiple state variables that need to be accessed in many different components across the entire application. The global state as well as methods of changing the global state (dispatch actions) are passed into the entire App component by wrapping it in a "Provider" component from the Redux package and passing in the global state as a property and variable named "store". Under the hood, this is using React's Context API and the ability to pass on props to children components.
The "store" is the global state that can be edited by a function called "reducer". The "reducer" function takes in the current state and the "action" variable which will run through a switch statement to determine how state is being updated and then returns the new version of the global state. The "action" variable that is passed in contains a "type" key and an optional "payload" key. The type key is read by the switch statement to determine how the state is updated and the payload key contains any data that needs to be included in the new version of state.
The action is passed into the reducer function using functions called "action calls". These action calls contain the "type" key that is normally the name of the action call function in snake case. Then, it can also contain an optional payload key which contains data that needs to be sent to the reducer function to update the state.
The entire store can be managed in one file, or it can be split up into "slices" where you define the action calls and reducer function for different "slices" or variables of the state. These slices are then recombined into the global state using the combineReducer function from redux.
The redux store can be accessed using the react-redux packages useSelector hook. This hook allows a component to access specific portions of the state that it needs. Additionally, the action calls / reducer function can be accessed by importing in the action call functions and passing them into the dispatch function provided by the useDispatch hook from react-redux.
https://intense-cliffs-26950.herokuapp.com/
Made by: AshisPatel
Github Profile: https://github.com/AshisPatel
Please feel free to email me about any questions, concerns, or comments that you have about this project!
Hello there! I hope that you're having a good day, afternoon, evening or odd late night hours! If you are not, then perhaps the fun fact and gif included at the end of this section can brighten your day. But first, a rant. Redux and Context are both neat tools to utilize! The concept of having a global state was incredibly useful for maneuvering around prop drilling. This is something that I shall try to take more advantage of. An observation is that all of these tools that help application management require a lot more forethought... looks like I'll be going back to drawing out flowcharts.
Fun Fact: Firefighters use wetting agents to make water wetter. The chemicals reduce the surface tension of plain water causing it to spread and soak easier. This water is referred to as "wet water". Thus rekindling a controversial topic of this decade, is water wet?
As this is the last repo I will be making for my bootcamp assignments, I thought I would include a gif similar to the one in my first assignment repo
