https://github.com/chanda-abdul/api-hack-capstone

While enrolled in Thinkful's Web Development bootcamp I created this Capstone project using web APIs
https://github.com/chanda-abdul/api-hack-capstone

api

Last synced: about 1 month ago
JSON representation

While enrolled in Thinkful's Web Development bootcamp I created this Capstone project using web APIs

• Host: GitHub
• URL: https://github.com/chanda-abdul/api-hack-capstone
• Owner: Chanda-Abdul
• Created: 2020-05-03T02:05:36.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-05-03T02:09:41.000Z (almost 5 years ago)
• Last Synced: 2024-11-14T02:23:48.766Z (3 months ago)
• Topics: api
• Language: JavaScript
• Homepage: https://fervent-mcnulty-5e1d46.netlify.app/
• Size: 2.93 MB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# API-Hack-Capstone

While enrolled in Thinkful's Web Development bootcamp I created this Capstone project using web APIs

# Thinkful API Hack Capstone - Dinner and a Movie Web App

## Programmer

Chanda Hubbard

[>Live URL<](https://chandahubbard.github.io/API-Hack-Capstone/)

## Motivation

Sometimes you just want a nice relaxing night in, while ordering dinner and watching a good movie.  There are so many restaurants and movies to choose from, and it can be very hard to make a selection.  This app was created to help users avoid the decision paralysis that happens when they need to deicde on a resturaunt to eat at, or when they need to decide on a movie to watch. First, the user will input their location and the app will show the information for a takeout restaurant nearby.  Then the user will input a movie that they like and the app will show them a recommendation and trailer for a similar movie.

## Summary

Dinner and a Movie is a responsive web app that helps users decide where to order dinner and which movie to watch for a fun night in.  Users input their location and it is sent to the [EatStreet API Endpoint](https://developers.eatstreet.com/endpoint/search) to find restaurants that provide food delivery or pickup nearby. Users will then navigate to a screen where they can input a movie that they like so that they can receive similar movie recommendations using the [TasteDive Movie API Endpoint](https://tastedive.com/read/api) 

## Built with:

#### 
APIs 
    [EatStreet API](https://developers.eatstreet.com/endpoint/search)  
    [TasteDive Movie API ](https://tastedive.com/read/api)
jQuery 
JavaScript 
HTML 
CSS 
   Visual Studio Code 
Git Hub

## Process

##### [> Initial wireframes<](https://docs.google.com/document/d/16hyz31opJRNBHMy4-gDB9pLsdS5OK1MZCCaQCb7vhCo/edit?usp=sharing)

### Wireframe images



##### [> Initial User Stories<](https://docs.google.com/spreadsheets/d/1FB6xBWHgIpJLK6rlRdFN-CHQ4ed_Hvct-nbLKT8k22w/edit?usp=sharing)

### Version MVP (Minimal Viable Product)

[>MVP<](https://chandahubbard.github.io/API%20Hack%20Capstone/index.html)

#### Image of MVP Title Screen



#### Image of MVP Results Screen



### Styling with a little bit of CSS

After researching the Psychology of Color, I decide that I would either choose a red or orange color scheme for my styling.  Red, because it symbolizes entertainment, for the movie portion of the app. Or orange, because it symbolizes food/hunger, for the food delivery portion of the app.  I ended up with a red based color theme from Adobe called,  [Sosialisasi Speak Up 19](https://color.adobe.com/Sosialisasi-Speak-Up-19-color-theme-14114879/https://color.adobe.com/Sosialisasi-Speak-Up-19-color-theme-14114879/) , which can be viewed below.







## Final version at different breakpoints

### Mobile



### Tablet



### Desktop/other



## Final version & User Flows

### Screen 1 

#### Landing Page which Navigates to a Dinner Input screen once the "Let's Go" button is clicked 



### Screen 2

#### Dinner Input screen, where the user can provide their location and select delivery and pickup options



### Screen 3

#### Flows the user from the dinner input screen to the movie input screen once the "Find a Movie" button is clicked



### Screen 4

#### Movie input screen that allows used to provide a movie they would like to see similar recommendations for



### Screen 5

#### Flows the user from the movie input screen to the results screen once the "View Dinner & Movie Pairing" button is clicked



### Screen 6

#### Flows the user to the results screen where they can view their restaurant recommendation and their movie recommendation.





### Additional Screens

#### The user can then select the "restart the app" button which navigates back to screen one and clears all results or they can select the "View more recommendations" button to view screen 6 with different movie and restaurant results.

## Other features to implement in future versions

[ ] Figure out how to handle edge cases for movie input




[ ] Incorporate an additional API that will let the user know which streaming service currently offers their movie selection for viewing.