Building a Personal Diary App with React and Firebase: A Complete Journey.

Elvis24-tech — Sun, 27 Apr 2025 18:49:20 +0000

Introduction

In today's digital world, journaling has evolved from pen-and-paper notebooks to secure, cloud-based applications. In this blog post, I'll walk you through my journey of building a Personal Diary App using React.js for the frontend and Firebase for backend services, including authentication and database management.

Features of the Diary App

User Authentication
CRUD Operations for Diary Entries
Dark Mode Toggle
Real-Time Data Sync
Responsive Design

Tech Stack

Frontend: React.js, CSS
Backend: Firebase (Authentication + Firestore)
Date Handling: date-fns
State Management: React Hooks

Development Process

Setting Up Firebase
Before diving into React, I configured Firebase:
Created a Firebase project
Set up Firestore Database with security rules
Enabled Email/Password Authentication
Building the React App
Authentication Flow
Used createUserWithEmailAndPassword and signInWithEmailAndPassword
Managed user state with onAuthStateChanged

Challenges & Solutions
Buttons Not Responding on First Click
Entries Not Displaying After Adding
Firebase Permission Errors

Future Improvements
Add rich text editing
Implement tags/categories for entries
Enable image uploads with Firebase Storage
Add offline support with Firestore persistence

Conclusion

Building this diary app was a fantastic learning experience in React + Firebase integration. It reinforced the importance of proper state management, error handling, and performance optimization.
If you're looking to build a similar project, I highly recommend this stack for its simplicity and scalability.

MY FAST-FOOD WEBSITE BLOG

Elvis24-tech — Thu, 27 Mar 2025 15:46:21 +0000

Dev.to is a great community for developers that can help make any project easier.

Before diving into the code, it’s important to plan the structure of your fast food website. For mine, I focused on these essential components:

Menu Section: Display food items, categories
Contact Information: Give customers easy ways to contact the restaurant.

I decided to use HTML, CSS, and Javascript for the designing of the webpage.

Once all the features were in place, I deployed the website through GitHub for it to be live.`

Below is the HTML code
<!DOCTYPE html>

Fresh Fast-foods Website

Fresh-Fast Foods App

Welcome To Our Page

Home
About
Menu
Contact

We Prepare and Deliver our Fresh Meals

Have you ever wondered on how you could get fresh,hot,yummy and delicious food at the place of your own comfort?Well,you don't have to worry about that anymore!We prepare all kinds of foods depending on the orders made by our customers and deliver them to their workplaces,homeplaces or wherever they are currently located.

About Us

We are a group of local chefs that are trying to compete with the restaurant indusry as we believe we have the potential to do better.

Our Menu

Select a food category: Beef Chicken Vegetarian Seafood Pasta

<section id="contact">
    <h2>Contact Us</h2>
    <p>Place your order here by dialing the number below</p>
    <h3>0732353764 / 0774506579</h3>
</section>

Thanks For Visiting Our Page!

Below is the CSS code`body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: whitesmoke;
}

header {
background-color: chocolate;
padding: 20px;
color: white;
text-align: center;
}

header nav ul {
list-style-type: none;
padding: 0;
}

header nav ul li {
display: inline;
margin-right: 15px;
}

header nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
}

home {

text-align: center;

}

about {

text-align: center;

}

menu {

padding: 20px;
text-align: center;

}

food-items {

display: flex;
justify-content: space-around;
flex-wrap: wrap;

}

.food-item {
background-color: white;
border: 1px solid #ddd;
margin: 10px;
padding: 15px;
width: 200px;
text-align: center;
border-radius: 8px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.food-item img {
width: 100%;
border-radius: 8px;
}

footer {
background-color: grey;
color: white;
text-align: center;

}
Below is the Index.js codeconst API_URL = 'http://localhost:3000/foods';

function fetchFoodItems() {
const category = document.getElementById('category').value;
console.log(Fetching food items for category: ${category});

fetch(`${API_URL}?category=${category}`)
    .then(response => response.json())
    .then(data => {
        console.log('Fetched food data:', data);  
        const foodItemsContainer = document.getElementById('food-items');
        foodItemsContainer.innerHTML = '';
        if (data.length === 0) {
            foodItemsContainer.innerHTML = `<p>No items found for this category.</p>`;
        } else {
            data.forEach(food => {
                const foodItemDiv = document.createElement('div');
                foodItemDiv.classList.add('food-item');
                foodItemDiv.innerHTML = `
                    <img src="${food.image}" alt="${food.name}">
                    <h3>${food.name}</h3>
                `;
                foodItemsContainer.appendChild(foodItemDiv);
            });
        }
    })
    .catch(error => {
        console.error('Error fetching food items:', error);
    });

}

document.getElementById('category').addEventListener('change', fetchFoodItems);

Below is the db.json code`{
"foods": [
{
"id": 1,
"name": "Beef Burger",
"category": "Beef",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSyaMhdk3xX5HR_uLh5LY6FzKhaE138Xow6oA&s",
"description": "A delicious beef burger."
},
{
"id": 2,
"name": "Chicken Sandwich",
"category": "Chicken",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWHx2BO0NsPumEnOmQoJba0hSbKS4PdSYe-w&s",
"description": "A tasty chicken sandwich."
},
{
"id": 3,
"name": "Vegetarian Pizza",
"category": "Vegetarian",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzDXUJ38GqbEnLh0wJbXfEz2tV6thEpGHCdw&s",
"description": "A fresh vegetarian pizza."
},

{
  "id": 4,
  "name": "Shrimp Pasta",
  "category": "Seafood",
  "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTSWNdWIH2seFK8YJhwggcsCHkNGpYOMKuVw&s",
  "description": "A creamy shrimp pasta."
},
{
  "id": 5,
  "name": "Grilled Salmon",
  "category": "Seafood",
  "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1EMVBqSZJkKeVkyNP6vEXwYDTp_bhGsjRzA&s",
  "description": "Grilled salmon with fresh herbs."
},
{
  "id": 6,
  "name": "Penne Arrabbiata",
  "category": "Pasta",
  "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT25Trkh6444t3HiaaoDfJrxEh2kMncLXq5sA&s",
  "description": "Penne pasta in a spicy tomato sauce."
},
{
  "id": 7,
  "name": "Lasagna",
  "category": "Pasta",
  "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRJblMsAcqpr1tf8JYIwiRVoJwx1L_GwnZqVw&s",
  "description": "Classic Italian lasagna."
}

]
}
`

DEV Community: Elvis24-tech