{"id":13989765,"url":"https://github.com/fullstackreact/react-yelp-clone","last_synced_at":"2025-10-10T13:16:54.033Z","repository":{"id":66101516,"uuid":"59253589","full_name":"fullstackreact/react-yelp-clone","owner":"fullstackreact","description":"Tutorial: Build a Yelp-clone in React","archived":false,"fork":false,"pushed_at":"2021-10-24T11:29:23.000Z","size":1251,"stargazers_count":840,"open_issues_count":10,"forks_count":218,"subscribers_count":26,"default_branch":"master","last_synced_at":"2025-05-24T00:07:34.545Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fullstackreact.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-05-20T00:54:57.000Z","updated_at":"2025-04-28T01:26:29.000Z","dependencies_parsed_at":"2023-03-03T14:30:27.730Z","dependency_job_id":null,"html_url":"https://github.com/fullstackreact/react-yelp-clone","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fullstackreact/react-yelp-clone","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstackreact%2Freact-yelp-clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstackreact%2Freact-yelp-clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstackreact%2Freact-yelp-clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstackreact%2Freact-yelp-clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fullstackreact","download_url":"https://codeload.github.com/fullstackreact/react-yelp-clone/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstackreact%2Freact-yelp-clone/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279004073,"owners_count":26083665,"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","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-08-09T13:02:02.934Z","updated_at":"2025-10-10T13:16:54.004Z","avatar_url":"https://github.com/fullstackreact.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"resources/readme/fullstackreact-yelp-clone-tutorial.png\" alt=\"Fullstack React Yelp Clone Tutorial\" /\u003e\n\u003c/p\u003e\n\n# React Tutorial: Build a Yelp Clone [![Dolpins](https://cdn.rawgit.com/fullstackreact/google-maps-react/master/resources/readme/dolphins-badge-ff00ff.svg)](https://www.fullstackreact.com)\n\n\u003e _tl;dr_ - This is the code for our blog post which will guide you through building a full React app, even with little to no experience in the framework. We're going build a Yelp clone in React\n\nSee the [demo](http://fullstackio.github.io/yelp-clone) and [accompanying blog post](https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/).\n\nLet's build a lightweight clone of Yelp using React.\n\nIn this tutorial we'll talk about:\n\n- How to setup a new React project from scratch\n- How to create a basic React component\n- How to write modular CSS using `postcss`\n- How to setup testing\n- How route to different pages with `react-router`\n- How to integrate with Google Maps\n- How to write a Google Maps React component\n- How to write a five-star rating component\n\nWe'll be tying in a lot of different pieces of [React](https://facebook.github.io/react/) together to build a full-sized React app. This post will guide you through building a full React app, even with little to no experience in the framework.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"resources/readme/app-screenshot.png\" /\u003e\n\u003c/p\u003e\n\n## Quickstart\n\nFirst, clone the repository:\n\n```bash\ngit clone https://github.com/fullstackreact/react-yelp-clone.git react-yelp-clone\ncd react-yelp-clone\n\n# install the dependencies\nnpm install\n\n# copy configuration (see below)\ncp .env.example .env\n\n# start the server\nnpm start\n```\n\n## Configuring the Application\n\nThis app uses [dotenv](https://github.com/bkeepers/dotenv) for configuration. In order to configure the application for your own api access, [grab an api token from Google here](https://developers.google.com/maps/documentation/javascript/) and set it in a file called `.env` at the root for a key called `__GAPI_KEY__`.\nFor instance, say that your gapi key is: `abc123`. Your `.env` file should look like:\n\n```bash\nGAPI_KEY=abc123\n```\n\nYou can also create this file by copying the `.env.example` file at the root:\n\n```bash\ncp .env.example .env\n```\n\n## Starting the Application\n\n```bash\nnpm install \nnpm start\n```\n\n## Libraries We'll Use\n\nThis app uses the following technologies:\n\n* [webpack](https://webpack.github.io)\n* [postcss](http://postcss.org)\n* [hjs-webpack](https://github.com/HenrikJoreteg/hjs-webpack)\n* [react.js](http://facebook.github.io/react/)\n* [react-router](https://github.com/reactjs/react-router)\n* [Google Maps API](https://developers.google.com/maps/)\n* [google-maps-react npm](https://github.com/fullstackreact/google-maps-react)\n* [enzyme](https://github.com/airbnb/enzyme)\n* [chai](http://chaijs.com)\n* And much much more\n\n## Running the Tests\n\nThe application is built using tests, including the fantastic [enzyme](https://github.com/airbnb/enzyme) and [chai](http://chaijs.com) libraries. To run the tests, use the `npm` test script:\n\n```shell\nnpm run test\n```\n\nCheck out the blog post for more information on how this app was built and a complete tutorial on using React to build your own apps.\n\n## Contributing\n\n```shell\ngit clone https://github.com/fullstackio/yelp-clone.git yelp\ncd yelp\nnpm install\nnpm start\n```\n___\n\n# Fullstack React Book\n\n\u003ca href=\"https://fullstackreact.com\"\u003e\n\u003cimg align=\"right\" src=\"resources/readme/fullstack-react-hero-book.png\" alt=\"Fullstack React Book\" width=\"155\" height=\"250\" /\u003e\n\u003c/a\u003e\n\nThis app was built alongside the blog post [React Tutorial: Cloning Yelp](https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/).\n\nThis repo was written and is maintained by the [Fullstack React](https://fullstackreact.com) team. In the book we cover many more projects like this. We walk through each line of code, explain why it's there and how it works.\n\nThis app is only one of several apps we have in the book. If you're looking to learn React, there's no faster way than by spending a few hours with the Fullstack React book.\n\n\u003cdiv style=\"clear:both\"\u003e\u003c/div\u003e\n\n## License\n [MIT](/LICENSE)\n\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullstackreact%2Freact-yelp-clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffullstackreact%2Freact-yelp-clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullstackreact%2Freact-yelp-clone/lists"}