Forem: Jesus Esquer

The Feynman Technique - Explaining Code Quality to My 10-Year-Old Self

Jesus Esquer — Wed, 26 Mar 2025 12:08:14 +0000

Recently, I’ve been learning to program in Python to improve my AI skills, as most AI libraries are Python-friendly. Deep down, I’ve always been curious about Python because of its flexibility and history. As part of this journey, I’ve been researching scientifically backed learning techniques, including the Feynman Technique.

This technique, developed by Nobel Prize-winning physicist Richard Feynman, focuses on breaking down complex ideas by explaining them in plain language. It has four core steps:

Identify the concept.
Teach it to a child (or pretend to).
Identify gaps in your understanding.
Review & simplify.

I decided to put this technique to the test by explaining code quality to my 10-year-old, always-dreaming self. Code quality can be subjective, but three main pillars are universally important: complexity, errors, and readability.

Complexity: How Complicated Is Your Code?

Complexity measures how intricate the code logic is—things like decision paths and dependencies. Some key metrics include:

Cyclomatic Complexity: Counts the number of independent paths in the code (loops, conditionals).
Cognitive Complexity: Measures how hard it is for a human to understand the logic.
Nested Layers: Tracks how deep loops and conditionals go.

Errors: What Can Go Wrong?

Errors represent different types of issues that break your code. Here are the most common ones:

Syntax Errors: When code breaks the language's rules (e.g., missing semicolons, brackets, or incorrect indentation).
Logical Errors: When the logic is incorrect, leading to unexpected outputs despite the code running.
Runtime Errors: Issues encountered during execution, like division by zero or null pointer references.
Time Limit Exceeded: When code takes too long to execute, often due to inefficient algorithms.

Readability: How Easy Is It to Understand?

Readability determines how simple it is for others (or future you) to understand the intent of your code. Some key factors:

Naming: calculate_order_total() vs. calc()—descriptive names matter!
Formatting: Consistent indentation and whitespace improve clarity.
Structure: Modular functions are better than one giant block of code.
Comments: Explain the why, not just the what.

Complexity vs. Readability: What’s the Difference?

At first, I struggled to distinguish between complexity and readability—they seemed like the same thing. But this table helped me clarify:

Aspect	Code Complexity	Code Readability
Focus	Structural/logical intricacy	Human comprehension
Primary Concern	Maintainability/testing difficulty	Collaborative understanding
Measurement	Quantitative (cyclomatic score)	Qualitative (style adherence)
Tools	SonarQube, CodeClimate	Linters (flake8, pylint)
Optimization	Refactor into smaller functions	Improve naming/formatting

In short, readability is for humans, while complexity is about code structure.

Explaining Code Quality Using My Childhood Bike

Now, how do I explain all this to a hyperactive 10-year-old version of myself? If I start talking about "code complexity," he’ll probably throw something at me. So, let’s use something I loved as a kid—my bike.

Errors: The Flat Tire Problem

One Sunday, I woke up excited for a bike ride, only to find a flat tire. Bummer! I had to fix it (with my dad’s help) before I could ride again.

A flat tire is like a code error—when something is broken, the bike (or program) won’t work properly.

Complexity: The Rusty Chain Struggle

I loved my bike, but I didn’t always take care of it. I left it outside in the rain, dropped it on the ground instead of using the kickstand, and only washed it when my dad was washing his car. Over time, the chain rusted, making pedaling much harder.

This is just like code complexity—if a program has too many nested loops or convoluted logic, it makes the computer work harder.

Readability: Sticky Handlebars & Messy Code

After playing in the dirt or eating candy, my bike’s handlebars would get sticky, making it hard to steer. If I had cleaned them regularly, I wouldn’t have struggled!

The same applies to code readability. If your code is a mess, with unclear variable names (num instead of clientPhoneNumber), future programmers—including future you—will struggle to understand it.

Final Thoughts: Teaching to Learn

I enjoyed this exercise and plan to try it with my kids. Teaching—whether to children or adults—helps cement concepts in our own brains. Associating ideas with real-world objects makes learning easier and more fun.

If you want to learn more about Feynman’s technique, check out this article:

🔗 The Feynman Technique and How to Use It for Learning

P.S. Take care of your code and your bikes! ❤️

Step-by-Step Guide to Creating a Donations dApp with Stellar SDK

Jesus Esquer — Thu, 29 Aug 2024 12:13:18 +0000

Introduction

Welcome! In this post, we'll guide you through creating a donation dApp powered by the Stellar SDK. This app handles real-time, secure, and transparent transactions using blockchain technology. You can explore the deployed final product here.

This app aims to create a platform that enables transparent charitable donations. Donors can track how their funds are used and ensure they reach the intended recipients, enhancing trust in charitable organizations.

This project was also created as an entry for Stellar’s Build Better on Stellar: Smart Contract Challenge. Please check out the submission and give it a like here.

Technologies Used

Create React App: Scaffolding and managing the React application.
React: The core library for building the user interface.
Stellar SDK: Interacting with the Stellar blockchain to process transactions.
react-router-dom: Handling routing and navigation within the application.
GitHub Pages: Deploying the application.

Prerequisites

This tutorial is friendly for beginners with a basic familiarity with React.js. You'll need Node.js and an IDE, like VS Code. You can find Node.js here and VS Code here.

Project Setup

First, create a React application by running the following command:

charity-dapp-ui/
│   .gitignore
│   package-lock.json
│   package.json
│   README.md
├───public
│       icon.jpg
│       index.html
└───node_modules
└───src
    │   App.css
    │   App.js
    │   App.test.js
    │   index.css
    │   index.js
    │   logo.svg
    │   reportWebVitals.js
    │   setupTests.js
    ├───components
    │   │   Home.js
    │   ├───auth
    │   │       Login.js
    │   │       PrivateRoute.js
    │   │       Register.js
    │   └───dashboard
    │       ├───charity
    │       │       CharityDashboard.js
    │       │       CharityProfile.js
    │       ├───common
    │       │       DonationsList.js
    │       └───donor
    │               DonorDashboard.js
    ├───hooks
    │       useSubmitForm.js
    └───utils
        └───stellarSDK
                stellarSDK.js

Then, set up the directory structure as follows:

Root Level Files: Configuration and metadata files like .gitignore, package.json, and README.md.
public: Static assets like icon.jpg and index.html.
node_modules: Lists all installed NPM dependencies.
src: Source code of the application.
- components: Contains React components.
- auth: Authentication-related components (Login.js, PrivateRoute.js, Register.js).
- common: Shared components (Wrapper.js).
- dashboard: Dashboard components.
  - charity: Charity-specific dashboard components (CharityDashboard.js, CharityProfile.js).
  - common: Common dashboard components (DonationsList.js).
  - donor: Donor-specific dashboard components (DonorDashboard.js).
- hooks: Custom hooks (useSubmitForm.js).
- utils: Utility functions and libraries.
- stellarSDK: Stellar SDK-related utilities (stellarSDK.js).

Step-by-Step Development

Installing Stellar SDK

