https://github.com/th3wall/react-crwn-cothing-ecom
This project-based course introduced me to all of the modern toolchain of a React developer in 2021. I have built a massive e-commerce application built using React, Redux, React Hooks, React Suspense, React Router, GraphQL, Context API, Firebase, Redux-Saga, Stripe and a lot more technologies.
https://github.com/th3wall/react-crwn-cothing-ecom
firebase framer-motion graphql react react-hooks react-router redux saga snapshot-testing stripe-api
Last synced: about 2 months ago
JSON representation
This project-based course introduced me to all of the modern toolchain of a React developer in 2021. I have built a massive e-commerce application built using React, Redux, React Hooks, React Suspense, React Router, GraphQL, Context API, Firebase, Redux-Saga, Stripe and a lot more technologies.
- Host: GitHub
- URL: https://github.com/th3wall/react-crwn-cothing-ecom
- Owner: Th3Wall
- License: mit
- Created: 2021-01-12T01:05:38.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-07-26T21:14:57.000Z (almost 4 years ago)
- Last Synced: 2025-05-06T22:06:26.104Z (about 2 months ago)
- Topics: firebase, framer-motion, graphql, react, react-hooks, react-router, redux, saga, snapshot-testing, stripe-api
- Language: JavaScript
- Homepage: https://ecom-crwn-clothing.herokuapp.com/
- Size: 462 KB
- Stars: 15
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 👑 CRWN Clothing - An e-commerce built with React
## 🎯 About ##
I've [bought this course](https://academy.zerotomastery.io/p/complete-react-developer-redux-hooks-graphql-zero-to-mastery) in order to start from the very beginning by learning the basics of React and then going into advanced topics with the purpose of making good decisions on architecture and tools on any of my future ReactJS projects.
This project-based course introduced me to all of the modern toolchain of a React developer in 2021.
Along the way, I have built a full stack app (MERN stack): it's a massive e-commerce application built using React, Redux, React Hooks, React Suspense, React Router, GraphQL, Context API, Firebase, Redux-Saga, Stripe and a lot more technologies.
## ▶️ Demo
Here you can find the demo link:
- [Heroku](https://ecom-crwn-clothing.herokuapp.com/)
## :sparkles: Features ##
:heavy_check_mark: Use of React hooks and custom hooks
:heavy_check_mark: Use of React Context API
:heavy_check_mark: Use of React Router
:heavy_check_mark: Page transitions and animations (handled with Framer Motion)
:heavy_check_mark: Sign In & Sign Up features
:heavy_check_mark: Google login
:heavy_check_mark: User and cart persistence with Redux-Persist
:heavy_check_mark: Fake cart payment (handled with Stripe API)
:heavy_check_mark: Performance optimizations with React.memo
:heavy_check_mark: Snapshot testing with Enzyme
:heavy_check_mark: Responsive Web-App
## :rocket: Technologies ##
- [React](https://reactjs.org/)
- [React Hooks](https://reactjs.org/docs/hooks-intro.html)
- [React Router](https://reactrouter.com/)
- [Redux](https://redux.js.org/)
- [Redux Logger](https://github.com/LogRocket/redux-logger)
- [React Context API](https://reactjs.org/docs/context.html)
- [Redux Thunk - Asynchronous Redux](https://github.com/reduxjs/redux-thunk)
- [Redux Saga](https://redux-saga.js.org/)
- [Redux Persist - for session storage](https://github.com/rt2zz/redux-persist)
- [React Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html)
- [React Lazy](https://reactjs.org/docs/code-splitting.html#reactlazy)
- [Reselect](https://github.com/reduxjs/reselect)
- [Firebase](https://firebase.google.com/)
- [Stripe API](https://stripe.com/docs)
- [Jest & Snapshot Testing](https://jestjs.io/docs/en/snapshot-testing)
- [Enzyme](https://github.com/enzymejs/enzyme)
- [SASS](https://sass-lang.com/)
- [Styled-Components](https://styled-components.com/)
- [Framer Motion](https://www.framer.com/motion/)
- [GraphQL](https://graphql.org/)
- [Apollo](https://www.apollographql.com/)
- [Heroku - Responsible for the deploy](https://www.heroku.com/)
## :white_check_mark: Requirements ##
Before starting :checkered_flag:, you need to have [Git](https://git-scm.com) and [Node](https://nodejs.org/en/) installed.