Webpack:
- BeastieBooze's react components are bundled/compiled using webpack and babel.
- The configuration for webpack can be found at webpack.config.js while the babel presets are located at .babelrc.
- The command to run webpack is . This command must be run throughout dev to contiguously package any changes that will render on the client side.
React Components: Using React Router to render all views on client side through main App component. Eh.. We'll add more to this as we flesh it out
BoozeContext:
Client-Side Helper Functions: Client side helper functions are contained within the /client/utils folder:
- ParseIng: ParseIng is imported to the DrinkView component to enable matching ingredients to measurements in drink instructions
- useHover: useHover is a custom hook managing state of whether or not an element is hovered over. It is imported to the ImgWrapper to enable text overlay over thumbnail images in the feed view and tinting of thumbnails on mouseOver.
Google Oauth & react-google-login: Using Google's Oauth (Google+ API) and react-google-login for authorization.
- User visiting our website will login using their Google credentials. Google then informs the user that by signing in they are giving permission to pass their data back to us.
- Once logged in, Google redirects use back to our app alongside an authorization code.
- With this authorization code we can request their info from google.
- With that user info we can either save the user to our database, or render properly based upon the data they've previously saved.
Routes: Server Side Routes are contained within /server/routes folder:
- server routes are directed to /server/routes/index.js to export to router within /server/app.js
- feed.js holds feedRouter that handles routes for the Feed component i.e. loading main feed of drinks using cocktaildb Api
- drinkView.js holds drinkRouter that handles routes for drinkView component i.e. taking id param and serving correct cocktail