After creating the necessary directories and files, install the Stellar SDK by running:

npm install --save stellar-sdk

Setting Up Routing

Next, set up the router and routes in App.js by pasting the following code:

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Home from "./components/Home";
import Login from "./components/auth/Login";
import Register from "./components/auth/Register";
import DonorDashboard from "./components/dashboard/donor/DonorDashboard";
import CharityDashboard from "./components/dashboard/charity/CharityDashboard";
import PrivateRoute from "./components/auth/PrivateRoute";
import CharityProfile from "./components/dashboard/charity/CharityProfile";
import "./App.css";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />
        <Route
          path="/donor-dashboard"
          element={
            <PrivateRoute>
              <DonorDashboard />
            </PrivateRoute>
          }
        />
        <Route
          path="/charity-dashboard"
          element={
            <PrivateRoute>
              <CharityDashboard />
            </PrivateRoute>
          }
        />
        <Route path="/charity-profile" element={<CharityProfile />} />
      </Routes>
    </Router>
  );
}

export default App;

Here, we import Router, Routes, and Route from react-router-dom, React’s built-in library for handling routing. Then, we import all the components that will have a route.

The Router wraps around Routes, where each Route has a path and an associated component. For private routes, we'll create a PrivateRoute.js component:

import { Navigate } from "react-router-dom";

const PrivateRoute = ({ children }) => {
  const currentUser = localStorage.getItem("currentUser");

  if (!currentUser) {
    return <Navigate to="/login" />;
  }

  return children;
};

export default PrivateRoute;

This component ensures that only registered users can access certain routes. It checks for the presence of a "currentUser" item in local storage and redirects the user to the login page if not found.

Creating Components

Home Component

In Home.js, add the following code:

import { useNavigate } from "react-router-dom";

const Home = () => {
  const navigate = useNavigate();
  return (
    <div>
      <div>
        <h1>Welcome to Stellar Decentralized Donations!</h1>
        <p>
          Empowering change, one donation at a time. Whether you’re here to give
          or to receive, our platform makes it simple, transparent, and secure.
          Join our community by logging in or registering today!
        </p>
      </div>
      <div>
        <button onClick={() => navigate("/login")}>Login</button>
        <button onClick={() => navigate("/register")}>Register</button>
      </div>
    </div>
  );
};

export default Home;

The Home component includes a greeting, a description, and two buttons that redirect users to the Register and Login pages.

Register Component

In Register.js, add the following code:

import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { registerUserInBlockchain } from "../../utils/stellarSDK/stellarSDK";
import useSubmitForm from "../../hooks/useSubmitForm";

function Register() {
  const navigate = useNavigate();
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [inputPublicKey, setInputPublicKey] = useState("");
  const [role, setRole] = useState("donor"); // or charity

  const registerUserInLocal = (publicKey) => {
    // Validation for name, email, password
    if (!name || !email || !password) {
      alert("Please fill all the fields");
      return;
    }
    const users = JSON.parse(localStorage.getItem("users")) || [];
    const newUser = { name, email, password, role, publicKey };
    users.push(newUser);
    localStorage.setItem("users", JSON.stringify(users));
  };

  const handleRegister = async () => {
    if (inputPublicKey) {
      registerUserInLocal(inputPublicKey);
    } else {
      let [keyPair] = await registerUserInBlockchain();
      alert(`Registered successfully! 
        Your public key is ${keyPair.publicKey()}
        Private key is ${keyPair.secret()}.
        Please save these keys for future use.
        Private key is not stored anywhere and cannot be recovered!`);
      registerUserInLocal(keyPair.publicKey());
    }
    // Redirect to login page
    navigate("/login");
  };

  const { isLoading, handleSubmit } = useSubmitForm(handleRegister);

  return (
    <div>
      <h2>Register</h2>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <select value={role} onChange={(e) => setRole(e.target.value)}>
          <option value="donor">Donor</option>
          <option value="charity">Charity</option>
        </select>
        <p>
          If you have a public key, enter it here to link it to your account:
        </p>
        <input
          type="text"
          placeholder="Public Key"
          value={inputPublicKey}
          onChange={(e) => setInputPublicKey(e.target.value)}
        />
        {isLoading ? (
          <button disabled>Loading...</button>
        ) : (
          <button type="submit">
            {inputPublicKey ? "Register" : "Register & Create Stellar Account"}
          </button>
        )}
      </form>
    </div>
  );
}

export default Register;

This component handles user registration. It includes form validation, allowing users to either register with an existing Stellar public key or generate a new one. User details are saved in local storage, and if necessary, a new Stellar account is created.

Custom Hook: useSubmitForm

In useSubmitForm.js, add the following code:

import { useState } from "react";

const useSubmitForm = (handleSubmitFunction) => {
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsLoading(true);

    try {
      await handleSubmitFunction();
    } catch (error) {
      console.error("An error occurred:", error);
    } finally {
      setIsLoading(false);
    }
  };

  return { isLoading, handleSubmit };
};

export default useSubmitForm;

This custom hook handles form submissions. It manages loading states and prevents default form behavior to avoid page reloads.

Utils: Stellar SDK (registerUserInBlockchain)

In stellarSDK.js, add the following code:

const StellarSdk = require("stellar-sdk");

const server = new StellarSdk.Horizon.Server(
  "https://horizon-testnet.stellar.org"
);

export const registerUserInBlockchain = async () => {
  const pair = StellarSdk.Keypair.random();
  const publicKey = pair.publicKey();

  try {
    const response = await fetch(
      `https://friendbot.stellar.org?addr=${encodeURIComponent(publicKey)}`
    );
    const responseJSON = await response.json();
    console.log("SUCCESS! You have a new account :)\n", responseJSON);
    return [pair, publicKey];
  } catch (e) {
    console.error("Error creating test account!", e);
  }
};

This utility function registers a user on the Stellar blockchain by generating a key pair and funding the account. Any errors are caught and logged.

Login Component

In Login.js, add the following code:

import { useState } from "react";
import { useNavigate } from "react-router-dom";

const Login = () => {
  const navigate = useNavigate();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleLogin = (e) => {
    e.preventDefault();
    const users = JSON.parse(localStorage.getItem("users")) || [];
    const user = users.find(
      (user) => user.email === email && user.password === password
    );
    if (!user) {
      alert("Invalid credentials");
      return;
    }
    const dashboardPath =
      user.role === "charity" ? "/charity-dashboard" : "/donor-dashboard";
    navigate(dashboardPath);
    localStorage.setItem("currentUser", JSON.stringify(user));
  };

  return (
    <div className="login">
      <h2>Login</h2>
      <form onSubmit={handleLogin}>
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <button type="submit">Login</button>
      </form>
    </div>
  );
};

export default Login;

The Login component checks user credentials against those stored in local storage. If there is a match, the user is redirected to their respective dashboard (Donor or Charity).

Charity Components

Charity Dashboard

In CharityDashboard.js, add the following code:

import { useState, useEffect } from "react";
import { fetchDonationHistory } from "../../../utils/stellarSDK/stellarSDK";
import DonationsList from "../common/DonationsList";
import { Link } from "react-router-dom";

