├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public └── index.html └── src ├── App.css ├── App.js ├── firebase.js ├── index.css └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Firebase CRUD 2 | 3 | **Version 1.0.0** 4 | 5 | Description: 6 | The goal of this project is to educate students how to use the new Google Firebase Database to Create, Read/Retrieve, Update, and Delete data. This is critical for Front-End developers because few will learn SQL in their entry-level positions. 7 | 8 | 9 | ## License & copyright 10 | 11 | © Jay B. Crisostomo 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "crud-firebase", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "firebase": "^9.6.1", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "5.0.0", 13 | "uid": "^2.0.0", 14 | "web-vitals": "^2.1.2" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jayisback11/firebase-crud/82e75d69882320c2e5c0f204ad4fb4afb99c0a0d/src/App.css -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import { db } from "./firebase"; 3 | import { uid } from "uid"; 4 | import { set, ref, onValue, remove, update } from "firebase/database"; 5 | import { useState, useEffect } from "react"; 6 | 7 | function App() { 8 | const [todo, setTodo] = useState(""); 9 | const [todos, setTodos] = useState([]); 10 | const [isEdit, setIsEdit] = useState(false); 11 | const [tempUuid, setTempUuid] = useState(""); 12 | 13 | const handleTodoChange = (e) => { 14 | setTodo(e.target.value); 15 | }; 16 | 17 | //read 18 | useEffect(() => { 19 | onValue(ref(db), (snapshot) => { 20 | setTodos([]); 21 | const data = snapshot.val(); 22 | if (data !== null) { 23 | Object.values(data).map((todo) => { 24 | setTodos((oldArray) => [...oldArray, todo]); 25 | }); 26 | } 27 | }); 28 | }, []); 29 | 30 | //write 31 | const writeToDatabase = () => { 32 | const uuid = uid(); 33 | set(ref(db, `/${uuid}`), { 34 | todo, 35 | uuid, 36 | }); 37 | 38 | setTodo(""); 39 | }; 40 | 41 | //update 42 | const handleUpdate = (todo) => { 43 | setIsEdit(true); 44 | setTempUuid(todo.uuid); 45 | setTodo(todo.todo); 46 | }; 47 | 48 | const handleSubmitChange = () => { 49 | update(ref(db, `/${tempUuid}`), { 50 | todo, 51 | uuid: tempUuid, 52 | }); 53 | 54 | setTodo(""); 55 | setIsEdit(false); 56 | }; 57 | 58 | //delete 59 | const handleDelete = (todo) => { 60 | remove(ref(db, `/${todo.uuid}`)); 61 | }; 62 | 63 | return ( 64 |
65 | 66 | {isEdit ? ( 67 | <> 68 | 69 | 77 | 78 | ) : ( 79 | 80 | )} 81 | {todos.map((todo) => ( 82 | <> 83 |

{todo.todo}

84 | 85 | 86 | 87 | ))} 88 |
89 | ); 90 | } 91 | 92 | export default App; 93 | 94 | // npm install firebase 95 | // npm install uid 96 | -------------------------------------------------------------------------------- /src/firebase.js: -------------------------------------------------------------------------------- 1 | import { initializeApp } from "firebase/app"; 2 | import { getDatabase } from "firebase/database"; 3 | 4 | const firebaseConfig = { 5 | apiKey: "AIzaSyBPJl-4OaZV_LYF8S-pt7ljyCOK2eei450", 6 | authDomain: "fb-crud-957dc.firebaseapp.com", 7 | projectId: "fb-crud-957dc", 8 | storageBucket: "fb-crud-957dc.appspot.com", 9 | messagingSenderId: "641135050863", 10 | appId: "1:641135050863:web:f8af296975112ff8bd4d9a", 11 | }; 12 | 13 | const app = initializeApp(firebaseConfig); 14 | export const db = getDatabase(app); 15 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jayisback11/firebase-crud/82e75d69882320c2e5c0f204ad4fb4afb99c0a0d/src/index.css -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | --------------------------------------------------------------------------------