{"id":19086689,"url":"https://github.com/jangbl/yelp-frontend","last_synced_at":"2025-04-30T09:45:37.697Z","repository":{"id":35451561,"uuid":"214627499","full_name":"jangbl/yelp-frontend","owner":"jangbl","description":"Yelp clone in React","archived":false,"fork":false,"pushed_at":"2023-05-13T10:56:48.000Z","size":5183,"stargazers_count":41,"open_issues_count":28,"forks_count":22,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-03T21:37:58.044Z","etag":null,"topics":["bulma","create-react-app","javascript","react","react-hook","react-hooks","react-hooks-demo","react-hooks-tutorial","tutorial","yelp","yelp-api","yelp-fusion-api"],"latest_commit_sha":null,"homepage":null,"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/jangbl.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":"2019-10-12T10:27:02.000Z","updated_at":"2024-03-15T11:08:50.000Z","dependencies_parsed_at":"2024-10-03T21:38:00.500Z","dependency_job_id":"db87e4d6-969d-4017-b5f8-0cd25830d68c","html_url":"https://github.com/jangbl/yelp-frontend","commit_stats":null,"previous_names":["jangbl/yelp-frontend"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jangbl%2Fyelp-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jangbl%2Fyelp-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jangbl%2Fyelp-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jangbl%2Fyelp-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jangbl","download_url":"https://codeload.github.com/jangbl/yelp-frontend/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223779728,"owners_count":17201287,"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":["bulma","create-react-app","javascript","react","react-hook","react-hooks","react-hooks-demo","react-hooks-tutorial","tutorial","yelp","yelp-api","yelp-fusion-api"],"created_at":"2024-11-09T03:00:13.161Z","updated_at":"2024-11-09T03:00:13.861Z","avatar_url":"https://github.com/jangbl.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 1 About\nThis repository contains the source code for the **[Build Yelp in React | React Hooks Tutorial](https://www.youtube.com/watch?v=8asNYp7koRg)** provided by [productioncoder.com](https://productioncoder.com).\n\nSign up for [this email list](https://productioncoder.com/you-decide-what-we-build-next/) so you get a vote in what we will publish next.\n\nFor updates please follow [@_jgoebel](https://twitter.com/_jgoebel) on Twitter.\n\n\u003ch3 align=\"center\"\u003ePlease help this repo with a ⭐️ if you find it useful! 😁\u003c/h3\u003e\n\n# 2. Demo\n**[Please check out the videos on Youtube](https://www.youtube.com/watch?v=8asNYp7koRg)**\n\n![Yelp Home](images/yelp.gif)\n# 3. Screenshots\nThe application uses real data by leveraging the [Yelp Fusion API](https://www.yelp.com/developers/documentation/v3).\n\n## 3.1. Home\n![Yelp Home](images/yelp-home.png)\n\n## 3.2. Search for businesses / restaurants\n![Yelp Search](images/yelp-search.png)\n\n# 4. Caveats\n* This app uses the [CORS Anywhere](https://github.com/Rob--W/cors-anywhere/#documentation) because the [Yelp Fusion REST API](https://www.yelp.com/developers/documentation/v3) is meant for server to server communication and does not support [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)\n* For the sake of the tutorial, we decided to proxy all request through [CORS Anywhere](https://github.com/Rob--W/cors-anywhere/#documentation) so we can focus on building the frontend part of the application.\n* **You should not run this in production because you would expose a `Bearer token` on the client side**. We only did this so that this tutorial can focus on the frontend. Later on we might develop a server for this application as well if people express enough interest.\n* **DO NOT commit your bearer token to source control if you work on a public repository**.\n\n# 5. How to run this Application\nThis application looks pretty much the same like the original [Yelp](https://www.yelp.com) website.\n\nIt leverages the free [Yelp Fusion REST API](https://www.yelp.com/developers/documentation/v3) for which you need an API key.\n\n1. Head over to the [Yelp Fusion API documentation](https://www.yelp.com/developers/documentation/v3)\n2. Click on `Create App` and sign in if you haven't done so already\n3. Once you have signed in, click on the `Get Started` button. If you already have an app, then you will already see the API key\n4. Fill out the form for [creating a new app](https://www.yelp.com/developers/v3/manage_app)\n5. Copy the generated `API key`. This is a [bearer token](https://stackoverflow.com/questions/25838183/what-is-the-oauth-2-0-bearer-token-exactly/25843058) that must be put inside the header of each request\n6. Navigate to the `src/hooks/yelp-api/config.js` file and assign the `BEARER_TOKEN` variable the following content\n   ```\n   const BEARER_TOKEN = '\u003cyour-token-here\u003e'\n   ```\n7. Install the dependencies by running `npm install` or `yarn install`\n8. Run the app with `npm start` or `yarn start`\n\n\n# 6. Used Technologies\n* [React / create-react-app](https://github.com/facebook/create-react-app)\n    * **only functional components**\n    * communication with web servers with [React Hooks](https://reactjs.org/docs/hooks-intro.html) only\n    * no higher order or class-based components\n* [React router](https://github.com/ReactTraining/react-router) with [useReactRouter](https://github.com/CharlesStover/use-react-router)\n* [Bulma](https://bulma.io)\n* Flexbox\n\n# 7. Disclaimer\nThis project is **solely intended for educational purposes** and is created under **fair use**.\n\nIt is **not intended to create any kind of Yelp competitor**, but to teach advanced concepts in frontend development.\n\nJust see it a nice educational project that will help you to improve your coding skills.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjangbl%2Fyelp-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjangbl%2Fyelp-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjangbl%2Fyelp-frontend/lists"}