const CharityDashboard = () => {
  const charityProfile = JSON.parse(localStorage.getItem("currentUser")) || {};
  const [charityPublicKey] = useState(charityProfile.publicKey || "");
  const [charityName] = useState(charityProfile.name || "");
  const [donationHistory, setDonationHistory] = useState([]);

  useEffect(() => {
    if (!charityPublicKey) return;
    const fetchHistory = async (charityPublicKey) => {
      const donationHistory = await fetchDonationHistory(charityPublicKey);
      setDonationHistory(donationHistory);
    };
    fetchHistory(charityPublicKey);
  }, [charityPublicKey]);

  return (
    <div>
      <div>
        <h2>Hello, {charityName}! Let's make an impact.</h2>
      </div>
      <Link to="/charity-profile">Edit Profile</Link>
      <h2>Received Donations</h2>
      <DonationsList donations={donationHistory} />
    </div>
  );
};

export default CharityDashboard;

This component fetches and displays the charity’s donation history. It also includes a link to edit the charity’s profile.

Utils: Stellar SDK (fetchDonationHistory)

In stellarSDK.js, add the following code:

export const fetchDonationHistory = async (sourcePublicKey) => {
  try {
    const account = await server.loadAccount(sourcePublicKey);

    const transactions = await server
      .transactions()
      .forAccount(account.accountId())
      .call();

    return transactions?.records;
  } catch (e) {
    console.error("An error has occured fetching donation history", e);
  }
};

This utility function retrieves all transactions associated with a given Stellar account.

DonationList Component

In DonationList.js, add the following code:

import { useState, useEffect } from "react";
import { extractTransactionDetails } from "../../../utils/stellarSDK/stellarSDK";

const DonationsList = ({ donations }) => {
  const [transactionDetails, setTransactionDetails] = useState([]);

  const formatDate = (dateString) => {
    const date = new Date(dateString);
    return date.toLocaleString("en-US", { timeZone: "UTC" });
  };

  useEffect(() => {
    const getTransactionDetails = async (donations) => {
      try {
        const transactionDetails = await Promise.all(
          donations.map((donation) => extractTransactionDetails(donation))
        );
        return transactionDetails;
      } catch (error) {
        console.error("Error fetching transaction details:", error);
        return [];
      }
    };

    getTransactionDetails(donations).then((transactionDetails) =>
      setTransactionDetails(transactionDetails)
    );
  }, [donations]);

  return (
    <div>
      <ul>
        {transactionDetails?.map(
          (transaction, index) =>
            Number(transaction.amount).toFixed(2) > 0 && (
              <li key={index}>
                {Number(transaction.amount).toFixed(2)} XLM from{" "}
                {transaction.from} to {transaction.to} on{" "}
                {formatDate(transaction.createdAt)} UTC
              </li>
            )
        )}
      </ul>
    </div>
  );
};

export default DonationsList;

This component displays a list of donations with details such as the donor, recipient, amount, and date.

Utils: Stellar SDK (extractTransactionDetails)

Inside stellarSDK.js add at the bottom the following function:

export const extractTransactionDetails = async (transaction) => {
  const operations = await fetchOperationsForTransaction(transaction.id);
  const transactionDetails = {
    id: transaction.id,
    createdAt: transaction.created_at,
    amount: 0,
    to: "",
    from: "",
  };

  operations.forEach((operation) => {
    if (operation.type === "payment") {
      transactionDetails.amount = operation.amount;
      transactionDetails.to = operation.to;
      transactionDetails.from = operation.from;
    }
  });

  return transactionDetails;
};

export const fetchOperationsForTransaction = async (transactionId) => {
  const url = `https://horizon-testnet.stellar.org/transactions/${transactionId}/operations`;
  const response = await fetch(url);
  const operations = await response.json();

  return operations._embedded.records;
};

In this util function, we take one transaction as a parameter, then for the transaction we get the operations using fetchOperationsForTransaction, with the transaction id.

For each operation, we return an object with the amount, to, and from details.

Charity Profile

In CharityProfile.js, add the following code:

import { useState, useEffect } from "react";

const CharityProfile = () => {
  const [charityPublicKey] = useState("");
  const [profile, setProfile] = useState({
    name: "",
    mission: "",
    contact: "",
    goal: 0,
    raised: 0,
  });

  useEffect(() => {
    const fetchProfile = async (charityPublicKey) => {
      const mockProfile = {
        name: "Charity Name",
        mission: "Our mission is to help those in need.",
        contact: "contact@charity.org",
        goal: 1000,
        raised: 200, // This should be fetched from the Stellar transactions
      };
      setProfile(mockProfile);
    };
    fetchProfile(charityPublicKey);
  }, [charityPublicKey]);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setProfile((prevProfile) => ({ ...prevProfile, [name]: value }));
  };

  const saveProfile = () => {
    // Save profile to blockchain
    console.log("Saving profile to blockchain", profile);
    // Save profile to local storage
    const charityProfile =
      JSON.parse(localStorage.getItem("charityProfile")) || {};
    // Merge the new profile with the existing profile
    // check if public key from charity matches the public key in local storage
    // link the two profiles
    const updatedProfile = { ...charityProfile, ...profile };
    localStorage.setItem("charityProfile", JSON.stringify(updatedProfile));
  };

  return (
    <div>
      <h1>Charity Profile</h1>
      <div>
        <label>Name:</label>
        <input
          type="text"
          name="name"
          value={profile.name}
          onChange={handleInputChange}
          placeholder="Charity Name"
        />
      </div>
      <div>
        <label>Mission:</label>
        <textarea
          name="mission"
          value={profile.mission}
          onChange={handleInputChange}
          placeholder="Mission"
        />
      </div>
      <div>
        <label>Contact:</label>
        <input
          type="text"
          name="contact"
          value={profile.contact}
          onChange={handleInputChange}
          placeholder="Contact"
        />
      </div>
      <div>
        <label>Goal:</label>
        <input
          type="number"
          name="goal"
          value={profile.goal}
          onChange={handleInputChange}
          placeholder="Goal"
        />
      </div>
      <div>
        <label>Raised:</label>
        <input type="number" name="raised" value={profile.raised} readOnly />
      </div>
      <button onClick={saveProfile}>Save Profile</button>
      <h2>Progress</h2>
      <p>
        {((profile.raised / profile.goal) * 100).toFixed(2)}% of goal reached
      </p>
    </div>
  );
};

export default CharityProfile;

This component allows charities to update their profile information and track the progress of their fundraising efforts.

Donor Dashboard

In DonorDashboard.js, add the following code:

import { useEffect, useState } from "react";
import {
  fetchDonationHistory,
  sendPayment,
} from "../../../utils/stellarSDK/stellarSDK";
import DonationsList from "../common/DonationsList";
import useSubmitForm from "../../../hooks/useSubmitForm";

