Skip to content

Latest commit

 

History

History
85 lines (60 loc) · 3.64 KB

README.md

File metadata and controls

85 lines (60 loc) · 3.64 KB
Raw


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 - Provides Firebase services like authentication, database, and cloud storage for integrating backend functionality.
  • react-bootstrap - A popular UI framework for React that offers pre-built, responsive components based on Bootstrap.
  • react-phone-number-input - A customizable input field for handling phone numbers with validation and international number formatting support.
  • react-router & react-router-dom - Manages routing in React apps, enabling navigation between different views or pages.
  • 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