/crwn-clothing-v2

E-commerce app created using React, Redux, TypeScript and the Stripe API.

Primary LanguageTypeScript

👑CrwnClothing👚 | Full Stack eCommerce React app

Frontend Technologies  |   Getting Started

Backend Technologies  |   How To Contribute

Live Demo  |   Original Course

👨🏽‍💻 About the project

This is a Full Stack E-commerce application similar to Shopify using TypeScript, React, Redux, React Router, Context API, Firebase, Stripe + more.

  • TypeScript

  • React

  • React Router

  • Redux

  • Redux Saga

  • Asynchronous Redux

  • React Hooks

  • Context API

  • React Suspense + React Lazy

  • Firebase

  • Stripe API

  • Styled-Components

🚀 Frontend Technologies

Project Screenshots

Technologies that I used to develop this frontend app

💻 Getting started

Requirements

Clone the project and access the folder

$ git clone https://github.com/ajfm88/crwn-clothing-v2.git

$ cd crwn-clothing-v2

Follow the steps below

# Install the dependencies
$ yarn

# Run the web app
$ yarn dev

🖥️ Backend Technologies

Technologies that I used to develop this backend app

Requirements

🔐 Set your firebase config

Remember to replace the config variable in your firebase.utils.js with your own config object from the firebase dashboard! Navigate to the project settings and scroll down to the config code. Copy the object in the code and replace the variable in your cloned code.

enter image description here

🔑 Set your stripe publishable key

Set the publishableKey variable in the stripe-button.component.jsx with your own publishable key from the stripe dashboard.

enter image description here

🤔 How to contribute

Follow the steps below

# Clone your fork
$ git clone https://github.com/ajfm88/crwn-clothing-v2.git

$ cd crwn-clothing-v2

# Create a branch with your feature
$ git checkout -b your-feature

# Make the commit with your changes
$ git commit -m 'feat: Your new feature'

# Send the code to your remote branch
$ git push origin your-feature

After your pull request is merged, you can delete your branch.

👨‍🏫 Original Course