const DonorDashboard = () => {
  const donorProfile = JSON.parse(localStorage.getItem("currentUser")) || {};
  const [sourceSecretKey, setSourceSecretKey] = useState("");
  const [destinationPublicKey, setDestinationPublicKey] = useState("");
  const [amount, setAmount] = useState(0);
  const [donationHistory, setDonationHistory] = useState([]);
  const [donorPublicKey] = useState(donorProfile.publicKey || "");
  const [donorName] = useState(donorProfile.name || "");

  const submitDonation = async (e) => {
    if (!sourceSecretKey || !destinationPublicKey || !amount) {
      alert("Please fill all the fields");
      return;
    }
    if (isNaN(amount) || parseFloat(amount) <= 0) {
      alert("Please enter a valid amount");
      return;
    }
    try {
      const result = await sendPayment(
        sourceSecretKey,
        destinationPublicKey,
        amount
      );
      if (result.successful) {
        alert("Donation sent successfully!");
      } else {
        alert(
          "Error sending donation. Please double check your details. And try again."
        );
      }
    } catch (error) {
      console.error("Error sending donation:", error);
    }
  };

  const { isLoading, handleSubmit } = useSubmitForm(submitDonation);

  useEffect(() => {
    if (!donorPublicKey && isLoading) return;
    const fetchHistory = async (donorPublicKey) => {
      const donationHisory = await fetchDonationHistory(donorPublicKey);
      setDonationHistory(donationHisory);
    };
    fetchHistory(donorPublicKey);
  }, [donorPublicKey, isLoading]);

  return (
    <div>
      <h2>Welcome, {donorName}! Ready to make a difference?</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Source Secret Key:</label>
          <input
            type="text"
            value={sourceSecretKey}
            onChange={(e) => setSourceSecretKey(e.target.value)}
            placeholder="Source Secret Key"
          />
        </div>
        <div>
          <label>Destination Public Key:</label>
          <input
            type="text"
            value={destinationPublicKey}
            onChange={(e) => setDestinationPublicKey(e.target.value)}
            placeholder="Destination Public Key"
          />
        </div>
        <div>
          <label>Amount</label>
          <input
            type="number"
            value={amount}
            onChange={(e) => setAmount(e.target.value)}
            placeholder="Amount"
          />
        </div>
        <button type="submit" disabled={isLoading}>
          {isLoading ? "Sending..." : "Send Donation"}
        </button>
      </form>
      <div>
        <h2>Donation History</h2>
        <DonationsList donations={donationHistory} />
      </div>
    </div>
  );
};

export default DonorDashboard;

The Donor Dashboard allows users to make donations by entering their Stellar secret key, the recipient’s public key, and the amount. It also displays the donor’s transaction history.

Utils: Stellar SDK (sendPayment)

In stellarSDK.js, add the following code:


export const sendPayment = async (
  sourceSecretKey,
  destinationPublicKey,
  amount
) => {
  const sourceKeypair = StellarSdk.Keypair.fromSecret(sourceSecretKey);
  const sourcePublicKey = sourceKeypair.publicKey();

  try {
    const account = await server.loadAccount(sourcePublicKey);
    const fee = await server.fetchBaseFee();

    const transaction = new StellarSdk.TransactionBuilder(account, {
      fee,
      networkPassphrase: StellarSdk.Networks.TESTNET,
    })
      .addOperation(
        StellarSdk.Operation.payment({
          destination: destinationPublicKey,
          asset: StellarSdk.Asset.native(),
          amount: amount.toString(),
        })
      )
      .setTimeout(30)
      .build();

    transaction.sign(sourceKeypair);
    const result = await server.submitTransaction(transaction);
    console.log("Success! Results:", result);
    return result;
  } catch (e) {
    console.error("An error has occured sending payment", e);
  }
};

This utility function handles the payment process on the Stellar network, signing and submitting transactions.

Conclusion

By following this guide, you’ve built a functional charity donation application using the Stellar SDK. This app allows users to make secure, transparent donations and track how their contributions are being used.

Blockchain technology enhances transparency and builds trust between donors and charitable organizations.

If you’re interested in expanding this project, consider exploring some of the following features:

Multi-currency support.
Additional authentication methods.
Integrating a proof-of-use system for donations.

Feel free to clone the code here or test the live app. This guide didn’t cover styling, but the deployed version uses Tailwind CSS for a clean, modern look.

Thank you for following along! If you encounter any issues, check the console for errors, and don't hesitate to reach out with questions. Happy coding!

Stellar Donations dApp

Jesus Esquer — Sat, 17 Aug 2024 16:34:59 +0000

This is a submission for the Build Better on Stellar: Smart Contract Challenge : Build a dApp

What I Built

I developed Stellar Donations, a decentralized application (dApp) that connects donors with charities on the Stellar blockchain.

This platform allows donors to make secure, transparent donations while enabling charities to receive funds directly, track progress, and share their missions.

The app has distinct functionalities for donors and charities.

Donors can donate to the charity of their choosing in real-time, while charities can manage their profiles and view donation histories.

The application features a user-friendly interface with separate dashboards for donors and charities, allowing users to manage donations, track fundraising goals, and maintain profiles with ease.

Also, its integration with Stellar, ensures that all transactions are secure, transparent, and immutable.

Demo

Deployed via GitHub pages live at:
https://jm27.github.io/charity-dapp/

My Code

Repo:
https://github.com/jm27/charity-dapp

Journey

The development of this dApp was a deep dive into the Stellar ecosystem. The implementation of real-time transactions leveraging Stellar's blockchain was a key highlight. Donors can contribute directly to their chosen charities, with transactions happening seamlessly through the Stellar network.

Additionally, I picked up and worked with Stellar APIs, understanding their structure and integrating them into the app. The dynamic interaction with Stellar's features, including key pair generation and transaction management, was both challenging and rewarding.

Throughout the project, I learned about Stellar transactions, private keys and seeds, and public keys, and got a high-level understanding of elliptic curve cryptography, which underpins the security and performance of the Stellar network.

I'm particularly proud of the seamless user experience achieved in the app, especially the intuitive process for donors to make transactions and track their contributions.

What's Next

Moving forward, I aim to enhance the app's security features, particularly around key management, encryption, and user authentication.

Enable server-side communication and DB storage.

I plan to implement a feature that releases a portion of the donation to the charity upfront, with the remaining funds being released once the charity begins posting proof of valid resource utilization.

This will add an extra layer of accountability and transparency, ensuring that donations are used effectively and for their intended purposes.

Also to explore ways to expand the platform, possibly integrating more advanced features like multi-currency support or automated reporting tools for charities.

Conclusion

Working with Stellar's ecosystem was a positive experience. The availability of resources and the simplicity of the Stellar SDK made the development process smoother. The ecosystem's focus on financial inclusion aligned well with the goals of this project.

Thanks for the opportunity to participate!

How to Build and Publish a Chrome Extension: Step-by-Step Guide to Creating a Custom Session Saver

Jesus Esquer — Fri, 19 Jul 2024 11:56:54 +0000

Introduction

