{"id":22940808,"url":"https://github.com/scottgriv/svelte-firebase_demo","last_synced_at":"2026-05-09T01:02:15.834Z","repository":{"id":196286394,"uuid":"695257082","full_name":"scottgriv/svelte-firebase_demo","owner":"scottgriv","description":"A demo of app made using the Svelte JavaScript web framework and Firebase Firestore data storage service.","archived":false,"fork":false,"pushed_at":"2025-01-09T04:27:54.000Z","size":626,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T18:32:32.566Z","etag":null,"topics":["firebase","firebase-database","firestore","firestore-collection","firestore-database","nodejs","svelte","webapp"],"latest_commit_sha":null,"homepage":"","language":"Svelte","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/scottgriv.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}},"created_at":"2023-09-22T17:46:54.000Z","updated_at":"2025-01-09T04:27:58.000Z","dependencies_parsed_at":"2024-02-16T02:29:31.350Z","dependency_job_id":"fe8805b0-6333-40d6-be8b-48771ce89c7f","html_url":"https://github.com/scottgriv/svelte-firebase_demo","commit_stats":null,"previous_names":["scottgriv/svelte-firebase_demo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottgriv%2Fsvelte-firebase_demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottgriv%2Fsvelte-firebase_demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottgriv%2Fsvelte-firebase_demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottgriv%2Fsvelte-firebase_demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scottgriv","download_url":"https://codeload.github.com/scottgriv/svelte-firebase_demo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246709932,"owners_count":20821297,"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":["firebase","firebase-database","firestore","firestore-collection","firestore-database","nodejs","svelte","webapp"],"created_at":"2024-12-14T13:32:20.410Z","updated_at":"2026-05-09T01:02:15.824Z","avatar_url":"https://github.com/scottgriv.png","language":"Svelte","funding_links":["https://www.buymeacoffee.com/scottgriv"],"categories":[],"sub_categories":[],"readme":"\u003c!-- Begin README --\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://github.com/scottgriv/svelte-firebase_demo\" target=\"_blank\"\u003e\n        \u003cimg src=\"./docs/images/icon.png\" width=\"200\" height=\"200\"/\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://svelte.dev/\"\u003e\u003cimg src=\"https://img.shields.io/badge/Svelte-3.55.0-FF3E00?style=for-the-badge\u0026logo=svelte\" alt=\"Svelte Badge\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://firebase.google.com/\"\u003e\u003cimg src=\"https://img.shields.io/badge/Firebase-10.4.0-FFCA28?style=for-the-badge\u0026logo=firebase\" alt=\"Firebase Badge\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://nodejs.org/en/\"\u003e\u003cimg src=\"https://img.shields.io/badge/Node.js-16.13.2-339933?style=for-the-badge\u0026logo=node.js\" alt=\"Node.js Badge\" /\u003e\u003c/a\u003e\n    \u003cbr\u003e\n    \u003ca href=\"https://github.com/scottgriv\"\u003e\u003cimg src=\"https://img.shields.io/badge/github-follow_me-181717?style=for-the-badge\u0026logo=github\u0026color=181717\" alt=\"GitHub Badge\" /\u003e\u003c/a\u003e\n    \u003ca href=\"mailto:scott.grivner@gmail.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/gmail-contact_me-EA4335?style=for-the-badge\u0026logo=gmail\" alt=\"Email Badge\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.buymeacoffee.com/scottgriv\"\u003e\u003cimg src=\"https://img.shields.io/badge/buy_me_a_coffee-support_me-FFDD00?style=for-the-badge\u0026logo=buymeacoffee\u0026color=FFDD00\" alt=\"BuyMeACoffee Badge\" /\u003e\u003c/a\u003e\n    \u003cbr\u003e\n    \u003ca href=\"https://prgportfolio.com\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/PRG-Bronze Project-CD7F32?style=for-the-badge\u0026logo=data:image/svg%2bxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iMjYuMDAwMDAwcHQiIGhlaWdodD0iMzQuMDAwMDAwcHQiIHZpZXdCb3g9IjAgMCAyNi4wMDAwMDAgMzQuMDAwMDAwIgogcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCI+Cgo8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwzNC4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiCmZpbGw9IiNDRDdGMzIiIHN0cm9rZT0ibm9uZSI+CjxwYXRoIGQ9Ik0xMiAzMjggYy04IC04IC0xMiAtNTEgLTEyIC0xMzUgMCAtMTA5IDIgLTEyNSAxOSAtMTQwIDQyIC0zOCA0OAotNDIgNTkgLTMxIDcgNyAxNyA2IDMxIC0xIDEzIC03IDIxIC04IDIxIC0yIDAgNiAyOCAxMSA2MyAxMyBsNjIgMyAwIDE1MCAwCjE1MCAtMTE1IDMgYy04MSAyIC0xMTkgLTEgLTEyOCAtMTB6IG0xMDIgLTc0IGMtNiAtMzMgLTUgLTM2IDE3IC0zMiAxOCAyIDIzCjggMjEgMjUgLTMgMjQgMTUgNDAgMzAgMjUgMTQgLTE0IC0xNyAtNTkgLTQ4IC02NiAtMjAgLTUgLTIzIC0xMSAtMTggLTMyIDYKLTIxIDMgLTI1IC0xMSAtMjIgLTE2IDIgLTE4IDEzIC0xOCA2NiAxIDc3IDAgNzIgMTggNzIgMTMgMCAxNSAtNyA5IC0zNnoKbTExNiAtMTY5IGMwIC0yMyAtMyAtMjUgLTQ5IC0yNSAtNDAgMCAtNTAgMyAtNTQgMjAgLTMgMTQgLTE0IDIwIC0zMiAyMCAtMTgKMCAtMjkgLTYgLTMyIC0yMCAtNyAtMjUgLTIzIC0yNiAtMjMgLTIgMCAyOSA4IDMyIDEwMiAzMiA4NyAwIDg4IDAgODggLTI1eiIvPgo8L2c+Cjwvc3ZnPgo=\" alt=\"Bronze\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n---------------\n\n\u003ch1 align=\"center\"\u003e🔥 Svelte Firebase Demo 🔥\u003c/h1\u003e\n\nA demo of app made using the **Svelte** JavaScript web framework and **Firebase Firestore** data storage service.\n\nThe **Three** main goals of this demo are to:\n- How to get started with Svelte (installing, creating a project, running a server, etc.)\n- Demonstrate how to integrate Firebase into a Svelte application.\n- Demonstrate how to use Firebase Firestore to add data through a Svelte web application.\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"./docs/images/demo.png\" style=\"width: 75%;\"/\u003e\n    \u003cbr\u003e\n    \u003ci\u003eApplication Preview\u003c/i\u003e\n\u003c/div\u003e\n\n-------\n\n## Table of Contents\n\n- [What is Svelte?](#what-is-svelte)\n- [What is Firebase?](#what-is-firebase)\n    - [Firestore](#firestore)\n    - [Authentication](#authentication)\n- [Getting Started](#getting-started)\n    - [Installation](#installation)\n    - [Usage](#usage)\n    - [Notes](#notes)\n- [Disclaimer](#disclaimer)\n- [Resources](#resources)\n- [License](#license)\n- [Credits](#credits)\n\n## What is Svelte?\n\nSvelte is a JavaScript framework for building user interfaces. It is similar to React and Vue in that it uses a virtual DOM and component-based architecture. However, unlike React and Vue, Svelte does not use a virtual DOM at runtime. Instead, Svelte compiles your code into highly efficient vanilla JavaScript code that updates the DOM directly. This means that Svelte apps are smaller and faster than apps built with other frameworks.\n\n## What is Firebase?\n\nFirebase is a platform that provides a variety of services for building web and mobile apps. The services used in this demo are Firestore and Authentication.\n\n### Firestore\n\nFirestore is a NoSQL database that stores data in documents. Documents are stored in collections and can be queried using the Firebase SDK. Firestore is a good choice for this demo because it is easy to set up and use, and it is free for small projects.\n\n### Authentication\n\nFirebase Authentication provides a variety of authentication methods, including email/password, Google, Facebook, Twitter, and GitHub. It also provides a simple way to manage user accounts and passwords. Authentication is a good choice for this demo because it is easy to set up and use, and it is free for small projects.\n\n## Getting Started\n\n### Installation\n\n1. Install [Node.js](https://nodejs.org/en/download/).\n2. Install Svlete CLI with `npm install -g svelte-cli`.\n3. Clone this repository.\n4. Run `npm install` in the root directory of the project.\n5. Install Firebase SDK in the root directory as well by running: `npm install firebase`.\n6. Setting up Firebase:\nHead to the Firebase Console:\n    1. Create a new project (I named mine `svelte-firebase-demo` for example)\n    2. Click on \"Add App\" and choose the \"Web\" option.\n    3. Give your app a name and register it (I named mine `svelte-firebase_demo` for example).\n    4. You'll then be provided with a configuration object that looks something like:\n    ```javascript\n    var firebaseConfig = {\n    apiKey: \"YOUR_API_KEY\",\n    authDomain: \"YOUR_PROJECT_ID.firebaseapp.com\",\n    databaseURL: \"https://YOUR_PROJECT_ID.firebaseio.com\",\n    projectId: \"YOUR_PROJECT_ID\",\n    storageBucket: \"YOUR_PROJECT_ID.appspot.com\",\n    messagingSenderId: \"YOUR_MESSAGING_SENDER_ID\",\n    appId: \"YOUR_APP_ID\"\n    };\n    ```\n7. Integrate Firebase in Svelte:\nFirebase gets initlized in the `src/firebase.js` file but it needs the `firebaseConfig` configuration object from the Firebase console. Create a new file called `src/firebaseConfig.js`. and paste the `firebaseConfig` variable in the file from the previous step. Be sure to add the word `export` before the `firebaseConfig` variable in `src/firebaseConfig.js` so that it can be imported in `src/firebase.js`.\n8. Create a collection called `firebase_demo` and add a document with the following fields:\n    - `messageId` (number)\n    - `message` (string)\n    \n    \u003cbr\u003e\n    \u003cdiv align=\"center\"\u003e\n        \u003ca href=\"\" target=\"_blank\"\u003e\n            \u003cimg src=\"./docs/images/collection_document.png\" style=\"width: 75%;\"/\u003e\n        \u003c/a\u003e\n        \u003cbr\u003e\n        \u003ci\u003eExample Document Structure.\u003c/i\u003e\n    \u003c/div\u003e\n    \u003cbr\u003e\n\n    - For your document ID, you can use the `messageId` field or you can use the auto-generated ID (Auto-ID) feature.\n    - Feel free to create your own collection and document structure, just be sure to update the code in `src/AddData.svelte` to reflect your collection name and document structure accordingly.\n9. Run server with `npm run dev` and navigate to [localhost:8080](http://localhost:8080).\n10. Firebase Authentication (optional):\nIf you wish to use Firebase authentication, you need to go to the Firebase Console, navigate to the Authentication section, and enable the desired sign-in methods.\n\n### Usage\n\n- Enter a `messageId` (any number, this is not a key in the database) and `message` (any text) in the input fields and click the \"Add Data\" button to add data to the Firestore database.\n- Log into Firebase and navigate to the Firestore section to see the data you added.\n\n### Notes\n\nFor more advance Svelte applications (outside of a simple Single Page Applications - SPA), I'd suggest using [SvelteKit](https://kit.svelte.dev/). SvelteKit is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing. \n\nAnother good resource for Svelte and Firebase is [SvelteFire](https://github.com/codediodeio/sveltefire). SvelteFire is a collection of official Svelte bindings for Firebase. It includes bindings for Firebase Authentication, Cloud Firestore, Realtime Database, Storage, and Cloud Messaging. It also includes a collection of utilities for working with Firebase and Svelte.\n\n## Disclaimer\n\nThis application serves as a simple example of how to integrate Firebase into a Svelte application. It is not intended to be a complete application, but rather a starting point for building your own application. Feel free to modify it as you see fit.\n\n## Resources\n\n- [Svelte](https://svelte.dev/) - The official Svelte website.\n- [Firebase](https://firebase.google.com/) - The official Firebase website.\n- [Node.js](https://nodejs.org/en/) - Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine (used by Svelte for development).\n- [Rollup](https://rollupjs.org) - Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application (used by Svelte for building).\n- [degit](https://github.com/Rich-Harris/degit) - degit is a scaffolding tool that allows you to clone a git repository without the entire git history (used by Svelte for project creation).\n- [sirv](https://github.com/lukeed/sirv) - sirv is a lightweight server that allows you to serve static files (used by Svelte for development).\n- [Visual Studio Code](https://code.visualstudio.com/) - VS Code is a free code editor from Microsoft.\n- [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) - Svelte for VS Code is an extension that provides syntax highlighting, code completion, and other features for Svelte.\n- [SvelteKit](https://kit.svelte.dev/) - SvelteKit is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.\n- [SvelteFire](https://github.com/codediodeio/sveltefire) - SvelteFire is a collection of official Svelte bindings for Firebase. It includes bindings for Firebase Authentication, Cloud Firestore, Realtime Database, Storage, and Cloud Messaging. It also includes a collection of utilities for working with Firebase and Svelte.\n\n## License\n\nThis project is released under the terms of the **MIT License**, which permits use, modification, and distribution of the code, subject to the conditions outlined in the license.\n- The [MIT License](https://choosealicense.com/licenses/mit/) provides certain freedoms while preserving rights of attribution to the original creators.\n- For more details, see the [LICENSE](LICENSE) file in this repository. in this repository.\n\n## Credits\n\n**Author:** [Scott Grivner](https://github.com/scottgriv) \u003cbr\u003e\n**Email:** [scott.grivner@gmail.com](mailto:scott.grivner@gmail.com) \u003cbr\u003e\n**Website:** [linktr.ee/scottgriv](https://www.linktr.ee/scottgriv) \u003cbr\u003e\n**Reference:** [Main Branch](https://github.com/scottgriv/svelte-firebase_demo) \u003cbr\u003e\n\n---------------\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://linktr.ee/scottgriv\" target=\"_blank\"\u003e\n        \u003cimg src=\"./docs/images/footer.png\" width=\"100\" height=\"100\"/\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n\u003c!-- End README --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscottgriv%2Fsvelte-firebase_demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscottgriv%2Fsvelte-firebase_demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscottgriv%2Fsvelte-firebase_demo/lists"}