bootcampprojectoneteamfour / food-finder

Great food is just around the corner. Let us help you find it.

Food Finder

Many people often take where they live for granted, even in urban locales surrounded by stores and restaurants and can end up missing out on some nearby neighbourhood gems. Or perhaps they just don't want to get in a car, or Uber, to dine out at one of the better known restaurants. The purpose of our product is to provide the user with options for great restaurants within a convenient walking distance from their home; just around the corner.

An Introduction to Food Finder

Built With

• HTML
• Tailwind CSS
• Javascript
• Yelp Fusion API
• Google Geocoding API
• Google Directions API

Design and Functionality

The main design uses a combination of HTML, CSS and Javascript.

1/ The user inputs their postal code into the search field and then clicks on the "Food" button.

2/ The button click calls the function that pulls information from the Yelp Fusion API display the top 10 rated restaurants in the user's area.

3/ When the user clicks on the restaurant button, that click calls the function that pulls information from a combination of the Open Route API, and Google Maps to display walking directions to that restaurant.

4/ At the same time, the button click saves the user's search history into local storage so that when the user returns to the restaurant directory, the user's search history will be displayed.

Deployment

This site has been published via Github Pages The repository has been stored on Github

Installation

The first time you run Food Finder, you will get a console 403 error.

• Click on the "https://cors-anywhere.herokuapp.com/" link and allow temporary access.
• Return back to Food Finder and refresh the page.
• You should have no longer have any issues finding great food!

License

An MIT License has been included with this project.

Credits and external Resources

• Yelp Fusion - https://fusion.yelp.com/
• Google Geocoding - https://developers.google.com/maps/documentation/geocoding
• Google Directions - https://developers.google.com/maps/documentation/directions

Future Developments

• When the user searches by postal code, they are shown a map of the top 10 best rated restaurants in that area
• When a user clicks on the pin for that restaurant, they are shown a badge. If the user clicks on that badge, they are directed towards the restaurant’s website.

Project Contributors

• Ian Ackerman (https://github.com/ianaack)
• Laurel David (https://github.com/lnd4812)
• Tommy Otis (https://github.com/xdatalinq)
• Matthew Smith (https://github.com/mdubb23)
• Feven Tsegai (https://github.com/feventsegai)

food-finder's Issues

build wireframe for layout - similar to Git It Done

As a group we can work together to build the overall layout and design of the Food Finder web application

build initial directions.js script

initial build of the directions.js script

build loadRestaurants() in homepage.js

pull from localStorage to build the previously viewed restaurant list

build index.html with classes and id's

Make html pages mobile responsive

-add media queries for html elements

build homepage.js script

initial homepage javascript build

build getRestaurants() in homepage.js

Using the long/lat data from the getLatLon() and the Yelp Fusion API, call an array of restaurant data

update homepage.js

Update homepage.js and remove any element that is connected to "new".js

Presentation: Process part 1

What were the technologies used?
How were tasks and roles broken down and assigned?

add screenshot to README

once the page has been deployed fully, grab screenshots and upload to the README.md file

Update README.md

Update the README file with the following:

• description
• technologies used
• screenshot
• and link to deployed application

Presentation: Concept

What is your User Story?

What was your Motivation for Development?

update new.js file

following our discussion last night, work on building out the second JavaScript page with the necessary elements

change <script> tag

work with @xdatalinq to swap out the existing <script src="homepage.js"> tag with his new.js filename

Presentation: Future Development

What are your directions for future development?

add <script> tag

work with Tommy to add a <script> tag for his js filename under the existing <script src="homepage.js">

Merge to develop

create pull requests and merge all work to develop branch.

git push styling to develop

merge your styling with the develop branch via a Pull Request review

merge to Main

merge all completed work from the develop branch to the main branch

Presentation: Process part 2

What challenges did you encounter?
What were your successes?

deploy github pages

deploy the project to a github pages environment for testing

Presentation: Elevator Pitch

Create a 1 minute description of your application

Clean Up Styling Elements

Just have a look through all documents for class elements, with each other, and polish up the styling.

build saveRestaurants() in homepage.js

save the event.target list item to localStorage

Presentation: Demo

Show your stuff

build displayRestaurants() in homepage.js

With the array of restaurant data available through getRestaurants(), display the search results in a card.

add Tailwind CSS styling elements to both html files

using the tailwind CSS doc add styling to both the index.html and the restaurant-index.html pages

build directions.html with classes and id's