Code Monkey home page Code Monkey logo

code-assessment-web's Introduction

Work & Co Web Code Assessment

This is a copy of the Redux Shopping Cart Example.

To start a development server:

npm start

Tasks

Please publish your work to a fork of this repo. You're welcome (but not required) to add any libraries you think would be helpful.

Note: You're encouraged to show your work by including multiple commits - we'll be looking through your fork's git history.

  1. Implement Responsive Design
  2. Enhance Cart Functionality
  3. Hook Up Product API

Thoughts on the project

This was definitely an interesting challenge. I wanted to lean on react/redux as much as possible without the help of many outside libraries for this project. The only dependencies I've added to this project are axios and node-sass. I decided to approach this project by implementing the API request first, then working on the redux functionality, then styling. I did my best to adhere to ES6+ standards when manipulating the data in objects and functions, while making best use of array functions like map, filter, and reduce.

Challenges

The biggest challenge for me was building a more complex application on top of something that was already built. At times I wanted to tear down what was already built and start certain parts from scratch but I realized that wouldn't be best in the interest of time. If I were to approach this application again with unlimited time I would probably change the current

Since I didn't want to waste time I put all the css into one file. If I were to do this project from scratch, I would take more time to plan out the component structure and have the css mimic the structure of the javascript components.

Improvements

The mobile css on the cart page needs some work. I was running out of time and didn't have enough time to tweak it as much as needed. Cart.js could be cleaned up considerably and I would have liked to taken a shot at rebuilding the whole CartContainer, Cart, and CartItem file structure.

With more time it would be best to have both desktop and mobile optimized images that the system would interchange.

I also noticed that the data model of the dummy data was different than the API model. I'd probably like to take a look at the API model to access if that structure is best for this project.

code-assessment-web's People

Contributors

edwintoh-work avatar sarahatwork avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.