A fictional online clothing store made with React (see Live Demo). Features include: user authentication, shopping cart, checkout, payments with Stripe & data persistence.
Frontend | Backend |
---|---|
|
|
- Redux Thunk
- Node Sass (now superseded by Dart Sass)
- 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
- Summary of cart at checkout, including:
- User login & register
- Data persistence for:
- cart items
- user session
- Lazily loaded routes via route-based code-splitting
- 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)
- 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
The repos listed below include earlier versions of the CRWN Clothing app, in which I explored GraphQL & Apollo.