Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andrase/crud-auth-and-fire
React crud application with Firestore database & & Firebase/OAuth options with Protected Routes
https://github.com/andrase/crud-auth-and-fire
authentication crud-application firebase firebase-auth firestore-database protected-routes reactjs
Last synced: about 21 hours ago
JSON representation
React crud application with Firestore database & & Firebase/OAuth options with Protected Routes
- Host: GitHub
- URL: https://github.com/andrase/crud-auth-and-fire
- Owner: AndrasE
- Created: 2022-04-22T19:45:52.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-19T08:30:39.000Z (about 1 month ago)
- Last Synced: 2024-10-20T03:30:47.523Z (about 1 month ago)
- Topics: authentication, crud-application, firebase, firebase-auth, firestore-database, protected-routes, reactjs
- Language: JavaScript
- Homepage: https://crud-auth.netlify.app/
- Size: 3.77 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
React crud application with Firestore database
& Firebase/OAuth options with Protected Routes## Hello there 👋
This 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.
After 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.
For 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.
### Key Features
- **Authentication** - Implements user authentication using Firebase, allowing users to sign in via Google, Facebook, or by phone using one-time password texts.
- **Protected Routes** - Restricts access to certain routes based on user authentication, preventing unauthorized access to sensitive data.
- **Context Provider** - Utilizes a context provider to manage user authentication state, ensuring consistent access across the application.### Packadges used
- **[firebase](https://www.npmjs.com/package/react-firebase)** - Provides Firebase services like authentication, database, and cloud storage for integrating backend functionality.
- **[react-bootstrap](https://react-bootstrap.netlify.app/)** - A popular UI framework for React that offers pre-built, responsive components based on Bootstrap.
- **[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.
- **[react-router & react-router-dom](https://reactrouter.com/en/main)** - Manages routing in React apps, enabling navigation between different views or pages.
- **[react-gist](https://www.npmjs.com/package/react-gist)** - Allows to embed GitHub Gists (code snippets) directly into React components.
## Run 🚀These 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.
Start with cloning this repo on your local machine via cli or github-desktop:
`
$ git clone https://github.com/AndrasE/crud-auth-and-fire
$ cd PROJECTNAME
`To install and set up the library, run:
`
$ npm install -S myLib
`Or if you prefer using Yarn:
`
$ yarn add --dev myLib
`Add your own credentials:
`
edit firebase-config.js or add own .env
setup own google and facebook Apis
`Serving the app:
`
$ npm start
`Running the tests:
`
$ npm test
`Building a distribution version:
`
$ npm run build
`