Creating a Chrome extension can seem daunting at first. But with the right guidance, it's manageable. This guide will walk you through building and publishing a Chrome extension. Called "Custom Session Saver." This extension allows users to save and restore custom sessions. For example, "Work," "Personal," "Development," etc.

By the end of this guide, you will have a functional Chrome extension, ready for publishing.

Project Setup

Start by creating a directory for your project, named "custom_session_storage." Inside this directory, create the following folder structure:


project\_root/

│

├── background.js          # Background script specified in manifest

├── images/                # Directory for icons

│   ├── icon16.png         # 16x16 icon

│   ├── icon48.png         # 48x48 icon

│   └── icon128.png        # 128x128 icon

├── manifest.json          # Chrome extension manifest file

├── popup.js          # popup script file

├── popup.css          # popup style file

└── popup.html             # Default popup HTML file

Manifest File

Open manifest.json and paste the following code:

{
    "manifest_version": 3,
    "name": "Custom Session Saver",
    "version": "1.0",
    "description": "Save and restore custom sessions, for example: 'Work', 'Personal', 'Development', etc.",
    "permissions": [
        "storage",
        "tabs"
    ],
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_popup": "popup.html"
    },
    "icons": {
        "16": "images/icon16.png",
        "48": "images/icon48.png",
        "128": "images/icon128.png"
    }
}

In this file, we are doing the following:

Defining the version of the manifest we are using.
Giving it our custom name, version, and description.
Adding permissions for "storage" to save local data and "tabs" to manipulate tabs.
Setting the background script. This handles all functionality for tabs and session storage.
Defining the UI for the popup.
Setting the default icon for the following sizes: 16x16, 48x48, and 128x128.

Background Script

Create background.js to handle the extension's background processes. Open it up and paste the following code:


console.log("Background script loaded");

chrome.runtime.onInstalled.addListener(() => {
  console.log("Extension installed");
});

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === "saveSession") {
    chrome.storage.local.set({ [message.sessionName]: message.session }, () => {
      console.log(`Session ${message.sessionName} saved.`);
      chrome.runtime.sendMessage({ action: "refreshSessions" });
      if (sendResponse) sendResponse();
    });
  } else if (message.action === "openSession") {
    chrome.storage.local.get([message.sessionName], (result) => {
      let session = result[message.sessionName];
      if (session) {
        session.forEach((tab) => {
          chrome.tabs.create({ url: tab.url });
        });
      }
    });
  } else if (message.action === "deleteSession") {
    chrome.storage.local.remove(message.sessionName, () => {
      console.log(`Session ${message.sessionName} deleted.`);
      chrome.runtime.sendMessage({ action: "refreshSessions" });
      if (sendResponse) sendResponse();
    });
  }
});

Here we added a console log message and some event listeners:

- onInstalled: After installation, this event gets triggered. This logs that the installation was successful.

- onMessage: This handles events from popup.js. If the message is to “saveSession,” it saves the session in local storage. If the message is “openSession,” it looks in local storage for that session and opens new tabs based on saved data. Finally, if the message is “deleteSession,” it removes the session name from storage.

- sendingMessage: To separate concerns, popup.js handles the refresh session logic. When saving or deleting, we send an event that popup.js listens for and triggers the refresh.

User Interface

Set up the user interface in popup.html. Open up the file and paste the following code:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="popup.css">
    <title>Session Saver</title>
</head>

<body>
    <div class="title-container">
        <img src="./images/icon48.png" alt="icon" width="25" height="25">
        <h3 class="title">Custom Session Saver</h3>
    </div>
    </br>
    <div class="input-container">
        <input class="input" id="sessionName" type="text" placeholder="Enter session name" />
        <button class="save-session-btn" id="saveSession">SAVE</button>
    </div>
    <div id="sessions">
        <ul class="sessions-list" id="sessionsUL"></ul>
    </div>
    <script src="popup.js"></script>
</body>

</html>

In this file, we added our extension’s style path and title. Inside the body tag, we included:

A header with a small icon and title.
A div container with an input, and a button for saving the session.
Another div that will hold our saved sessions.
A script tag to import our JavaScript file** popup.js**.

Script

In popup.js, we will handle the UI interactions. Open up the file and paste the following code:

document.addEventListener("DOMContentLoaded", () => {
  const saveSessionButton = document.getElementById("saveSession");
  const sessionNameInput = document.getElementById("sessionName");
  const sessionsUL = document.getElementById("sessionsUL");

  const loadSessions = () => {
    while (sessionsUL.firstChild) {
      sessionsUL.removeChild(sessionsUL.firstChild);
    }
    chrome.storage.local.get(null, (sessions) => {
      for (let sessionName in sessions) {
        let sessionLI = document.createElement("li");
        sessionLI.className = "session";
        let sessionTitle = document.createElement("span");
        sessionTitle.textContent = sessionName;

        let openButton = document.createElement("button");
        openButton.textContent = "OPEN";
        openButton.addEventListener("click", () => {
          chrome.runtime.sendMessage({ action: "openSession", sessionName });
        });

        let deleteButton = document.createElement("button");
        deleteButton.textContent = "DELETE";
        deleteButton.addEventListener("click", () => {
          chrome.runtime.sendMessage({ action: "deleteSession", sessionName });
        });

        sessionLI.appendChild(sessionTitle);
        sessionLI.appendChild(openButton);
        sessionLI.appendChild(deleteButton);
        sessionLI.appendChild(document.createElement("br"));
        sessionsUL.appendChild(sessionLI);
      }
    });
  };

  saveSessionButton.addEventListener("click", () => {
    let sessionName = sessionNameInput.value;
    if (sessionName) {
      chrome.tabs.query({ currentWindow: true }, (tabs) => {
        let session = tabs.map((tab) => ({ url: tab.url, title: tab.title }));
        chrome.runtime.sendMessage(
          { action: "saveSession", sessionName, session },
          loadSessions
        );
      });
    }
  });

  chrome.runtime.onMessage.addListener((message) => {
    if (message.action === "refreshSessions") {
      loadSessions();
    }
  });

  loadSessions();
});

Inside this script:

We create a listener on the document, to get triggered when all content has loaded.
We get a couple of elements from the UI: the save session button, the input element, and the sessions list element.
We define a loadSession method. Inside, we use a while loop to clear the list element, reloading on each change. We retrieve the session property from local storage using Chrome's built-in methods.
We loop through all our sessions using a for-in loop, creating a li element and giving it a class name of the session. Create a span to hold our title. A button to open the session when clicked, and a delete button to remove the session when clicked.
We append the title and buttons to our session li element and this element to our session ul from popup.html.
We add an event listener to the save session button. On click, it grabs the input value and saves it as the session name. Using Chrome methods, we loop through the current window's open tabs. Then create a map, and send a message to background.js to save the sessions in local storage. We trigger loadSession to reload the list and reflect the new item.
We add a listener to handle refreshSessions messages from background.js.
Finally, we trigger this method on the first load to display existing sessions.

Icons

Prepare three icon sizes: 16x16, 48x48, and 128x128 pixels. These are for Chrome's toolbar and the Chrome Web Store.

