README.md

Shine Ecommerce for Earrings

React Responsive, Fullstack, Shine Ecommerce App. We will be using React, Material UI, Stripe, Formik, Yup, Strapi, and Redux Toolkit to build this entire application. This application will allow you to add products into a cart, have a form to fill out information and make payments through Stripe with a backend supported by Strapi.
Explore the site »

View Demo · Report Bug · Request Feature

🌟 About the Project

My desire is to nurture your true identity. My heart is to constantly remind you who you are. Whether you follow & wholeheartedly believe in Jesus Christ, is your decision to pursue. Regardless, I want you to know that you are valued and loved more than words could ever say. Your life on this earth is a miracle and the breath in your lungs was purposefully designed for such a time as this. My hope is to remind you of the infinite value you hold within & the beautiful light that shines every time you genuinely smile. My will is to cry out to God on your behalf so the love that transcends understanding overwhelms your heart. Whether you believe it or not, God loves you & He is not afraid of your doubts. May you be courageous enough to ask the right questions and seek the right answers. For those who seek will find and, those who knock, the door will be open (Matthew 7:7).

Project Technological Stack:

• React: Frontend library for building the user interface.
• Material UI: UI framework for consistent and appealing design.
• Stripe: Payment gateway integration for secure transactions.
• Formik: Form library to manage form inputs and validation.
• Yup: Schema validation for form validation in React.
• Strapi: Headless CMS used for the backend.
• Redux Toolkit: State management library for predictable state updates.

Features:

•  User Authentication: Secure user authentication and account creation.
  

•  Product Management: Capability to manage inventory by adding, editing, and removing products.
  

•  User Cart: Functionality allowing users to add selected products to a shopping cart.
  

•  Checkout Process: Smooth flow ensuring a hassle-free checkout experience.
  

•  Payment Gateway: Integration with Stripe for secure and reliable payment processing.
  

•  Responsive Design: Ensuring accessibility and functionality across various devices.
  

•  CMS Integration: Utilizing Strapi backend for efficient content management and data handling.
  

•  State Management: Employing Redux Toolkit for predictable state handling.
  

•  UI Consistency: Material UI implementation for visually appealing and consistent design.
  

Getting Started

Prerequisites

**Note**: This app requires API key from Strapi Account and Stripe Account

1. Download Node.js and npm (follow instructions here)

2. Git clone and cd into the repo folder:

https://github.com/Carlosaj18/Fullstack-React-Ecommerce-App.git && cd ecommerce-clone

3. Install all dependencies

npm install

4. In root directory of the server, create a .env file

.env

5. In the .env file, create following environment variables:

PORT=1337
APP_KEYS=YOUR_APP_KEY
API_TOKEN_SALT=YOUR_API_TOKEN_SALT
ADMIN_JWT_SECRET=YOUR_ADMIN_JWT_SECRET
JWT_SECRET=YOUR_JWT_SECRET
STRIPE_SECRET_KEY=YOUR_STRIPE_SECRET

6. Install stripe

npm i stripe

7. Run the server

npm start
#for deployed version

npm run dev
#for deployed version

8. Run the client

npm start
#for deployed version

npm run dev
#for deployed version

9. Access the server in your browser at http://localhost:1337/admin

10. Access the project in your browser at http://localhost:3000

(back to top)

Ecommerce.mp4

Live Site

• Ecommerce App is a responsive web app can be viewed on any device.

Contact