- Some of the questions I'd ask to the Product Owner might be:
- Should the basket allow multisessions? If yes, when a user has different sessions open on different devices, should the baskets in all the other devices update automatically if one of the others gets updated?
- What's the medium persistence of an item into the basket? Should we allow the users to use it as a sort of whishlist letting them to leave the items in there for an indefinite ammount of time, or after a certain ammount of time it'll be emptied?
- How should we handle an item that went out of stock after a user added it to the basket? Will we check it when the user starts the checkout, or should we notify the users directly into the basket page? Should we limit the maximum quantity of a product in the basket based on the stock availability?
- Will the basket be only a separate page, or should we allow the user to have acces to a maybe simplified version of the basket inside of every page of the site?
- What metrics should we track?
-
One thing that I'd have implemented is the persistence of the basket. Being my code all front-end, I'd have saved the session in the localStorage of the browser. Probably I'd have used an npm module like
vuex-persist
which integrates withvuex
(official implementation of redux for vue) and helps to easily save state changes. On top of that it can be also associated with remote APIs, so we could save the basket seamlessly also in the backend. Another improvement would be to add some style to the pages. -
First and probably most stricking decision I made was to use Vue.js. I know you are working with React in MOO, but most of the concepts behind the two libraries are shared, so I think it would not be a big deal. Considering that my main expertise is in AngularJS, I wanted to get out of my comfort zone and try something different also for my personal interest. Based on the fact that it is easier to find a job in React than Vue, I decided to go for it, so not for a particular technical reason, although I think Vue might be slightly easier to be picked up from scratch. Based on the library choice I went for a Single Page Application with
vuex
as the store manager. This helps me manage easily the entire state of the app without having to use add hoc services and gives me a unique source of truth and a shared way of accessing the data structure. On a more architectural level I split thevuex
implementation in two separate modules in order. This decision was taken because other than be semantically not connected, this separation allows me to keep the code organised. On the organisation of the app I went for a basket on a different page from the product page. This decision was taken so I could deal a little bit with routing, but I could easily move the component into the product page without having to modify the functionality. So it was not a particularly bounding decision. I also decided to let the users alter the quantity of the products added to the basket only through the basket page, because I think that delaying this type of decision might help the buying process delaying some trivial decisions. -
I gained confidence testing multiple times the implementation and asking for a code review of my code. This is my first Vue.js app, so I am aware that some parts might have been done better, I focused instead in delivering a working app that satisfied the requests and that had a plausible organisation of the code.