Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alotab/react-ecommerce-stripe
A fully functional e-commerce web application built with React, Zustand, Firebase, and Stripe for payment processing.
https://github.com/alotab/react-ecommerce-stripe
ecomerce-project ecommerce ecommerce-website firebase firebase-auth javascript react react-components reactjs stripe stripe-payments tailwindcss zustand zustand-state-management
Last synced: about 17 hours ago
JSON representation
A fully functional e-commerce web application built with React, Zustand, Firebase, and Stripe for payment processing.
- Host: GitHub
- URL: https://github.com/alotab/react-ecommerce-stripe
- Owner: Alotab
- Created: 2024-12-03T01:17:06.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-01-11T19:01:29.000Z (24 days ago)
- Last Synced: 2025-01-11T20:17:59.106Z (24 days ago)
- Topics: ecomerce-project, ecommerce, ecommerce-website, firebase, firebase-auth, javascript, react, react-components, reactjs, stripe, stripe-payments, tailwindcss, zustand, zustand-state-management
- Language: TypeScript
- Homepage:
- Size: 5.83 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## React Ecommerce Project
A fully functional e-commerce web application built with React, Zustand, Firebase, and Stripe for payment processing. The app provides a seamless user experience with functionalities such as product management, cart features (add, remove, increase quantity), favorites management, and secure payment handling. It utilizes Firebase for authentication and real-time data storage, and TailwindCSS for responsive design.
## Installation
1. Clone the repository:
```
git clone https://github.com/Alotab/react-ecommerce-stripe.git
cd client
```
2. Install dependencies:
```
npm install
# or
yarn install
```
3. Create a .env file in the root directory of the project and add the required Firebase and Stripe credentials:
```
REACT_APP_FIREBASE_API_KEY=your-firebase-api-key
REACT_APP_FIREBASE_AUTH_DOMAIN=your-firebase-auth-domain
REACT_APP_FIREBASE_PROJECT_ID=your-firebase-project-id
REACT_APP_FIREBASE_STORAGE_BUCKET=your-firebase-storage-bucket
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your-firebase-messaging-sender-id
REACT_APP_FIREBASE_APP_ID=your-firebase-app-id
REACT_APP_STRIPE_PUBLIC_KEY=your-stripe-public-key
```
4. Run the development server:
```
npm start
# or
yarn start
```
5. Run the admin server:
```
cd admin
npm start
```
## Stripe Integration
Stripe is integrated into the app to handle secure payment processing.
### Steps to Set Up Stripe:
1. Go to the Stripe Dashboard and create a new Stripe account if you don't have one.
2. Obtain your Publishable Key and Secret Key from Stripe and add them to your .env file as:
```
REACT_APP_STRIPE_PUBLIC_KEY=your-stripe-public-key
```