A TODO app helps you manage tasks efficiently. In this tutorial, you'll learn how to build a fully functional TODO app using Firebase. We'll use Firebase Firestore to store tasks and Firebase Hosting to deploy the app.
🧰 Tools & Technologies
- HTML, CSS, JavaScript
- Firebase Firestore (Database)
- Firebase Hosting
🔧 Step 1: Set Up Firebase Project
- Go to Firebase Console.
- Create a new project (No Google Analytics needed).
- Go to Firestore Database > Click Create Database.
- Go to Project Settings > Click Add App > Choose Web.
- Copy your Firebase config. We’ll use it in our JS file.
📁 Step 2: Project Structure
Create the following files:
- index.html
- style.css
- app.js
📄 Step 3: index.html
Paste the following into index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TODO App</title>
<link rel="stylesheet" href="style.css">
<script src="https://www.gstatic.com/firebasejs/10.3.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.3.0/firebase-firestore.js"></script>
</head>
<body>
<div class="container">
<h1>My TODO App</h1>
<input type="text" id="taskInput" placeholder="Add a task..." />
<button onclick="addTask()">Add</button>
<ul id="taskList"></ul>
</div>
<script src="app.js"></script>
</body>
</html>
🎨 Step 4: style.css
Add the following styling:
body {
font-family: Arial;
display: flex;
justify-content: center;
margin-top: 50px;
background-color: #f5f5f5;
}
.container {
background: #fff;
padding: 30px;
border-radius: 10px;
}
input {
padding: 10px;
width: 60%;
}
button {
padding: 10px;
margin-left: 10px;
}
li {
margin-top: 10px;
}
⚙️ Step 5: Firebase Configuration & app.js
Paste your Firebase config in the following script:
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_BUCKET",
messagingSenderId: "YOUR_ID",
appId: "YOUR_APP_ID"
};
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
const taskInput = document.getElementById("taskInput");
const taskList = document.getElementById("taskList");
function addTask() {
const task = taskInput.value.trim();
if (task) {
db.collection("todos").add({ text: task });
taskInput.value = "";
}
}
db.collection("todos").onSnapshot(snapshot => {
taskList.innerHTML = "";
snapshot.forEach(doc => {
const li = document.createElement("li");
li.textContent = doc.data().text;
li.onclick = () => db.collection("todos").doc(doc.id).delete();
taskList.appendChild(li);
});
});
🌍 Step 6: Deploy Using Firebase Hosting
- Install Firebase CLI:
npm install -g firebase-tools - Login to Firebase:
firebase login - Init project:
firebase init→ choosehosting - Build folder: select current directory, set
publicas your folder - Deploy:
firebase deploy
✅ Final Thoughts
Congratulations! You've built and deployed a fully functional TODO app using Firebase.
Post a Comment
0Comments