Skip to content

A clothing e-commerce React app template that allows users to sign-up, add items to a cart, and process card payments with Stripe

Notifications You must be signed in to change notification settings

Hekmundo/crown-clothing

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

90 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Crown Clothing

A clothing e-commerce React app with features including: user sign-in and sign-up, user sessions, an interactive shopping basket, and card payment processing with Stripe API. While most of the codebase is client-side, I implemented a Node.js server to serve static files and to process card payments securely with hidden API keys.


Screenshot


This project uses the following front-end packages and libraries:

  • React.js (UI library allowing the creation of resusable components while providing fast DOM manipulation)
  • Redux (state manager that holds all state in a centralised store)
  • Redux-Saga (to handle asynchronous actions and side effects)
  • Reselect (to create memoized state selectors)
  • React Router DOM (to simplify page routing and page redirects)
  • Firebase (to provide OAuth user authentication and to store and query user/shop data from a NoSQL database)
  • Axios (to create simple HTTP requests to the back-end)
  • React Stripe Checkout (fast solution for creating Stripe payment portal)
  • Redux Persist (to store users cart items between sessions)
  • Styled Components (to separate the concern of CSS styles into their own module for each component while avoiding global class name collisions)
  • lodash.memoize (used to memoize higher-order state selector functions)

This project uses the following back-end packages, libraries, and technologies:

  • Node.js (JavaScript runtime)
  • Express (back-end web framework making it easier to handle HTTP requests)
  • dotenv (to hide environment variables and secret keys)
  • compression (to reduce the size of files sent to the client and therefore improve load times)
  • stripe (to authorize card payments with a secret Stripe key)

About

A clothing e-commerce React app template that allows users to sign-up, add items to a cart, and process card payments with Stripe

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published