react-redux-ecommerce
React Redux Store
A customizable, templated, React/Redux ecommerce site. Stand up a working ecommerce site from scratch in under an hour.
Easily manage orders using the React Redux Order Manager.
Check out a test demo at
https://redux.store (Cool domain right?)
Note: The App on this demo is in test mode, so no real transactions will be charged or processed. To view the flow of the app, use the card number 4242 4242 4242 4242
with any future expiration date and a valid zip code on checkout.
How to Use
Set Up
- Register for the Stripe API here. Take note of your public and secret keys for both the test and live environments, you’ll need them later.
- Register for the Easyship API here
-
OPTIONAL: Set up your custom domain with Google here (this will enable sending emails from
whatever@yourdomain.com
). -
Enable
Less Secure Apps
on the Gmail account you will be using (this is needed to run Nodemailer with Gmail) - Add the following environment variables:
STRIPE_TEST_PK= <YOUR STRIPE TEST PUBLIC KEY>
STRIPE_TEST_SK= <YOUR STRIPE TEST SECRET KEY>
STRIPE_LIVE_PK= <YOUR STRIPE LIVE PUBLIC KEY>
STRIPE_LIVE_SK= <YOUR STRIPE LIVE SECRET KEY>
STRIPE_MODE= <test|live>
EASYSHIP_TOKEN= <YOUR EASYSHIP API ACCESS TOKEN>
EMAIL_USER= <YOUR GMAIL EMAIL ACCOUNT>
EMAIL_PW= <YOUR GMAIL EMAIL PASSWORD>
ADMIN_KEY= <KEY TO AUTHENTICATE ADMIN FOR PROTECTED API CALLS>
NOTE: The ADMIN_KEY
variable can be whatever you’d like, although a long alpha numeric key is recommended.
-
Customize the
config.json
file at the root of the repository to your liking. - Grab a beer and make some money 🍻💵
Handling Inventory
Adding Inventory
To add inventory to your store, make a post request to the /api/inventory
api endpoint. View an example of the request body below:
This is an admin restricted route, so you must pass in the admin key you created as the Authorization
header.
{
"name": "Super Rad React Shirt",
"desc": "A cool, super rad React shirt with an ulta cool description.",
"image": "https://reactjs.org/static/react-50k-tshirt-dd4bfca3eacb85dc3c81fe91fb2e1c10-a6b71.jpg",
"price": "1995"
}
NOTE: Price is listed in units of $0.01, so 1995 = $19.95
Updating Inventory
To update inventory, make a put request to /api/inventory/:itemId
api endpoint. View an example of the request body below:
This is an admin restricted route, so you must pass in the admin key you created as the Authorization
header.
{
"price": "2599"
}
Viewing Inventory
To view inventory, make a get request to /api/inventory/
. View an example response below:
[
{
"_id": "5ddc2a2fa9fca700445aabc1",
"name": "Super Rad React Shirt",
"desc": "A cool, super rad React shirt with an ulta cool description.",
"image": "https://reactjs.org/static/react-50k-tshirt-dd4bfca3eacb85dc3c81fe91fb2e1c10-a6b71.jpg",
"price": "1995",
"__v": 0
},
{
"_id": "5ddc2a3ca9fca700445aabc2",
"name": "Even Cooler React Shirt",
"desc": "This is essentially the same shirt but even cooler with an even better description.",
"image": "https://reactjs.org/static/react-50k-tshirt-dd4bfca3eacb85dc3c81fe91fb2e1c10-a6b71.jpg",
"price": "2295",
"__v": 0
}
]
Emptying Inventory
To update inventory, make a delete request to /api/inventory/
api endpoint.
This is an admin restricted route, so you must pass in the admin key you created as the Authorization
header.
Handling Orders
Get All Orders
To view all orders, make a get request to /api/orders/status
. View an example response below:
This is an admin restricted route, so you must pass in the admin key you created as the Authorization
header.
[
{
"cart": [
{
"_id": "5ddc2a2fa9fca700445aabc1",
"price": "1995",
"name": "Super Rad React Shirt",
"qty": 1
}
],
"_id": "5ddc31fbf2e230004436ed95",
"confirmation": "SZFO4Y",
"orderStatus": "SHIPPED",
"time": "2019-11-25T19:56:42.293Z",
"customer": {
"email": "user@example.com",
"firstName": "Justin",
"lastName": "Kunz"
},
"total": {
"subtotal": 400,
"tax": 28,
"shippingCost": 318,
"total": 746
},
"address": {
"addressLine1": "123 Main Street",
"addressLine2": "",
"city": "Allen",
"state": "TX",
"zip": "75013"
},
"shipping": {
"timeframe": {
"days": {
"min_delivery_time": 3,
"max_delivery_time": 5
},
"dates": {
"min": "12/02/2019",
"max": "12/04/2019"
}
},
"total": 318,
"courier": "USPS - First Class",
"courier_id": "dfa5ba0d-4f91-4f6d-9622-8f1a22b23855"
},
"payment": {
"stripeToken": "tok_xxxxxxxxxxxxxxx",
"last4": "4242",
"cardIssuer": "Visa",
"cardCountry": "US",
"cardZip": "42424",
"outcome": {
"network_status": "approved_by_network",
"reason": null,
"risk_level": "normal",
"risk_score": 60,
"seller_message": "Payment complete.",
"type": "authorized",
"id": "ch_1FinfqG1Y9MP6uT15mIqT0qd"
}
},
"__v": 0
}
]
Update Order Status
To update an orders status, make a post request to /api/orders/status/:orderId
. View an example of the request body below:
This is an admin restricted route, so you must pass in the admin key you created as the Authorization
header.
{
"status": "SHIPPED"
}