https://github.com/awran5/react-firestore-crud-app-ts

A simple CRUD (Create, Read, Update and Delete) React App using Hooks, Cloud Firestore and Bootstrap for the UI.
https://github.com/awran5/react-firestore-crud-app-ts

bootstrap crud crud-application firebase firebase-database firestore react react-hooks typescript

Last synced: 15 days ago
JSON representation

A simple CRUD (Create, Read, Update and Delete) React App using Hooks, Cloud Firestore and Bootstrap for the UI.

• Host: GitHub
• URL: https://github.com/awran5/react-firestore-crud-app-ts
• Owner: awran5
• License: mit
• Created: 2020-11-16T21:51:36.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-09-14T10:50:31.000Z (over 3 years ago)
• Last Synced: 2024-10-12T10:09:44.297Z (3 months ago)
• Topics: bootstrap, crud, crud-application, firebase, firebase-database, firestore, react, react-hooks, typescript
• Language: TypeScript
• Homepage: https://react-firestore-crud-app.vercel.app/
• Size: 982 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React TypeScript Firestore CRUD App

A simple CRUD (`Create`, `Read`, `Update`, `Delete`) React App using Hooks, Cloud [Firestroe](https://firebase.google.com/docs/firestore) and [react-bootstrap](https://react-bootstrap.github.io/) for the UI.

![screenshot](./screenshot.gif)

### Instructions

1. Download or clone the repo:

```

https://github.com/awran5/react-firestore-crud-app-ts.git

```

2. Create a new [firebase](https://console.firebase.google.com/) project or use your existing one and enable **Cloud Firestore** database.

3. Create a new `.env.local` file inside the main app folder and copy/paste your firebase project `configuration`.

```bash

  REACT_APP_FIREBASE_API_KEY = xxxxxxxxxxxxxxxxxxxxxx

  REACT_APP_FIREBASE_AUTH_DOMAIN = xxxxxxxxxxxxxxxxxxxxxx

  REACT_APP_FIREBASE_PROJECT_ID = xxxxxxxxxxxxxxxxxxxxxx

  REACT_APP_FIREBASE_STORAGE_BUCKET = xxxxxxxxxxxxxxxxxxxxxx

  REACT_APP_FIREBASE_MESSAGING_SENDER_ID = xxxxxxxxxxxxxxxxxxxxxx

  REACT_APP_FIREBASE_APP_ID = xxxxxxxxxxxxxxxxxxxxxx

```

### Changelog - 07/2021

- Update dependencies

- Removed: fontawesome

- cleaning up unnecessary code

### [Live Example](https://react-firestore-crud-app.vercel.app/)