{"id":20373372,"url":"https://github.com/frontarm/react-firebase-bacon","last_synced_at":"2025-10-13T22:06:35.815Z","repository":{"id":66191650,"uuid":"197575177","full_name":"frontarm/react-firebase-bacon","owner":"frontarm","description":"Companion repository for the React, Firebase \u0026 Bacon course","archived":false,"fork":false,"pushed_at":"2019-10-07T09:36:38.000Z","size":12045,"stargazers_count":16,"open_issues_count":0,"forks_count":1,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-10-06T21:30:03.702Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://frontarm.com/bacon/","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/frontarm.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,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-07-18T11:36:11.000Z","updated_at":"2024-08-17T06:23:21.000Z","dependencies_parsed_at":"2023-02-25T06:45:52.026Z","dependency_job_id":null,"html_url":"https://github.com/frontarm/react-firebase-bacon","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/frontarm/react-firebase-bacon","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontarm%2Freact-firebase-bacon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontarm%2Freact-firebase-bacon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontarm%2Freact-firebase-bacon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontarm%2Freact-firebase-bacon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/frontarm","download_url":"https://codeload.github.com/frontarm/react-firebase-bacon/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontarm%2Freact-firebase-bacon/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279017151,"owners_count":26085983,"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-13T02:00:06.723Z","response_time":61,"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-11-15T01:18:03.024Z","updated_at":"2025-10-13T22:06:35.786Z","avatar_url":"https://github.com/frontarm.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Make Bacon with React \u0026 Firebase\n================================\n\nThis is the companion repository to [React, Firebase \u0026 Bacon](https://frontarm.com/bacon) -- a complete guide to building a real-world app with React.\n\nThe repository contains branches for individual steps within the course. In the first few sections, you'll create and deploy a small [landing page](https://vouch.chat) -- with hooks, Create React App and Firebase:\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"./docs/vouch-demo.gif\" a–=\"Vouch Landing Demo\"\n/\u003e\u003c/p\u003e\n\nThen, within later steps, you'll add authentication, profiles, payments, modals -- and other features from [vouch.chat](https://beta.vouch.chat).\n\n\nOutline\n-------\n\n*This outline just includes branches in this repository. You can the [full course outline](https://frontarm.com/courses/react-and-bacon/getting-started/welcome/) at [Frontend Armory](https://frontarm.com).*\n\n\n### 1. Setting up\n\n- [step-010](https://github.com/frontarm/react-firebase-bacon/tree/step-010) – Create an app and deploy it\n\n\n### 2. Basic hooks and data fetching\n\n- [step-020](https://github.com/frontarm/react-firebase-bacon/tree/step-020) – Fetch and display data with effects\n- [step-021](https://github.com/frontarm/react-firebase-bacon/tree/step-021) – Store form state with `useState`\n\n\n### 3. Forms, errors and state management\n\n- [step-030](https://github.com/frontarm/react-firebase-bacon/tree/step-030) – Submitting forms\n- [step-031](https://github.com/frontarm/react-firebase-bacon/tree/step-031) – Human-readable error messages\n- [step-032](https://github.com/frontarm/react-firebase-bacon/tree/step-032) – Client-side validation\n- [step-033](https://github.com/frontarm/react-firebase-bacon/tree/step-033) – Hiding resolved errors\n\n\n### 4. Styles and animations\n\n- [step-040](https://github.com/frontarm/react-firebase-bacon/tree/step-040) – Refactor with Styled Components\n- [step-041](https://github.com/frontarm/react-firebase-bacon/tree/step-041) – Add the Vouch styles\n- [step-042](https://github.com/frontarm/react-firebase-bacon/tree/step-042) – Using images\n- [step-043](https://github.com/frontarm/react-firebase-bacon/tree/step-043) – Custom focus styles\n- [step-044](https://github.com/frontarm/react-firebase-bacon/tree/step-044) – Add `theme.js`\n- [step-045](https://github.com/frontarm/react-firebase-bacon/tree/step-045) – Media queries\n- [step-046](https://github.com/frontarm/react-firebase-bacon/tree/step-046) – Filesystem structure\n- [step-047](https://github.com/frontarm/react-firebase-bacon/tree/step-047) – Animated loading indicators\n\n\n### 5. Routing and data subscriptions\n\n- [step-050](https://github.com/frontarm/react-firebase-bacon/tree/step-050) – Browser history and `\u003cLink\u003e` components\n- [step-051](https://github.com/frontarm/react-firebase-bacon/tree/step-051) – Simple routing and 404 message\n- [step-052](https://github.com/frontarm/react-firebase-bacon/tree/step-052) – Cleaning up after effects\n- [step-053](https://github.com/frontarm/react-firebase-bacon/tree/step-053) – A `routes` directory\n- [step-054](https://github.com/frontarm/react-firebase-bacon/tree/step-054) – Layout component\n- [step-055](https://github.com/frontarm/react-firebase-bacon/tree/step-055) – Programmatic navigation\n\n\n### 6. Build a backend with Firebase\n\n- [step-060](https://github.com/frontarm/react-firebase-bacon/tree/step-060) – Calling Firebase from React\n- [step-061](https://github.com/frontarm/react-firebase-bacon/tree/step-061) – Firebase functions\n- [step-062](https://github.com/frontarm/react-firebase-bacon/tree/step-062) – Reduce costs with counters\n- [step-063](https://github.com/frontarm/react-firebase-bacon/tree/step-063) – Real-time updates\n- [step-064](https://github.com/frontarm/react-firebase-bacon/tree/step-064) – Staging and production builds\n\nYou can see the result of this step online at [vouch.chat](https://vouch.chat).\n\n\n### 7. Authentication\n\n*coming soon*\n\n\n### 8. Context and advanced hooks\n\n*coming soon*\n\n\n\nInstallation\n------------\n\nIf you just want to get the app working without the full walkthrough, here's what to do.\n\n\n### 1. Firebase app\n\nBefore starting, you'll need a Firebase project. Once you've set it up, you'll need your firebase project's config object, which is available in the Firebase console and looks a little like this:\n\n```js\nconst firebaseConfig = {\n  apiKey: \"qwertyuiopasdfgh_asdfasdfasdfasdfasdfas\",\n  authDomain: \"something.firebaseapp.com\",\n  databaseURL: \"https://something.firebaseio.com\",\n  projectId: \"something\",\n  storageBucket: \"\",\n  messagingSenderId: \"111111111111\",\n  appId: \"1:111111111111:web:1rstarstarstarst\"\n};\n```\n\nYou'll also need to ensure that your project has a *Firestore* database available. To start, you can create it in test mode -- we'll lock it down later.\n\nHere's the full process to configure your Firebase project and Firestore database:\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"./docs/firebase-setup.gif\" alt=\"Firebase project setup\"\n/\u003e\u003c/p\u003e\n\n\n### 2. Clone and install\n\nOnce you've got your Firebase config, start by cloning the repository and installing its dependencies\n\n```bash\ngit clone https://github.com/frontarm/react-firebase-bacon.git app\ncd app\nnpm install\ncd functions\nnpm install\ncd ..\n```\n\n### 3. Local configuration files\n\nTo actually build and deploy the app, you'll need to create some configuration files:\n\n```bash\ncp .env.example .env.development.local\ncp .env.example .env.production.local\n```\n\nThese two files provide configuration for your development server and distributable app, respectively. They start out blank, so you'll need to add the relevant parts from your Firebase config. The end will result will look something like this:\n\n```\n// .env files\nREACT_APP_FIREBASE_API_KEY=qwertyuiopasdfgh_asdfasdfasdfasdfasdfas\nREACT_APP_FIREBASE_AUTH_DOMAIN=something.firebaseapp.com\nREACT_APP_FIREBASE_DATABASE_URL=https://something.firebaseio.com\nREACT_APP_FIREBASE_PROJECT_ID=something\nREACT_APP_FIREBASE_STORAGE_BUCKET=\nREACT_APP_FIREBASE_MESSAGING_SENDER_ID=111111111111\nREACT_APP_FIREBASE_APP_ID=1:111111111111:web:1rstarstarstarst\n```\n\nYou'll also need to add a `functions/.serviceaccount.json` file, which includes credentials for your *development* Firebase service account -- needed to test your Firebase functions locally. You can download the contents of this file from the Firebase console:\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"./docs/firebase-service-key.gif\" alt=\"Firebase project setup\"\n/\u003e\u003c/p\u003e\n\nOnce you've downloaded the service account file, just move it into your `functions` directory and rename it to `.serviceaccount.json`.\n\nAll of these configuration files are listed in `.gitignore`, so you don't need to worry about accidentally pushing any private configuration to a public repository.\n\n\n### 4. Start the dev server\n\nYou can test your configuration by starting the development server:\n\n```bash\nnpm run start:client\n```\n\nThis should open a browser window to \u003chttp://localhost:3000/\u003e, where if everything has gone to plan, you'll see the landing page. However, before being able to submit the form, you'll first need to start a server to simulate your Firebase functions locally.\n\n\n### 5. Set up the Firebase CLI tools\n\nBefore continuing, you'll first need to make sure you have the Firebase CLI tools installed:\n\n```bash\nnpm install -g firebase-tools\n```\n\nOnce installed, you'll also need to login to your Firebase account:\n\n```bash\nfirebase login\n```\n\nThis will give you a `firebase` command, which lets you deploy your app to Firebase hosting, deploy Firebase functions, and run Firebase functions locally.\n\n\n### 6. Create your `.firebaserc` file\n\nIn order to know which Firebase project to use, the `firebase` command looks for the current project's ID in a file could `.firebaserc` -- which you'll need to create. The easiest way to do this is by running `firebase use --add`, selecting a project, and then naming it `default` when prompted:\n\n```\n$ firebase use --add\n\n? Which project do you want to add? vouchchat\n? What alias do you want to use for this project? (e.g. staging) default\n\nCreated alias default for vouchchat.\nNow using alias default (vouchchat)\n```\n\n\n### 7. Start the local Firebase functions server\n\nOnce you've set up the Firebase CLI tools, you can start a local server in a separate terminal window to simulate your Firebase functions:\n\n```bash\nnpm run start:functions\n```\n\nIf this has worked correctly, then you should now be able to submit the form on your landing page!\n\nYou'll usually want both the React and Firebase dev servers running simultaneously, so this repository also includes a special script that will start both of them in the same tab:\n\n```bash\nnpm start\n```\n\n\n### 8. Deploy!\n\nOnce you've completed all of the earlier steps, deploying your app to the internets is simple:\n\n```bash\nnpm run build:development # or npm run build:production\nfirebase deploy\n```\n\nThis will build your app's distributable files with the `react-scripts` command, before calling `firebase deploy` to upload the new app to Firebase hosting, deploy cloud functions, and lock down your database's access rules. Once complete, your new app's URL will be printed to the console.\n\nIf everything is set up correctly, you should now be able to submit the form in the live app with another email address, and see it appear in your Firebase console after a refresh. Congratulations -- you've got your landing page working! All that's left is to play with the styles to make it work for your brand.\n\n\n### 9. Bonus step: add a domain\n\nWithin the [Firebase Console](https://console.firebase.google.com)'s *Hosting* area, you can add a domain name for your landing page -- so that it looks a little more official.\n\n\nHow does this all work though?\n------------------------------\n\nWant to build real apps that make real bacon? Then check out [React, Firebase \u0026 Bacon](https://frontarm.com/bacon) -- and while you're there, pick up a free CLI cheatsheet with many of the commands from this guide. I'll see you there!\n\n*- James K Nelson*\n\n\nLicense\n-------\n\nCode is licensed under the MIT license. Images are not licensed.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontarm%2Freact-firebase-bacon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrontarm%2Freact-firebase-bacon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontarm%2Freact-firebase-bacon/lists"}