Vanilla Javascript CRUD and Firebase
Posted on December 31, 2023 (Last modified on October 11, 2024) • 3 min read • 602 wordsVideo is in Swedish
In this article, we’ll explore how to build a full-stack CRUD (Create, Read, Update, Delete) application using vanilla JavaScript and Firebase. We’ll cover the basics of Firebase Realtime Database and how to interact with it using JavaScript.
Firebase is a cloud-based platform developed by Google that provides a range of services for building web and mobile applications. One of its key features is the Realtime Database, which allows you to store and synchronize data in real-time across all connected devices.
To get started, create a new project in Firebase and enable the Realtime Database. You can do this by navigating to the Firebase console, clicking on “Create a project”, and selecting “Realtime Database” as the database type.
Next, create a new HTML file for your application and add the following code:
<!DOCTYPE html>
<html>
<head>
<title>CRUD App</title>
</head>
<body>
<h1>CRUD App</h1>
<form id="create-form">
<input type="text" id="name" placeholder="Name">
<input type="text" id="email" placeholder="Email">
<button type="submit">Create</button>
</form>
<ul id="list"></ul>
<script src="script.js"></script>
</body>
</html>This code sets up a basic HTML structure for our application, including a form for creating new data and an unordered list for displaying the data.
In the script.js file, we’ll write the JavaScript code that interacts with the Firebase Realtime Database. We’ll start by setting up a reference to the database:
const db = firebase.database();Next, we’ll create a function to handle the creation of new data:
function createData(name, email) {
const data = { name, email };
db.ref('users').push(data);
}This function takes two arguments, name and email, and creates a new object with those properties. It then pushes that object to the /users node in the Realtime Database using the push() method.
We’ll also create a function to read data from the database:
function readData() {
db.ref('users').on('value', (snapshot) => {
const data = snapshot.val();
const listHTML = '';
Object.keys(data).forEach((key) => {
listHTML += `<li>${data[key].name} (${data[key].email})</li>`;
});
document.getElementById('list').innerHTML = listHTML;
});
}This function uses the on() method to listen for changes to the /users node in the Realtime Database. When data is updated, it retrieves the new data and creates an HTML string to display the data in the unordered list.
We’ll also create functions to update and delete data:
function updateData(key, name, email) {
db.ref(`users/${key}`).update({ name, email });
}
function deleteData(key) {
db.ref(`users/${key}`).remove();
}These functions use the update() and remove() methods to modify or delete data in the Realtime Database.
Now that we have our JavaScript code set up, let’s put it all together. We’ll add event listeners to the form submission and button clicks:
document.getElementById('create-form').addEventListener('submit', (e) => {
e.preventDefault();
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
createData(name, email);
});
document.getElementById('list').addEventListener('click', (e) => {
if (e.target.tagName === 'LI') {
const key = e.target.textContent.split('(')[0].trim();
updateData(key, prompt('Enter new name'), prompt('Enter new email'));
}
});This code adds event listeners to the form submission and button clicks. When the form is submitted, it calls the createData() function with the form values. When a list item is clicked, it prompts the user for new data and calls the updateData() function.
In this article, we’ve built a full-stack CRUD application using vanilla JavaScript and Firebase Realtime Database. We’ve covered the basics of Firebase and how to interact with it using JavaScript. With this code, you can create, read, update, and delete data in real-time across all connected devices. This is just the beginning of what’s possible with Firebase and JavaScript – we hope you’ll continue to explore and build amazing applications!
Swedish