Search for free tools like resizeimage.net, AI icon generator, and FreeConvert. To create and resize your icons.

Styles

Style the popup with popup.css to look user-friendly and smooth. Open up the file and paste the following code:

body {
    width: 300px;
    font-family: Arial, sans-serif;
}

.title-container {
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    display: flex;
    justify-content: flex-start;
    text-align: center;
    align-items: center;
}

.title {
    margin-left: 4px;
}

.input-container {
    margin-top: 4px;
    padding-bottom: 10px;
}

.input {
    border: 1px solid lightgray;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    margin-right: 5px;
    border-radius: 4px;
    font-size: larger;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 4px;
}

input:focus-visible,
button:focus-visible {
    outline: 1px solid #007bff;
    outline-offset: 0px;
}

button {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
}

.save-session-btn {
    background-color: #007bff;
    color: #ffffff;
}

.save-session-btn:hover,
.save-session-btn:active,
.save-session-btn:focus,
.save-session-btn:focus-visible {
    background-color: #0056b3;
}

.sessions-list {
    padding-inline-start: 20px;
}

.session {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-left: 5px;
}

.session::before {
    content: "\2022";
    display: inline-block;
    width: 20px;
    margin-left: -25px;
    text-align: center;
}

.session span {
    flex-grow: 1;
    font-weight: bold;
    font-size: larger;
}

.session button {
    margin-left: 10px;
    background-color: #ffffff;
    color: #007bff;
    border: 1px solid #007bff;
}

.session button:hover,
.session button:active,
.session button:focus,
.session button:focus-visible {
    background-color: #dbe5f2;
}

For this style, we aimed for a modern look:

Custom width and font for the whole body.
Text-centered title container with a slight border at the bottom.
A small margin to separate the title from the icon.
Custom styles for the input and buttons, including rounded corners, a bit of shadow, and blue outlines. There are two buttons: one blue-colored and the other with blue outlines.
Flex positioning, making list items take the same space as a column with flex-grow. Since "flex" breaks our list items, we added the list item symbol before each.

Testing

To test your extension:

1. Navigate to Chrome's extension page (chrome://extensions/).

2. Enable developer mode.

3. Click "Load unpacked" and select your project directory. Now your extension should be visible in Chrome.

Deploying to the Chrome Web Store

Deploying to the Chrome Web Store is straightforward. It does need attention to detail due to Google's review process. Follow these steps:

1. Zip Your Application: Ensure your project follows the correct folder structure. manifest.json should be at the root.

2. Set Up a Developer Account: Navigate to the Chrome Web Store Developer Dashboard. Then pay a one-time fee of $5 to publish extensions.

3. Upload Your Extension: Click "Add a new item," upload your zip file. Fill out the required details such as title, description, and privacy policy.

4. Submit for Review: After completing the form, submit your extension for review. This process can take from a few hours to a few days. After the review, you will receive an email.

Enhancements

Consider adding these features to improve your extension:

Renaming sessions or organizing sessions into categories.
Implementing test cases for your script file.
Interacting with users to gather feedback and improve the extension.
Monetizing your extension by offering a premium version with extra features.

Conclusion

Congratulations, you've accomplished creating a Chrome extension! Added full functionality and styling, and published it to the Chrome Web Store. By following this guide, you have learned extension development and deployment steps. Keep experimenting and enhancing your extension to make it even more useful.

Public extension link

Code repository

Step-by-Step Guide to Creating a Fullstack Mood Tracker CRUD App with React, Node.js, and SQLite.

Jesus Esquer — Tue, 02 Jul 2024 12:07:33 +0000

Introduction

Hi all, welcome, and thanks for stopping by!

In this step-by-step guide, we will learn how to create a full-stack application with create, read, update, and delete (CRUD) functionality.

We will use Node.js and SQLite for the backend, and React for the frontend to create our user interface (UI).

Our project will be a mood tracker app where users can input their mood on a scale of 1-10. The app will display these moods in a list, with options to edit or delete them. Additionally, we will include a linear chart to track and visualize mood trends.

The final version will look like this:

Note: This tutorial assumes you have Node.js installed and an IDE installed preferably VScode. If not please go here to install Node.js and here for VScode.

Ok without further ado, let’s jump to it!

Backend Development

We will start with the backend. First, create a backend directory and open it in your favorite IDE. For this article, we will use VS Code.

After opening the backend directory in your code editor, open the terminal and run the following command:

npm init -y

This will register our project as a Node application and create a package.json file inside our directory.

Next, we need to add our project dependencies.

We will use Express to create our server, SQLite3 for our database, and Body-Parser to extract the body of requests.

In the terminal, run:

npm install express sqlite3 body-parser

After the installation is complete, we will set up our directory structure.

The folder structure inside the backend directory should look like this (create directories and files as needed):

  /node_modules
  /db
    mood.db
  /routes
    index.js
    mood.js
  /models
    mood.js
  server.js
  package.json

Open server.js, the main file of the Node.js application, and copy and paste the following code:

const express = require('express');
const sqlite3 = require('sqlite3').verbose();
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.json());

let db = new sqlite3.Database('./db.sqlite');

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

We imported this code's express, sqlite3, and body-parser modules and initialized a new Express application.
We used body-parser as middleware to parse incoming request bodies. We also initialized a new SQLite database (or opened it if it already exists).
Defined a route handler for GET requests to the root URL (/), and started the server on port 3000.

