AMBacelar / your-orders

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Quick tecnical test

currently deployed to https://your-orders.herokuapp.com/

time limit of 3 hours starting only once I start writing code itself.

After a second read through I came to a descision on how I'll build the app.

  • started the project with create-react-app
  • routing and deep linking with react-router-dom
  • I decided to not use state at all, and manipulate everything through the redux store
  • the documentation requested one search box for multiple fields, so I implemented a javascript text-search engine elasticlunr
  • the documentation requested settings that persist throughout navigation, so I knew I was going to use redux from the beginning
  • since pagination was requested, I knew that it would be best to emulate a limit, offset system to accomodate that... although I didn't get to actually implement it, the functionality is already mocked.
  • For the sake of readablility I implemented react-bootstrap just so things are easier to manipulate and better displayed, due to time constraints, I made no attempt to desing any sort of UI.

I admittedly did spend too much time on the api side of things, siply to set up the hydration of the dataset, and no time at all on the details page, although deep linking is working, and the details page does display the order object.

Regretfully, I didn't manage to write any tests of my own. Had I had the time, I would write a few tests to ensure that the api is doing as it should. Fortunately, in the front end side, a lot of it is simple movement of data. If React bugs out on setting props/if Redux breaks in the documented implementation, then there are bigger issues than I can afford to fix.

My assumptions on the api is similar to the implementation that I set up, where the search actions would be axios calls, which is why I set the api end to return promises.

A small time sink came with the implementation of the search filters, I would normally use state for some of the features, and utilize the callback built into this.setState but in the end I changed how I set up the functions slightly and implemented redux-thunk which allows me to return a funtion that can call dispatch when I desire, allowing the utilisation in ./src/actions/search.js {onChangeFilters} where after dispatch I return a resolved promise, allowing me to use .then() as a callback (I am indeed aware of async await but the simple .then() served it's purpose well enough in this case, especially with the time constraints )

to update the dataset run node ./src/_mockApi/generateDataset.js

to run the app in a local environment run npm start

About


Languages

Language:JavaScript 92.3%Language:HTML 7.7%