{"id":20178761,"url":"https://github.com/chanda-abdul/api-hack-capstone","last_synced_at":"2025-03-03T05:40:46.462Z","repository":{"id":108539245,"uuid":"260811132","full_name":"Chanda-Abdul/API-Hack-Capstone","owner":"Chanda-Abdul","description":"While enrolled in Thinkful's Web Development bootcamp I created this Capstone project using web APIs","archived":false,"fork":false,"pushed_at":"2020-05-03T02:09:41.000Z","size":3072,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-13T16:49:23.157Z","etag":null,"topics":["api"],"latest_commit_sha":null,"homepage":"https://fervent-mcnulty-5e1d46.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Chanda-Abdul.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-03T02:05:36.000Z","updated_at":"2021-09-07T21:46:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"f5255f73-1410-4d7e-9682-2538724bb279","html_url":"https://github.com/Chanda-Abdul/API-Hack-Capstone","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chanda-Abdul%2FAPI-Hack-Capstone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chanda-Abdul%2FAPI-Hack-Capstone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chanda-Abdul%2FAPI-Hack-Capstone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chanda-Abdul%2FAPI-Hack-Capstone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Chanda-Abdul","download_url":"https://codeload.github.com/Chanda-Abdul/API-Hack-Capstone/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241616683,"owners_count":19991542,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api"],"created_at":"2024-11-14T02:23:20.582Z","updated_at":"2025-03-03T05:40:46.439Z","avatar_url":"https://github.com/Chanda-Abdul.png","language":"JavaScript","readme":"# API-Hack-Capstone\nWhile enrolled in Thinkful's Web Development bootcamp I created this Capstone project using web APIs\n\n# Thinkful API Hack Capstone - Dinner and a Movie Web App\n\n\n\n## Programmer\nChanda Hubbard\n\n[\u003eLive URL\u003c](https://chandahubbard.github.io/API-Hack-Capstone/)\n\n\n\n## Motivation\n\nSometimes 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.\n\n\n## Summary\n\n\u003cb\u003eDinner and a Movie\u003c/b\u003e 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) \n\n\n\n## Built with:\n\n#### \u003cbr/\u003eAPIs \u003cbr/\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; [EatStreet API](https://developers.eatstreet.com/endpoint/search)  \u003cbr/\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; [TasteDive Movie API ](https://tastedive.com/read/api)\u003cbr/\u003ejQuery \u003cbr/\u003eJavaScript \u003cbr/\u003eHTML \u003cbr/\u003eCSS \u003cbr/\u003e   Visual Studio Code \u003cbr/\u003eGit Hub\n\n\n\n## Process\n\n##### [\u003e Initial wireframes\u003c](https://docs.google.com/document/d/16hyz31opJRNBHMy4-gDB9pLsdS5OK1MZCCaQCb7vhCo/edit?usp=sharing)\n\n### Wireframe images\n\n\u003cimg src=\"content/wireframe.png\" alt=\"Wireframe\" width=\"400\"\u003e\n\n##### [\u003e Initial User Stories\u003c](https://docs.google.com/spreadsheets/d/1FB6xBWHgIpJLK6rlRdFN-CHQ4ed_Hvct-nbLKT8k22w/edit?usp=sharing)\n\n### Version MVP (Minimal Viable Product)\n\n[\u003eMVP\u003c](https://chandahubbard.github.io/API%20Hack%20Capstone/index.html)\n\n#### Image of MVP Title Screen\n\n\u003cimg src=\"content/MVP1.png\" alt=\"Image of MVP Title Screen\" width=\"300\"\u003e\n\n#### Image of MVP Results Screen\n\n\u003cimg src=\"content/MVP6.png\" alt=\"Image of MVP Results Screen\" width=\"900\"\u003e\n\n### Styling with a little bit of CSS\n\nAfter researching the \u003ci\u003ePsychology of Color\u003c/i\u003e, 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.\n\n\u003cbr/\u003e\u003cimg src=\"content/colortheme.png\" alt=\"Style Title\" width=\"600\"\u003e\n\n\u003cimg src=\"content/intro.png\" alt=\"Style Title\" width=\"400\"\u003e\u003cbr/\u003e\n\n\n\n## Final version at different breakpoints\n\n### Mobile\n\n\u003cimg src=\"content/mobile.png\" alt=\"Final Title Screen on Mobile Version\" width=\"250\"\u003e\n\n### Tablet\n\n\u003cimg src=\"content/tablet.png\" alt=\"Final Title Screen on Tablet Version\" width=\"300\"\u003e\n\n### Desktop/other\n\n\u003cimg src=\"content/desktop.png\" alt=\"Final Title Screen on Desktop Version\" width=\"400\"\u003e\n\n\n\n## Final version \u0026 User Flows\n\n### Screen 1 \n#### Landing Page which Navigates to a Dinner Input screen once the \"Let's Go\" button is clicked \n\u003cimg src=\"content/intro.png\" alt=\"Intro Screen on Tablet Version\" width=\"500\" align=\"center\"\u003e\n\n### Screen 2\n#### Dinner Input screen, where the user can provide their location and select delivery and pickup options\n\u003cimg src=\"content/dinnerinput.png\" alt=\"Dinner Input Screen on Tablet Version\" width=\"500\"\u003e\n\n### Screen 3\n#### Flows the user from the dinner input screen to the movie input screen once the \"Find a Movie\" button is clicked\n\u003cimg src=\"content/flowtomovie.png\" alt=\"Flow from Dinner input to Movie input Screen on Tablet Version\" width=\"500\"\u003e\n\n### Screen 4\n#### Movie input screen that allows used to provide a movie they would like to see similar recommendations for\n\u003cimg src=\"content/movieinput.png\" alt=\"Movie Input Screen on Tablet Version\" width=\"500\"\u003e\n\n### Screen 5\n#### Flows the user from the movie input screen to the results screen once the \"View Dinner \u0026 Movie Pairing\" button is clicked\n\u003cimg src=\"content/flowtoresults.png\" alt=\"Flow from movie input to results Screen on Tablet Version\" width=\"500\"\u003e\n\n### Screen 6\n#### Flows the user to the results screen where they can view their restaurant recommendation and their movie recommendation.\n\u003cimg src=\"content/resultsscreen1.png\" alt=\"Final Screen top Screen on Tablet Version\" width=\"500\"\u003e\n\u003cimg src=\"content/resultsscreen2.png\" alt=\"Final Screen Bottom on Tablet Version\" width=\"500\"\u003e\n\n### Additional Screens\n#### 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.\n\n\n\n## Other features to implement in future versions\n\n[ ] Figure out how to handle edge cases for movie input\n\u003cbr/\u003e\n[ ] Incorporate an additional API that will let the user know which streaming service currently offers their movie selection for viewing.\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanda-abdul%2Fapi-hack-capstone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchanda-abdul%2Fapi-hack-capstone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanda-abdul%2Fapi-hack-capstone/lists"}