An online e-commerce boilerplate store based on the JAM stack. The SPA app provides all the functionality necessary for a merchant to display their merchandise to customers, build a customer database, and collect a payment within hours.
Visit the live demo store at https://naturl.netlify.app/ We recommend signing in for a full experience. Guest credentials found below:
Guest credentials: guest@guest.com 123456
- Home
- Products
- Product Filters
- Gluten Free
- Individual Product
- Checkout
- Recommendations
- Payment
- Ticket
- Wishlist
- To run the project you will need Git, Node, and npm installed.
- Create a Stripe Account as you will need your own set of keys.
- Create a Firebase Account as you will need your own set of keys.
- Clone the repository.
- Run
npm installin the client root folder. - Create an .env file in your client root folder (instructions below).
- Run
npm startin your client root folder.
Create a .env file in the client folder with the following variables:
SKIP_PREFLIGHT_CHECK=true REACT_APP_FIREBASE_KEY=YOUR_FIREBASE_KEY REACT_APP_FIREBASE_DOMAIN=YOUR_FIREBASE_DOMAIN REACT_APP_FIREBASE_DATABASE=YOUR_FIREBASE_DATABASE REACT_APP_FIREBASE_PROJECT_ID=YOUR_FIREBASE_PROJECT_ID REACT_APP_FIREBASE_STORAGE_BUCKET=YOUR_FIREBASE_STORAGE_BUCKET REACT_APP_FIREBASE_SENDER_ID=YOUR_FIREBASE_SENDER_ID REACT_APP_STRIPE_CHECKOUT_PK=YOUR_STRIPE_PK REACT_APP_STRIPE_CHECKOUT_SK=YOUR_STRIPE_SK REACT_APP_DOMAIN=YOUR_APP_DOMAIN
For local development, REACT_APP_DOMAIN would be http://localhost:3000 (replace port 3000 if using a different port).
-
React - Front end library for building user interfaces.
-
Reach Router - Next-generation Routing for React.
-
Stripe API - An API service that allows users to accept payments online.
-
Firebase - A web application development platform used for realtime database and authentication.
-
Sass - A powerful CSS extension language.
-
Ant D - A design system for enterprise-level products.