{"id":21011282,"url":"https://github.com/andrase/crud-auth-and-fire","last_synced_at":"2026-04-12T17:11:30.761Z","repository":{"id":41355558,"uuid":"484553267","full_name":"AndrasE/crud-auth-and-fire","owner":"AndrasE","description":"React crud application with Firestore database \u0026 \u0026 Firebase/OAuth options with Protected Routes","archived":false,"fork":false,"pushed_at":"2024-10-19T08:30:39.000Z","size":3948,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-01-20T11:22:13.568Z","etag":null,"topics":["authentication","crud-application","firebase","firebase-auth","firestore-database","protected-routes","reactjs"],"latest_commit_sha":null,"homepage":"https://crud-auth.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/AndrasE.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":"2022-04-22T19:45:52.000Z","updated_at":"2024-10-19T08:30:42.000Z","dependencies_parsed_at":"2024-10-19T23:02:20.238Z","dependency_job_id":"8b160e8f-66ee-4aa0-939c-cecc5dc54b7a","html_url":"https://github.com/AndrasE/crud-auth-and-fire","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/AndrasE%2Fcrud-auth-and-fire","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrasE%2Fcrud-auth-and-fire/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrasE%2Fcrud-auth-and-fire/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrasE%2Fcrud-auth-and-fire/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrasE","download_url":"https://codeload.github.com/AndrasE/crud-auth-and-fire/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243438003,"owners_count":20290863,"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":["authentication","crud-application","firebase","firebase-auth","firestore-database","protected-routes","reactjs"],"created_at":"2024-11-19T09:27:29.008Z","updated_at":"2025-10-17T08:38:45.701Z","avatar_url":"https://github.com/AndrasE.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch3 align=\"center\"\u003e\n  \u003ca href=\"https://crud-auth.netlify.app/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n  \u003cimg src=\"https://github.com/AndrasE/raw-readme/blob/e0ba0d38fc6f2bb201983bbc4986e59f1ae946f2/logo/crud-readme-img.png\" width=\"150\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n  React crud application with Firestore database\n  \u003cbr\u003e\n \u0026 Firebase/OAuth options with Protected Routes\n\u003c/h3\u003e\n\n## Hello there 👋\n\nThis project demonstrates a simple CRUD (Create, Read, Update, Delete) React application with a backend powered by Firebase. I chose Firebase for its ease of integration and robust features, allowing me to focus on the core functionality while leveraging its capabilities.\n\nAfter carefully planning the project's requirements, I implemented the CRUD functionality using React components and Firebase's Realtime Database. I then integrated Firebase authentication (Google, Facebook, OTP) to secure the application and added protected routes to restrict access to unauthorized users. The app is designed with React Bootstrap to ensure a responsive and user-friendly interface.\n\nFor a more in-depth breakdown of the project's evolution and features, and practical examples, please visit the app and click on the logo. You will find both an About and About More section.\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"https://github.com/AndrasE/raw-readme/blob/91c885d64a6cfd8a82f56dccd0ab2e57ebefe4fb/thumbs/crud_1.png\" width=\"220\"\u003e\n\u003cimg src=\"https://github.com/AndrasE/raw-readme/blob/91c885d64a6cfd8a82f56dccd0ab2e57ebefe4fb/thumbs/crud_2.png\" width=\"220\"\u003e\n\u003cimg src=\"https://github.com/AndrasE/raw-readme/blob/91c885d64a6cfd8a82f56dccd0ab2e57ebefe4fb/thumbs/crud_3.png\" width=\"220\"\u003e\n\u003c/div\u003e\n\n### Key Features\n\n- **Authentication** - Implements user authentication using Firebase, allowing users to sign in via Google, Facebook, or by phone using one-time password texts.\n- **Protected Routes** - Restricts access to certain routes based on user authentication, preventing unauthorized access to sensitive data.\n- **Context Provider** - Utilizes a context provider to manage user authentication state, ensuring consistent access across the application.\n\n### Packadges used\n\n- **[firebase](https://www.npmjs.com/package/react-firebase)** - Provides Firebase services like authentication, database, and cloud storage for integrating backend functionality.\n- **[react-bootstrap](https://react-bootstrap.netlify.app/)** - A popular UI framework for React that offers pre-built, responsive components based on Bootstrap.\n- **[react-phone-number-input](https://www.npmjs.com/package/react-phone-number-input)** - A customizable input field for handling phone numbers with validation and international number formatting support.\n- **[react-router \u0026 react-router-dom](https://reactrouter.com/en/main)** - Manages routing in React apps, enabling navigation between different views or pages.\n- **[react-gist](https://www.npmjs.com/package/react-gist)** - Allows to embed GitHub Gists (code snippets) directly into React components.\n  \n## Run 🚀\n\nThese instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.\n\nStart with cloning this repo on your local machine via cli or github-desktop:\n\n`\n$ git clone https://github.com/AndrasE/crud-auth-and-fire\n$ cd PROJECTNAME\n`\n\nTo install and set up the library, run:\n\n`\n$ npm install -S myLib\n`\n\nOr if you prefer using Yarn:\n\n`\n$ yarn add --dev myLib\n`\n\nAdd your own credentials:\n\n`\nedit firebase-config.js or add own .env\nsetup own google and facebook Apis\n`\n\nServing the app:\n\n`\n$ npm start\n`\n\nRunning the tests:\n\n`\n$ npm test\n`\n\nBuilding a distribution version:\n\n`\n$ npm run build\n`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrase%2Fcrud-auth-and-fire","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrase%2Fcrud-auth-and-fire","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrase%2Fcrud-auth-and-fire/lists"}