When I received the assignment I was in doubt about either using Ember or React, and since I've been recently playing with Ember to check what has been released in the last iterations I decided to go with Ember first. After it's finished, port it to React should be possible in a few hours or so.
So for this mockup I started solely focusing on functionality and then later worked on the design, did some really awful choice of colors and then later ended up with this pallet — thanks Yves :)
This mockup is doing a request to the API sent to me on the email and using localStorage for the cart.
I started doing a list of products but then I read the email again and noticed it was asking for a "grid" of products, so I reworked the design to better fit that description. Since the API doesn't provide a name for the products, I'm just truncating the description with the first words fitting 25 characters and using it as name, I hope this isn't a problem.
At first I thought of doing a separated page for the cart, but soon realized a snippet approach would be more user friendly.
Apart from the requirements asked on the assignment, this mockup also implements a few more features:
- it's possible to alter the quantity of any given item in the cart, up to the limit in the stock
- delete button to remove items from the cart
- total sum of prices*quantities
- not allowing user to add item to cart if item is out of stock
- use fastboot to do server side rendering (universal app)
- implement sorting
- implement simple front-end product search
You will need the following things properly installed on your computer.
npm install ember-cli -gif you haven't alreadygit clone [email protected]:Ghostavio/ember-cart.gitthis repositorycd ember-cartnpm installbower install
ember serverto tun simple development serverember fastboot --serve-assetsto run fastboot server (server-side rendering)- Visit your app at http://localhost:4200 (or http://localhost:3000 if you choose to run the fastboot server).
ember build(development)ember build --environment production(production)
I'm deploying it to Heroku. It's extremely simple.
Of course you need a Heroku account and toolbelt, then just follow the next steps from within your application folder:
heroku create <OPTIONAL_APP_NAME> --buildpack https://codon-buildpacks.s3.amazonaws.com/buildpacks/heroku/emberjs.tgz
And now just deploy using:
git push heroku master
You can see it live at http://ember-cart.herokuapp.com :)