Barrel-Aged

Jenkins Pipeline

P3 Challenge

Table of Contents

• Project Description
  • Project Team
  • Project Inspiration
  • Project Permissions
• Design
  • Sitemap
  • Wireframes
    • Desktop
    • Mobile
  • Branding
• Development
  • Functional Goals
    • MVP
    • Post-MVP
  • Functional Heirarchy
    • Repo Structure
    • Database Table Structure
    • React Structure
  • Functional Components
    • Component Breakdown
    • Component Timeframes
    • Helper Functions
  • Supporting Libraries
• Project Review
  • Code Showcase
  • Bugs, Issues, and Resolutions
• Project Followup

Overview

Project Description

Barrel-Aged is a social forum and review website for whiskey lovers. Through a modern and attractive user interface, convenient browsing and review functionality, and a well-designed database of whiskeys, Barrel-Aged will enable whiskey consumers to discuss, rate, and find their next favorite bottle.

Project Team

Created, designed, and developed by Brian Weitz, Misha Kessler, Naz Babu, & Sean Blanchfield (Git Czar) for the GA Software Engineering Immersive (May '19 Cohort) Unit 3 Project.

Team values, communication preferences, and other group expectations can be found on the Barrel-Aged google doc.

Project Inspiration

Barrel-Aged is modeled with functional inspiration from Distiller, GoodReads, Connosr, and Untappd; design and branding inspiration from Flaviar and Touch of Modern.

Project Permissions

Digital assets used with full licensing and permission from Death to Stock Photo, Freepik, and Unsplash. Custom digital design and branding by Misha Kessler.

Digital assets stored locally and on Imgur at Barrel-Aged Assets Library.

Design

ERD Model

ERD Model from Sean's Draw.io.

Sitemap

V2

Sitemap V2

Sitemap from Naz's GlooMap.

Wireframes

Desktop

Mobile

Wireframes from Brian's DocDroid.

Branding

Logo & Wordmarks

Logomark

Wordmark Light

Wordmark Dark

Bottle Label Mockup

Print Label

Bottle Mockup

Development

Functional Goals

MVP

• User Authentication & Password Hashing
• Sequelize Resource Tables
  • Users (first_name, username, email, password, location, fav_whiskey)
    • FK: User hasMany Reviews, User hasMany Whiskeys
  • Whiskeys (name, brand, type, description, url_to_image)
    • FK: Whiskey hasMany Reviews
  • Reviews (rating, comment)
    • FK: Review belongsTo Users, Review belongsTo Whiskeys
• CRUD Functionality on All Resources via Axios
• Core React Components
  • Pages
    • Age Gate
    • Landing (Hero, Overview, Login, Register)
    • Homepage (Index)(View All Whiskies, Whiskies By Type)
    • User (Show)
    • Whiskey (Show)
  • Modules
    • Login Form
    • Register Form

Post-MVP

• Pagination on Whiskeys, Advanced Sorting & Filtering
• Additional "Favorite" functionality, db table, and corresponding components for viewing and reordering favorite whiskeys from user dashboard.
• "Like" functionality on reviews, plus sorting reviews by popularity.
• Third party whiskey API to build out our database, enable "Add new whiskey for review." by user, with autofill.

Functional Heirarchy

Files and directories that are key to our production (and thus, have been- or will be- edited) are listed here in tree form here. Subdirectories should appear first, followed by filenames.

Repo Structure

barrel-aged

|___ client
      (Refer to React Structure below.)
      
|___ routes
      |___ userRouter.js
      |___ whiskeyRouter.js

|___ auth.js
|___ models.js
|___ resetDb.js
|___ scratch.js
|___ seed.js
|___ server.js

|___ readme.md

Express Database Structure

barrelaged_db

|___ reviews 
|___ users
|___ whiskeys

React Structure

client

|___ public
      |___ favicon.ico
      |___ index.html

|___ src
      |___ assets
            |___ images
            |___ graphics
            
      |___ components
            |___ Header.jsx
            |___ LoginForm.jsx
            |___ RegisterForm.jsx
            |___ ReviewForm.jsx
            |___ Footer.jsx

      |___ pages
            |___ AgeGate.jsx
            |___ Landing.jsx
            |___ Home.jsx
            |___ User.jsx
            |___ Whiskey.jsx

      |___ services
            |___ api-helper.js

      |___ App.css
      |___ App.js
      |___ index.css
      |___ index.js
      |___ logo.svg

|___ readme.md

Functional Components

Component Breakdown

Components (and a description with a stateful or stateless tag) go here.

Component	State	Description
Lorem ipsum	Stateless	Lorem ipsum dolor sit amet, consecteteur adupiscing elit, sed do eiusmod tempor incididunt ut labore...

Component Timeframes

Time expectation (padded with an extra hour, minimum, to play it safe) go here.

Component	Priority	Estimated Time	Actual Time
Lorem ipsum	High	x hrs	y hrs

Helper Functions

Generic helper functions go here.

Function	Description
Lorem	ipsum dolor sit amet

Supporting Libraries

Packages installed via node go here.

• Server-Side

  • body-parser
  • cors
  • express
  • morgan
  • nodemon
  • pg
  • sequelize

• Authentication

  • bcrypt
  • jsonwebtoken

• Client-Side

  • axios
  • material-ui
  • react
  • react-router-dom
  • react-spring
  • react-with-gesture
  • react-star-rating

Project Review

Code Showcase

Any code of which we are proud go here.

function reverse(string) {
	// here is the code to reverse a string of text
}

Issues & Resolutions

Any code bugs, errors, and fixes go here.

**ERROR**: app.js:34 Uncaught SyntaxError: Unexpected identifier

**RESOLUTION**: Missing comma after first object in sources {} object

Project Followup

Any tasks we would like to revisit after graduation go here.