skawaguchi/full-stack-masterclass-challenge

full-stack-masterclass-challenge's Issues

Application Design

Development Notes

The client was developed using full-on TDD with coverage jacked up to 100% across the board. The server... was not. I probably made my life more difficult, but as part of this exercise I wanted to learn how to TDD MobX.

The logos were taken from the Beau's site. The spilled beer images is from a royalty-free site.

I chose MobX because I wanted to learn it (used to Redux). I have to still find a better pattern for stores. It's probably factory methods.

I followed a loose UX process by drafting personas and wireframing the app before building it. I changed some functionality on the fly.

I wanted to try out Luxon, so I added the store hours.

I actually hadn't used Axios before (used to isomorphic fetch) so I used that.

I used chance.js to introduce fuzzing to my tests where I felt it was useful.

This was developed in a sub-folder because of sheer laziness. I didn't want to set up two npm repositories, and didn't want to fight with create-react-app to get a single package.json working.

The app was built on an ejected version of create-react-app, so if you're familiar with it you should know your way around the React app in ./src/client.

Node 8+ was chosen because I wanted to work with the latest Hapi server as a refresher.

App Server

• I'll use a simple Hapi server with inert
• Publish using the create-react-app scripts to move files over to server

Calls to LCBO API

• We can get products filtered by Beau's and to make sure they're seasonal like so:

  /products?q=beau's&where_not=is_dead&where=is_seasonal
  

  • is_dead is to make sure it's active
  • We can just dump this in our store
  • We don't need to call for product details, we'll get them all with the above call
• We can get the nearest stores like so:

  /stores?product_id=id
  

  • We'll need to use these attributes:

Calls to FreeGeoIP.net

• We can do a quick and dirty pre-population of the postal code field on the Beer Finder view from here: https://freegeoip.net

GET https://freegeoip.net/json/

• We would use the zip_code attribute from the result.

State

• ProductList Store
• We'll build out UI state models for the things we need
  • ProductListItem State
    • An array of ProductStoreItems
  • ProductListItem State
    • id
    • name
    • imageThumbUrl
• ProductDetails State
  • id
  • name
  • description (looks like this is null`
  • imageUrl
  • varietal
  • style
  • productNumber - this is deprecated
  • price
• ProductStoreList State
  • An array of ProductStoreItems
  • ProductStoreItem State
    • id
    • distance_in_meters
    • storeNumber - this is deprecated
    • name
    • addressLine1
    • addressLine2
    • city
    • postalCode
    • telephone
    • quantity
    • sunday_open
    • sunday_close
    • monday_open
    • monday_close
    • tuesday_open
    • tuesday_close
    • wednesday_open
    • wednesday_close
    • thursday_open
    • thursday_close
    • friday_open
    • friday_close
    • saturday_open
    • saturday_close

Hours of Operation

• Consider Moment.js - look at alt library that was easier to test and less heavy.
  • Will probably use date-fns. Tried it, didn't like it.
  • used Luxon which looks like a next-gen version of moment
• These are in hours since midnight

Google Maps Directions

• For directions links, use the Google Maps API:

  https://www.google.com/maps/dir/Current+Location/<address, city, postal code>
  
  example:  https://www.google.com/maps/dir/Current+Location/760+West+Genesee+Street+Syracuse+NY+
  13204
  

UI

• <AppProvider/> - for BrowserRouter

  • <App/> - route definitions + Loader
    • <AppHeader/>
      = <MainNav/>
    • Various Views also get put here by React Router

• <Home/> - Seasonal Beverages view

• <LoadingIndicator/>

• <AppIntlProvider/> - use this to inject ReactIntl onto the component chain

  • Consider using ReactIntl for showing numbers, currency, and days / time. Probably should.

• <BeerFinderIcon/>

• <ErrorPage/>

• <ErrorPageMessage/> -

Font Awesome Icons

• fa-map-marker - for the Beer Finder icon
• fa-address-card or fa-address-card-o for the store location stuff
• fa-beer for the product list items
• clock for the hours
• arrow-left for the Back to Details view

Loading Icon

• Ended up using this service to build my own loading icon: https://loading.io/animation/icon/

Resources

• Royalty free error image: https://pngtree.com/freepng/liquid-spilled-beer_608730.html

Spicy Icons

• wheelchair
• car
• bus
• parking

Add Points of Interest

• I remembered seeing this awhile back and thought a similar effect would be interesting.

Mixed Blend Mode

• I tinkered with the idea of using mixed-blend-mode: multiple to clear the pesky background white of the product images. But IE looks like it's holding this one back. I'll think on this and decide later.

Notes to Self

• When moving around files, NYC or Jest lost track of the files and coverage for them returned as zero. The simple fix was to clear the Jest cache. This SO post helped. I just found the cacheDirectory and rm -rfed it. I think that the --clearCache solution in the other answer in that post didn't work.

Challenge Outline

Company Values / Profile

• Beau's Website
• Award-winning
• Family-run / Independent
• Local
• Organic / Use Spring Water / Best Ingredients

Features

• EPIC: As a user I can see all of the Beau's beers available through the LCBO
  • As a user I will only see seasonal beverages made by Beau's
  • As a user I will not see non-season beverages such as Lug Tread
• EPIC: As a user I can see the details of a specific, available beer
  • As a user I will see the description of a specific, available beer
  • As a user I will see an image of a specific, available beer
  • As a user I will see a list of the available stores of a specific, available beer
  • BONUS: As a user I can get directions to a store carrying a specific, available beer
  • BONUS: As a user I can see the list of stores in order of distance from a postal code I enter

Style Guide

Brand Colors

Names are from Sip.

#542B1D - India Tan 
#F7DEC0 - Sazerac
#A4BABB - Tower Grey
#C79F7A - Rodeo Dust

Fonts

Header Font - abril fatface
Body Font - open sans

<style>
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Open+Sans:400,400i,700,700i');
</style>

font-family: 'Abril Fatface', cursive;
font-family: 'Open Sans', sans-serif;

Challenge To Dos

• Set up basic SPA
  • React (create-react-app)
  • React Router
  • ESLint
  • Stylelint
• Code Design
• Set up app
  • MobX / Redux?
  • Eject create-create-app
  • Set up repo calls and make sure they work
  • Build and populate the store
• Build out UI
  • Hook up product list store to product list view
  • Make main nav show selected
  • Add breadcrumbs to show which product you've selected and to go back
  • Show product details
  • Add icons to spice it up
  • Add loading indicator for product list call
  • Add collapsible section to show stores with the content
  • Add store details
  • Add link to get Google Maps directions to a store
  • Get rid of header link
  • Styling
  • Add error page with beer spilling graphic
  • Extract input controls to its own component
  • Extract no stores message to its own component
  • Extract back message to its own component
  • Add the toggle to the beer finder to hide information
  • Check mobile display
  • Get the app to show up offline
  • Add a loader for the Beer Finder view
  • When you refresh on the Beer Finder or Product Details views, the app breaks
• Create Hapi server to display this
• Update the README with instructions on how to run this locally
• Get Jean to help make the Beau's logo white
• This might be a good place to try out cypress
• Last round of testing

References

When this list is completed, resolves #1.