An example eCommerce site with improved Cart controls, Add to Product controls, and Out of Stock display logic including a countdown to future Restock events (fetchable by API).
I used a Gatsby React + Moltin demo as a base framework, and improved from there:
- upgrading the cart controls to be less clunky (old one would just reload the whole component on each change - no way that stands)
- adding Out-of-Stock logic which displays a mocked Restock Events API displaying when to expect new stock (complete with a countdown timer, and live updates to stock as you put it in your cart).
- adding some basic snapshot testing coverage of the whole App tree
- adding basic SASS compatibility
- making assorted small tweaks to look and feel to smooth out the experience
It runs an example Moltin store, fetching live API data and reading it through a redux handler (which I feel I've messed with enough to take some credit for the complexity by now), before displaying it on mostly-responsive and stateful components. It's been intentionally limited in scope to best demonstrate an assigned coding challenge, sporting three main uris to show what it needs to:
- /products,
- /product/:id
- /cart
As far as code quality goes - much of what I've done has been striking a balance between my personal style, the underlying demo's style, and my limited time, so I can't say this is a perfect representation of my ideal structure/style, but I don't disapprove either - at least of the files I touched on heavily (SingleProduct, CartItems, etc - see git). The rest I say live and let live... and haven't dramatically cleaned up inefficiencies or poor style (except components which favored var
over let
- those I had to erradicate en-masse). My ideal structure will have to wait for a project with big enough scope to warrant a complete framework, but I look forward to the day.
git clone https://github.com/dogcomplex/react-demo-store.git
cd react-demo-store
yarn # or npm install
yarn start # or npm start
Note: You will want to change the client_id
inside src/moltin.js
with your own moltin store credentials.
This demo store uses the Redux "ducks" approach to bundling reducers and actions.
- Download and install docker
- Make sure docker is running locally
- Run
docker build -t lamp .
at command line - Run the docker image with the command
docker run -p 5000 IMAGE_ID
whereIMAGE_ID
is the image ID shown in the result of step 3. - Access your app on port 5000
An example store built using React, Redux and moltin. This project was bootstrapped with Create React App.