ASPCode.net logo
  • Home 
  • Blogs 
  • Tags 
Blog
  1. Home
  2. Articles
  3. Vanilla Javascript CRUD and Firebase

Vanilla Javascript CRUD and Firebase

Posted on December 31, 2023  (Last modified on May 26, 2025) • 3 min read • 602 words
Java
 
Frontend
 
Java
 
Frontend
 
Share via
ASPCode.net
Link copied to clipboard

Video is in Swedish

On this page
  • Building a Full-Stack CRUD Application with Vanilla JavaScript and Firebase
  • What is Firebase?
  • Setting up the Project
  • JavaScript Code
  • Putting it all Together
  • Conclusion
  • Video
  • Sourcecode

Building a Full-Stack CRUD Application with Vanilla JavaScript and Firebase  

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.

What is Firebase?  

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.

Setting up the Project  

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.

JavaScript Code  

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.

Putting it all Together  

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.

Conclusion  

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!

Video  

Swedish

Sourcecode  

Sourcecode
 
 Typescript and Javascript - an introduction
Consuming APIer with JS - Fetch 
On this page:
  • Building a Full-Stack CRUD Application with Vanilla JavaScript and Firebase
  • What is Firebase?
  • Setting up the Project
  • JavaScript Code
  • Putting it all Together
  • Conclusion
  • Video
  • Sourcecode
Follow me

I code in Java, C#, Golang, SQL and more

     
© 2024 Systementor AB
ASPCode.net
Code copied to clipboard