full-stack-masterclass-challenge's Issues
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
- MobX
- 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.
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
- ProductListItem State
- ProductDetails State
id
name
description
(looks like this is null`imageUrl
varietal
style
- this is deprecatedproductNumber
price
- ProductStoreList State
- An array of ProductStoreItems
- ProductStoreItem State
id
distance_in_meters
- this is deprecatedstoreNumber
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.
- 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.
- Consider using
-
<BeerFinderIcon/>
-
<ErrorPage/>
-
<ErrorPageMessage/>
-
Font Awesome Icons
fa-map-marker
- for the Beer Finder iconfa-address-card
orfa-address-card-o
for the store location stufffa-beer
for the product list itemsclock
for the hoursarrow-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
andrm -rf
ed it. I think that the--clearCache
solution in the other answer in that post didn't work.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.