Clone down this repository. You will need
npm installed globally on your machine.
npm install or
yarn in project root directory and client folder to build all dependencies.
firebaseConfig variable in
client/src/utils/firebase.utils.js with your own config object from the firebase dashboard. Learn more.
publishableKey variable in the
client/src/components/stripe/StripeCheckoutButton with your own publishable key from the stripe dashboard. Learn More.
In the project root directory, create a
.env file, type
secret_key with your own Stripe secret key. Learn More.
npm dev or
yarn dev in project root directory.
To Visit App:
React : Library for building UI.
Redux : Library for managing application state.
axios : Promise based HTTP client for the browser and node.js.
Sign-up / Sign-in using email or google account.
Browse items by category.
Add items to cart.
Show cart content information (quantity of each article, total price...)
Checkout items using Stripe with a given test credit card information to use.
This is a 3 week long project following a course built in order to learn React's advanced features and familiarizing myself with React ecosystem. I was planning to add many more features I had in mind, but I wasn't able to do so due to time constraints. I chose to use the
create-react-app boilerplate to minimize initial setup and invest more time in diving into weird technological rabbit holes.
Source Code: https://github.com/hsusanoo/cloth-app
Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.
Redux is a light weighted State Management Tool that helps the components in our React App to communicate with each other. The simple concept behind this is that every state of the component is kept in a store that will be global. So that every component can access any state from that store.
As one starts building his application in ReactJS, one needs to keep an eye on the complexity of application state management. As the application state tree grows with more nodes, the complexity to manage them also increases widely. So, we need a state management utility to manage our states effectively. Here will be using Redux, a library coupled with our ReactJS application for state management.
Build Shopping Cart Using React, Redux, React Router, React Reveal and React Modal.
React Native Redux Example Tutorial From Scratch. We connect the React Native app to Redux store to save and retrieve the application data.