/crwn-clothing

E-commerce website build on ReactJS and TypeScript

Primary LanguageTypeScript

CRWN Clothing

An on going ecommerce project from the Complete React Developer in 2020 course

⚒ This is a fully functional ecommerce Web Application including authentication and payment. The goal of this project is to learn and practice technologies in the React ecosystem

style: styled-components

See it live: https://jwl-clothing.herokuapp.com/

🏗 Build using:

  • TypeScript
  • React - a popular user interface JavaScript library
  • Redux - centralize and manage the state of JavaScript apps
  • React Router - helps to navigate through React components
  • reselect - a "selector" library for Redux, to avoid recalculations of states by using memoized selectors
  • redux persist - manage to persist redux store in storage
  • react-stripe-checkout - a React component the wraps Stripe checkout JavaScript for a better React integration
  • styled-components - CSS in JS concept, allow developers style their components by using JavaScript
  • redux-thunk - Redux Thunk middleware allows you to write action creators that return a function instead of an action
  • redux-saga - a library that aims to make application side effects(i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easiter to manage
  • React Hooks - Enable function component to use state and other React features
  • React.lazy - split React component into different chunks, then lazy load them
  • React.memo - If your function component renders the same result given the same props, you can wrap it in a call to React.memo for a performance boost in some cases by memoizing the result

💈 Third Party Services

  • firebase - thirdparty service provider for authentication and datastorage
  • Stripe - online payment service platform

🖥 Backend

  • NodeJS - Server side JavaScript
  • express - Web framework for Node.js

☁ Hosted on Heroku

Quick Start

Clone the repo using Git:

git clone https://github.com/jwlbjtu/crwn-clothing.git

Install the dependencies and start the app:

npm install && npm start

Code on! ⌨

📜 TODO

  • Add TravisCI to build the project
  • Try out Docker and K8s on this project
  • Automate the deploy steps