To run the app with hot reload (so you don't have to restart the server each time you make a change). We can use a dependency called nodemon.

Install it by running:

npm install --save-dev nodemon

To use nodemon, update the scripts section inside package.json. Change the start script to look like this:

"start": "nodemon server.js"

Open your terminal and run:

npm start

Then, open your default browser and navigate to http://localhost:3000/. You should see "Hello World".

Your terminal should display the following message:

[nodemon] starting `node server.js`
Server started on port 3000
Connected to the mood database.

Congrats, you have created and run an Express server!

If you don’t see it running, check your terminal for any errors.

Now let's start working on the model and routes for our application.

A model defines the structure of an object, and routes perform the CRUD operations.

Open models/mood.js and add the following code:

const sqlite3 = require('sqlite3').verbose();

let db = new sqlite3.Database('./db/moods.db', (err) => {
    if (err) {
        console.error(err.message);
    }
    console.log('Connected to the moods database.');
});

db.run(`CREATE TABLE IF NOT EXISTS moods(
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    mood INTEGER NOT NULL
)`, (err) => {
    if (err) {
        console.error(err.message);
    }
    console.log("Moods table created");
});

module.exports = db;

In this code, we imported SQLite and defined our database.
Created our table with id and mood columns, and exported our database.

Next, let's create our routes. Copy and paste the following code:

const express = require("express");
const router = express.Router();
const db = require("../models/mood");

router.post("/", (req, res) => {
  const { mood } = req.body;
  const query = `INSERT INTO moods(mood) VALUES(?)`;

  db.run(query, [mood], function (err) {
    if (err) {
      console.error(err.message);
      return res.status(500).json({ message: err.message });
    }
    res.send({ id: this.lastID, mood: mood });
  });
});

router.get("/", (req, res) => {
  const query = `SELECT * FROM moods`;

  db.all(query, [], (err, rows) => {
    if (err) {
      console.error(err.message);
      return res.status(500).json({ message: err.message });
    }
    res.send(rows);
  });
});

router.put("/:id", (req, res) => {
  const { mood } = req.body;
  const { id } = req.params;
  const query = `UPDATE moods SET mood = ? WHERE id = ?`;

  db.run(query, [mood, id], function (err) {
    if (err) {
      console.error(err.message);
      return res.status(500).json({ message: err.message });
    }
    res.send({ id: id, mood: mood });
  });
});

router.delete("/:id", (req, res) => {
  const { id } = req.params;
  const query = `DELETE FROM moods WHERE id = ?`;

  db.run(query, [id], function (err) {
    if (err) {
      console.error(err.message);
      return res.status(500).json({ message: err.message });
    }
    res.send({ changes: this.changes });
  });
});

module.exports = router;

Here, we imported Express to create a server application.

Using Express, we made a router object to define routes for the mood application.

We also imported our recently created database model.

For our CRUD operations, we created a new route for each action:

Create: This route responds to all POST requests at the root path (/). We extract the mood from the request and then define a SQL query to insert a new mood. Run the query on our db module, passing the mood value as a parameter. We handle errors and send the response back to the client or a status code of 500 with the error message.
Read: This route responds only to GET requests at the root path (/). We define a SQL query to select all moods, run the query, and send back the response with moods if successful. Otherwise, we send a status 500 code with the error message.
Update: This route responds to PUT requests at the path /:id, mood id should be in the path like /6. Like POST, we extract the body from the request and get the id from the path. We create a query to update a specific mood based on the id. Then run the query, passing mood and id as parameters, and include error handling logic.
Delete: This route responds only to DELETE requests at the path /:id. We get the id from the request, then create a query to delete it from the moods table if it exists, and apply the same error handling logic.

We exported our router object to use the routes in our server.js file.
Let's update our server.js file to include our router.

Also, remove the database file reference we moved inside our model. Updated server.js:

const express = require("express");
const bodyParser = require("body-parser");
const moodsRouter = require("./routes/mood");
const cors = require("cors");

const app = express();

app.use(cors());
app.use(bodyParser.json());
app.use("/moods", moodsRouter);

app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.listen(3001, () => {
  console.log("Server started on port 3001");
});

Notice we also added the CORS middleware for local development and switched the port to 3001.

This will be helpful when integrating and testing our UI. In your terminal, run the following command to install CORS:

npm install --save-dev cors

Find out more about CORS here.

Now start your server app, and let’s test the routes. We can use curl inside the terminal to test.

Here's how you can do it for each type of request:

GET request: To fetch all moods, use the following command:

curl http://localhost:3001/moods

POST request: To create a new mood, use the -d flag to send data:

$body = @{
    mood = 7
} | ConvertTo-Json

$response = Invoke-WebRequest -Uri http://localhost:3001/moods -Method POST -Body $body -ContentType "application/json"

PUT request: To update a mood, you need to know the id of the mood you want to update. Replace :id with the actual id of the mood:

# Replace :id with the actual id of the mood you want to update
$id = ":id"

$body = @{
    mood = 8
} | ConvertTo-Json

$response = Invoke-WebRequest -Uri http://localhost:3001/moods/$id -Method PUT -Body $body -ContentType "application/json"

DELETE request: To delete a mood, you also need to know the id of the mood. Replace :id with the actual id of the mood:

# Replace :id with the actual id of the mood you want to delete
$id = ":id"

$response = Invoke-WebRequest -Uri http://localhost:3001/moods/$id -Method DELETE

Check your console for any errors.

You made it all the way here, congratulations! You built an application with CRUD functionality!

Now we are ready to move to the UI.

Frontend Development

For UI development, we first need to create a React app.

We'll use a tool called Create React App, which provides us with a template application to build on.

Open a new terminal, change the directory to frontEnd, and then type the following command:

npx create-react-app mood-tracker-ui

npx allows us to run npm packages without installing them.

It runs create-react-app, the third argument is the directory's name and application.

Now that we've created our app, change the directory to mood-tracker-ui:

cd mood-tracker-ui

Let's clean up by removing files and code we won't use.

Remove the following files: App.test.js, logo.svg, reportWebVitals.js, and setupTests.js.

We'll clean up index.js to look like this:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Next, App.js should look like this:
this:

function App() {
  return (
    <div className="App">
      <h1>Hello World</h1>
    </div>
  );
}

export default App;

Now let's set up our folder structure and run our application. The folder structure should look like this (create directories and files as needed):

/frontend
    /src
        /components
            /MoodInput
            /MoodList
            /MoodChart
        /services
            /apiService.js
        /assets
            /styles
                /main.css
        App.js
        index.js
    /public
        index.html
    package.json

Inside your terminal, run the following command:

npm run start

A new tab will open in your default browser and navigate to http://localhost:3000/. You should see something like this:

Great! Let's start with our API service to add our CRUD functionality. We need methods for GET, POST, PUT, and DELETE requests.

Open apiService.js and insert the following code:

const API_URL = "http://localhost:3001";

export const getMoodsAPI = async () => {
  const response = await fetch(`${API_URL}/moods`);
  const data = await response.json();
  return data;
};

export const addMoodAPI = async (mood) => {
  const response = await fetch(`${API_URL}/moods`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ mood }),
  });
  const data = await response.json();
  return data;
};

// Update mood
export const updateMoodAPI = async (id, updatedMood) => {
  const response = await fetch(`${API_URL}/moods/${id}`, {
    method: "PUT",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(updatedMood),
  });

  if (!response.ok) {
    throw new Error("Failed to update mood");
  }

  return response.json();
};

// Delete mood
export const deleteMoodAPI = async (id) => {
  const response = await fetch(`${API_URL}/moods/${id}`, {
    method: "DELETE",
  });

  if (!response.ok) {
    throw new Error("Failed to delete mood");
  }

  return response.json();
};

Here's what each function does:

getMoodsAPI: Fetches all moods from the API.
addMoodAPI: Sends a POST request to add a new mood.
updateMoodAPI: Sends a PUT request to update a specific mood by ID.
deleteMoodAPI: Sends a DELETE request to remove a mood by ID.

Now that our API service is ready, let's build our components.

Start with MoodInput.js. Open the file and paste this code:

import { useState } from "react";

const MoodInput = ({ addMood }) => {
  const [mood, setMood] = useState("");
  const [error, setError] = useState(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (mood === "" || mood > 10) {
      setError("Please enter a value between 1 and 10");
    } else {
      setError(null);
      addMood(mood);
      setMood("");
    }
  };

  return (
    <form onSubmit={handleSubmit} className="mood-form">
      <label htmlFor="mood-input">
        On a scale of 1-10, how are you feeling today?
      </label>
      <input
        id="mood-input"
        type="number"
        min="1"
        max="10"
        value={mood}
        onChange={(e) => setMood(e.target.value)}
      />
      <button type="submit">Submit</button>
      {error && <p>{error}</p>}
    </form>
  );
};

