Give It A Shot

We all know the feeling: standing in a room full of people, unsure if you belong or what to say. In our case, everyone is ordering fancy cocktails and all you know how to say is "Vodka Soda". Give It A Shot changes all of that.

As fledgling cocktail connoisseurs, we love trying new drinks. But, just like you, we don't even know what we don't know! Through Give It A Shot, we'll be able to try any drink known to the publicly available, Cocktail DB

How It Works

Once logged in, you will be taken to our drink quiz, starting with the type of liquor. You will also be able to specify an ingredient/flavor you like.

From there, Give It A Shot will recommend you 2 brand new drinks! If you don't like those ones, you can always load more.

Technologies Used

The front end is done completely with React.js. Some highlights:

• React hooks (useState, useEffect)
• SCSS Modules
• window event listeners for window resizing
• Fetch API to handle all external APIs, including our own backend and The Cocktail DB API.

The backend uses Express.js on the Node.js runtime. Our database is PostgreSQL, using Sequelize as our ORM. Some highlights:

• Many-to-many drinks - users relationship for "favorites" table
• fs Node module to load images from filesystem into database and backend, via Sequelize seeder.
• Sequelize seeder to facilitate actual loading of data.
• passport & bcrypt Node modules for secure authentication

Running Locally

Our hosted version of this web app can be found at: not hosted yet, we need to deploy still :)

But if you'd like to play with the code yourself, please do the following:

1. Ensure environment variables are set - API_KEY
2. Local database is created, and is set up with the models provided with this repository, and config is changed to point to your database.
3. cd give-it-a-shot-image-sql 2. createdb give-it-a-shot 3. Create a config.json: -
4. sequelize db:migrate
5. Seed the database with Sequelize:
6. cd give-it-a-shot-api-sql
7. sequelize db:seed --seed seeders/20201118201018-image-seeder.js
8. Dependencies are installed (npm i, both in frontend and backend directories)

React Component Hierarchy

• App
  • Header
  • Routes
    • Login
      • Form
    • Register
      • Form
    • Home
    • UserProfile
      • Form
      • Favorites
    • Quiz
      • QuizForm
        • Option
      • Results
        • Option
    • DrinkDetails
      • Card (React Bootstrap)

Project Planning

We used this Trello board to manage our project planning and task completion.

Entity Relationship Diagram

Wireframes

Code Snippets

Client Side Routing

Kelsey

1. Drink Details
2. User CRUD

Derek

1. images - fs module parsing
2. Option Component

Future Development

• Bubble up Sequelize errors, like password validation needs to be 8 characters long
• Implement API calls with Axios, for range of added features: wider browser support, easy to use progress bar, simultaneous requests
• Only suggest the ingredients that pair with the appropriate liquor, instead of all ingredients
• Create an Account navigation link, with a drop down for "Account Details" and "Favorites"
• Redirect user home after registering, instead of logging in
• Register/Log in errors - none are thrown, the user has no idea what is happenign
• Use React Contexts to avoid explicitly passing props down
• Update "Load More" button to use modal
• Random drink button