https://github.com/shardwiz/ecommerce-store-reactjs-stripe-oauth2

🛒 A fully functional Ecommerce web app built with React, React Router, OAuth2, and Stripe for payments. Users can log in, browse products, add items to the cart, and pay via credit card. Deployed on Netlify, with product images sourced from Unsplash.
https://github.com/shardwiz/ecommerce-store-reactjs-stripe-oauth2

context-api css-in-js css3 ecommerce-website html jsx lazy-loading localstorage netlify oauth2 react react-router shopping-cart stripe-payments suspense use-reducer

Last synced: 21 days ago
JSON representation

🛒 A fully functional Ecommerce web app built with React, React Router, OAuth2, and Stripe for payments. Users can log in, browse products, add items to the cart, and pay via credit card. Deployed on Netlify, with product images sourced from Unsplash.

• Host: GitHub
• URL: https://github.com/shardwiz/ecommerce-store-reactjs-stripe-oauth2
• Owner: shardwiz
• License: apache-2.0
• Created: 2025-03-21T03:59:13.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2025-04-06T21:18:06.000Z (22 days ago)
• Last Synced: 2025-04-06T22:23:40.544Z (22 days ago)
• Topics: context-api, css-in-js, css3, ecommerce-website, html, jsx, lazy-loading, localstorage, netlify, oauth2, react, react-router, shopping-cart, stripe-payments, suspense, use-reducer
• Language: JavaScript
• Homepage: https://competent-engelbart-3915c0.netlify.app
• Size: 15.2 MB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Ecommerce App

## Description

This is a fully functional Ecommerce Website which allows the user to login,add products to cart,view products in detail and do the payment through credit card.This website is built using React,React Router,OAuth2 for user authentication,Stripe for payment and Netlify for deployment.Images used in this website are being taken from [Unsplash website](https://unsplash.com).

Payment Card Details:

- Card Number: 4242 4242 4242 4242,

- Expiry: Any future Date,

- CVV: Any 3 digit number.

## Demo

👉 [Link](https://competent-engelbart-3915c0.netlify.app/)

## Screenshots

Homepage

![Capture](https://user-images.githubusercontent.com/4997491/116504126-47246500-a8d5-11eb-8852-b41d9b1a77e6.JPG)

Login Popup

![login](https://user-images.githubusercontent.com/4997491/116504932-2eb54a00-a8d7-11eb-8793-35e7fb4b91fb.JPG)

Products Page

![product](https://user-images.githubusercontent.com/4997491/116504383-c6199d80-a8d5-11eb-89aa-3c4874d009e1.JPG)

Product Details Page

![product_details](https://user-images.githubusercontent.com/4997491/179211094-01c52cc9-7a67-41a4-804a-7085a3946ffc.PNG)

Cart Page

![cart](https://user-images.githubusercontent.com/4997491/116504661-75567480-a8d6-11eb-9ed3-187502655349.JPG)

Stripe Payment Page

![payment](https://user-images.githubusercontent.com/4997491/116504802-d41bee00-a8d6-11eb-9913-6cc0e7f22302.JPG)

404 Error Page

![error](https://user-images.githubusercontent.com/4997491/116504553-2a3c6180-a8d6-11eb-8f13-11a1778afa93.JPG)

## Installation

Step 1

🍴 Fork this repo!

Step 2

👯 Clone this repo to your local machine using https://github.com/shardwiz/ecommerce-store-reactjs-stripe-oauth2.git

Step 3

HACK AWAY! 🔨🔨🔨

## Available Scripts

In the project directory, you can run:

`npm start`

Runs the app in the development mode.


Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

## License

Apache-2.0 License.

Made with ❤