export default MoodInput;

In this component:

We use the useState hook to manage the mood and error states.
The handleSubmit function handles form submission. Validates the mood input, and adds the mood if valid.
The form includes an input for the mood and a submit button.
If the input has an error we render an error message.
Finally, we export the MoodInput component.

Next, let's create the MoodList component. This component will display all moods. Paste the following code inside the MoodList.js file:

import { useState } from "react";
import {
  updateMoodAPI,
  deleteMoodAPI,
} from "../../services/apiService/moodService";

const MoodList = ({ moods, deleteMood, updateMood }) => {
  const [editingMoodId, setEditingMoodId] = useState(null);
  const [editingMoodValue, setEditingMoodValue] = useState("");

  const handleUpdateMood = async (id) => {
    try {
      const updated = await updateMoodAPI(id, { mood: editingMoodValue });
      updateMood(id, updated);
      setEditingMoodId(null);
      setEditingMoodValue("");
    } catch (error) {
      console.error(error);
    }
  };

  const handleDeleteMood = async (id) => {
    try {
      await deleteMoodAPI(id);
      deleteMood(id);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div className="mood-list">
      <ul>
        {moods?.map((mood, index) => (
          <li key={index}>
            {index}-
            {editingMoodId === mood.id ? (
              <>
                <input
                  type="number"
                  min="1"
                  max="10"
                  value={editingMoodValue}
                  onChange={(e) => setEditingMoodValue(e.target.value)}
                />
                <button onClick={() => handleUpdateMood(mood.id)}>Save</button>
              </>
            ) : (
              <>
                {mood.mood}
                <button
                  onClick={() => {
                    setEditingMoodId(mood.id);
                    setEditingMoodValue(mood.mood);
                  }}
                >
                  Edit
                </button>
              </>
            )}
            <button onClick={() => handleDeleteMood(mood.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default MoodList;

In this component:

We import the necessary hooks and API services.
We define the MoodList functional component, initializing the state for the ID and value of the mood being edited.
The handleUpdateMood and handleDeleteMood methods use the API service methods for updating and deleting moods. We use try-catch blocks for error handling.
When rendering, we map over the moods and create a list item for each one. If the current mood is being edited, an input and save button are displayed. Otherwise, we display the current mood with an edit button. The delete button is always available. *Finally, we export the MoodList component.

We'll add a chart component for a visual representation of the moods.

This component uses the open-source libraries react-chartjs-2 and chart.js. Run the following command to install them:

npm install --save react-chartjs-2 chart.js

After installing the dependencies, paste the following code inside the MoodChart component:

import React from "react";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import { Line } from "react-chartjs-2";

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

const MoodChart = ({ moods }) => {
  const moodValues = moods?.map((mood) => Number(mood.mood));
  const data = {
    labels: moods?.map((mood, index) => `Day ${index + 1}`),
    datasets: [
      {
        label: "Mood",
        data: moodValues,
        borderColor: "rgb(75, 192, 192)",
        backgroundColor: "rgba(75, 192, 192, 0.5)",
      },
    ],
  };
  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: "top",
      },
      title: {
        display: true,
        text: "Mood Chart",
      },
    },
    scales: {
      x: {
        type: "category",
      },
      y: {
        type: "linear",
        beginAtZero: true,
      },
    },
  };

  return <Line options={options} data={data} />;
};

export default MoodChart;

In this component:

We import the necessary libraries and components.
Then register the required Chart.js components.
Inside our MoodChart component. we map through the moods array to extract mood values and labels.
We define the data and options for the chart.
The Line chart component is rendered with the required properties.
Finally, we export the MoodChart component.

Now that we have our components, it's time to import them into App.js. Add the following code:

import { useState, useEffect } from "react";
import MoodChart from "./components/MoodChart/MoodChart";
import MoodInput from "./components/MoodInput/MoodInput";
import MoodList from "./components/MoodList/MoodList";
import { getMoodsAPI, addMoodAPI } from "./services/apiService/moodService";
import "./App.css";

function App() {
  const [moods, setMoods] = useState([]);

  const updateMood = (id, updatedMood) => {
    setMoods((prevMoods) =>
      prevMoods.map((mood) => (mood.id === id ? updatedMood : mood))
    );
  };

  const deleteMood = (id) => {
    setMoods((prevMoods) => prevMoods.filter((mood) => mood.id !== id));
  };

  useEffect(() => {
    const fetchMoods = async () => {
      const moods = await getMoodsAPI();
      setMoods(moods);
    };

    fetchMoods();
  }, []);

  const addMood = async (mood) => {
    const newMood = await addMoodAPI(mood);
    setMoods([...moods, newMood]);
  };

  return (
    <div className="app">
      <div className="mood-header">
        <h1>Mood Tracker</h1>
        <MoodInput addMood={addMood} />
      </div>
      <div className="mood-container">
        <MoodList
          moods={moods}
          deleteMood={deleteMood}
          updateMood={updateMood}
        />
        <MoodChart moods={moods} />
      </div>
    </div>
  );
}

export default App;

In this file:

We import the necessary libraries and newly created components.
Inside our App component, we initialize the state for moods. Define methods for handling mood creation, updates, and deletions.
The useEffect hook fetches all moods from our database when the component renders.
We render our components and pass them the necessary props.
Finally, we export the App component.

Run the app and you should see the full functionality now, make sure your server app is running too, and check your console for any errors.

Amazing! You’ve reached this point, we’ve successfully created a full-stack application. Now, we need to add some styling. In the next section, we’ll cover minor styling tweaks, but feel free to get creative and add your flair.

Styling

Open App.css and paste the following code:

body {
    background: mintcream;
}

.mood-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.mood-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 0.5fr 0.5fr;
    gap: 10px;
}

.mood-form > * {
    margin-left: 10px;
}

.mood-list {
    grid-column: 2;
}

.mood-list li {
    margin-bottom: 10px;
}

.mood-list li button {
    margin-left: 10px;
}

.mood-chart {
    grid-column: 3 / span 2;
}

Here’s what we’re doing:

Body: Setting the background color to mintcream.
Header: Using Flexbox to center items vertically and horizontally, with some space below.
Mood Container: Using a grid layout to position MoodList and MoodChart. MoodList takes one column, and MoodChart spans two columns, both centered.
Mood List: Adding space between list items and buttons.

Import App.css in your App.js file, then reload your application to see the changes.

Conclusion

Throughout this journey, we built a full-stack application with a React UI, an Express.js server, and SQLite for data storage. We also added some styling using Flexbox and Grid layouts.

Next Steps

Here are some ideas for further improvements:

Testing: Add tests using Jest and React Testing Library.
Functionality: Enhance features, like adding real dates to moods.
Styling: Add more styles, such as icons instead of buttons, custom fonts, and shadows.
Deployment: Deploy the application.

Thanks for sticking with it! You’ve learned a thing or two. Please share your feedback and like the article.

Code Repo