👑 CRWN Clothing  |  An E-Commerce React App ⚛

Overview

A fictional online clothing store made with React (see Live Demo). Features include: user authentication, shopping cart, checkout, payments with Stripe & data persistence.

Technologies Used

Included in Final Project

Frontend	Backend
React; plus Hooks, React Router Dom Redux; plus middleware, Redux Saga, Reselect Styled Components for CSS-in-JS Axios for request to Stripe API implementation	Firebase - User Authentication & Data Storage in Real-time Database (Firestore) Stripe API Node.js & Express plus middleware - for Stripe API implementation

Excluded From / Replaced In Final Project

• Redux Thunk
• Node Sass (now superseded by Dart Sass)

List of Features

• Completely custom & responsive design with mobile-first approach
• Browse shop items by category (with previews of each category)
• Shop data is loaded from real-time Firestore database
• Shopping cart - functionalities:
  • Add item to cart
  • Increase quantity of existing item in cart
  • Remove item from cart
• Checkout - functionalities:
  • Summary of cart at checkout, including:
    • calculated sub-total per item
    • calculated total of all items
  • Add / remove items at checkout
  • Payments with Stripe
• User login & register
• Data persistence for:
  • cart items
  • user session
• Lazily loaded routes via route-based code-splitting

Concepts Explored | What I Learned

Frontend - How to:

• create reusable & composable components that implement React Hooks
• implement custom, responsive CSS with Styled Components and the mobile-first design approach
• optimise component load-times via Route-based Code Splitting; using React Router Dom, React Suspense & Lazy (with dynamic imports)
• measure performance at the component-level using React Devtools’ Profiler tab
• reduce number of unnecessary renders with React.memo, useMemo & useCallback hooks
• use Redux to maintain a single data store
• memoize Redux selectors, so that they don't have to repeatedly compute unchanged derived data; via the Reselect package
• make requests to backend Node API (built for Stripe Payments)

Backend - How to:

• store & retrieve data in a NoSQL database; using Firebase's real-time Firestore database
• implement user authentication with Firebase SDK
• build a simple Node.js & Express API (which utilises environment variables & middleware) to handle Stripe Payments
• host an app on the Heroku platform

Links To Related Repos

The repos listed below include earlier versions of the CRWN Clothing app, in which I explored GraphQL & Apollo.

• Migration From Redux to Apollo Client v2
• Migration From Apollo Client 2 to Apollo Client 3