Forem: Hamzat Abdul-muizz

October Taught Me to Show Up

Hamzat Abdul-muizz — Sun, 02 Nov 2025 07:36:58 +0000

A personal reflection on fear, growth, and learning to show up for myself — even when I didn’t feel ready.

October wasn’t just another month that passed, it was one that grew me. It was messy, fulfilling, confusing, and beautiful all at once. I think that’s the best way to put it.

Looking back, I see a version of myself who didn’t just move through time but changed shape inside it.

The Gym, The Struggle, and The Promise I Kept

Let’s start here.
For the first time in a while, I stayed consistent at the gym. Not because it was easy, but because I wanted to prove to myself that I could stick with something that required effort.

It wasn’t about six-packs or transformation videos, it was about trust (😂😂 it was to some extent).
The kind you build with yourself when you show up again and again, even when no one’s watching, and especially when you’re tired.

It wasn’t always smooth finances were tight, motivation ran low, but I kept showing up.
And somewhere between those tired reps and empty wallets, I realized that discipline feels like freedom when you stop negotiating with yourself.

Work, Learning, and Taking Ownership

Work this month felt different too.
I learned new things like integrating Stripe payments, writing about what I’ve learned, and being proud of what I create.

But what made this month truly meaningful were the two hackathons I joined.
Both of them scared me. I had doubts “What if I can’t finish? What if I mess up?”, but I did them anyway.

That’s where I really understood what ownership means.
It’s not just saying, “I like to take charge.” It’s doing it when it’s scary.
It’s when you stop hiding behind people who aren’t ready to move and decide to carry the thing yourself.

I used to say I loved taking ownership, but October was the first time I actually did.

And honestly, I was terrified.
But I finished. And that changed me.

Learning to Pay Attention

One of my quiet goals this month was to pay attention, really pay attention.
I realized my attention span is bad, and it affects more than just my work. It affects how deeply I experience things.

So, I tried to slow down.
Read slower. Code slower. Notice things.
It’s weird how much peace comes from simply being present with what you’re doing.

Sometimes I still drift I catch myself scrolling when I should be focused but awareness itself feels like progress.

Fear, Doubt, and the Weird Thing About Courage

Before both hackathons, I was scared out of my mind.
I kept asking myself, “Can I really pull this off?”
But I learned something that I’ll probably never forget:

Courage doesn’t show up before you start it shows up while you’re in motion.

You don’t wait until you feel ready. You just move and confidence grows on the way.

Every time I faced something that scared me this month, I came out the other side a little stronger.
Not because the fear disappeared, but because I realized I could move with it.

Being Alone Without Feeling Lonely

This month also taught me about solitude.
For a while, I used to depend on people not because I couldn’t do things alone, but because it felt safer to stay in the background.

But this time, I didn’t.
I stood alone. I built alone. I worked alone when I had to.
And it didn’t feel lonely it felt grounding.

There’s something beautiful about learning that your own company isn’t a punishment.
Sometimes it’s exactly what you need to find your identity again.

When Everything Feels Important

This one hit me hard.
Lately, I’ve been drowning in “important” things.
Work, gym, learning, family, self-care everything screams for attention.
And when everything feels urgent, you start feeling like you’re failing at all of it.

A former colleague told me something that changed my perspective:
“When everything feels important, look at it from the lens of time. Which one needs you now, and which one can wait?”

That made sense.
I don’t need to do everything right now. Some things are meant for later and that’s okay.

Love, Growing Up, and Taking Responsibility

I’m turning a year older soon.
And honestly? That thought scares me a little.
Not because of the number, but because of what it means more responsibility, more expectations, more eyes looking up to me.

But I’ve also learned to slow down and love myself through the process.
To take care of myself the way I take care of my code patiently, with debugging, with retries.
And to treat my siblings with more kindness, because they’re watching me figure this out in real time.

Closing Thoughts: Just Getting Started

When I look back at October, I don’t see perfection.
I see growth. I see fear. I see small wins that still mattered deeply.

I see someone who’s learning to take himself seriously to believe that he can handle life one decision at a time.

I’m scared about the future, yes but I’m also excited.
Because if October taught me anything, it’s that I’m just getting started.

There’s still so much to learn, so much to build, and so many versions of me waiting to be discovered.

And if you’re reading this and feeling stuck or unsure, here’s what I’ll say:
Don’t wait to feel ready.
Start with fear. Start with doubt.
But start anyway.

Because that’s how courage finds you.

Written by Abdul-muiz Hamzat, a young man building, learning, and figuring life out one step at a time.

How to Create a One-Time Payment Link and Secure Webhook Integration with Stripe

Hamzat Abdul-muizz — Fri, 24 Oct 2025 21:03:37 +0000

Introduction

Stripe is an online payment platform for securely accepting credit cards, bank transfers, and more.
This guide demonstrates an end-to-end integration using Stripe Checkout Sessions for one-time payments and a tamper-proof server webhook to confirm transactions.

Terminology: "Payment Link" here refers to the URL returned by a Stripe Checkout Session (not Stripe's no-code "Payment Links" product).

Payment Flow Overview

Client clicks "Pay Now".
Backend creates a unique Checkout Session and returns the session URL.
Client is redirected to Stripe, completes payment, and is redirected to your success URL.
Stripe sends an asynchronous webhook (server-to-server) to your backend.
Backend verifies the webhook signature, updates the database, and fulfills the order.
Client gains access to the purchased resource.

Textual Diagram (ASCII)

Client (browser)
    |
    | Click "Pay Now"
    v
Backend (your server)
    - create Checkout Session -> returns session.url
    |
    | Redirect to Stripe Checkout
    v
Stripe Checkout (Hosted)
    - collects payment
    |                       \
    | Redirect to success_url   POST webhook -> /api/webhook
    v                       /
Client (success_url)       /
                          v
Backend Webhook Handler <-- verifies signature, idempotency, updates DB
    |
    v
Fulfillment / Grant access to client

Quick Setup

1. Install packages

npm install stripe dotenv

2. .env (example)

STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
CLIENT_URL=http://localhost:5173

3. Initialize Stripe

// src/utils/stripe.ts
import Stripe from 'stripe';
import 'dotenv/config';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string,);

export default stripe;

Create Checkout Session (Backend Route)

Create a route that makes a Checkout Session and returns session.url:

// routes/payment.ts
import { Request, Response } from 'express';
import stripe from '../utils/stripe';

export const createCheckoutSession = async (req: Request, res: Response) => {
  const { id } = req.body;
  const existingProduct = { id, price: 4000, name: "Hamza's Coffee" };

  try {
    const session = await stripe.checkout.sessions.create({
      mode: 'payment',
      payment_method_types: ['card', 'link'],
      line_items: [{
        price_data: {
          currency: 'usd',
          product_data: { name: existingProduct.name, description: 'Payment for services rendered' },
          unit_amount: existingProduct.price,
        },
        quantity: 1,
      }],
      success_url: `${process.env.CLIENT_URL}/payment/success?session_id={CHECKOUT_SESSION_ID}`,
      cancel_url: `${process.env.CLIENT_URL}/payment/cancel`,
      metadata: { product_id: existingProduct.id }
    });

    res.status(201).json({ message: 'Payment Initialized Successfully', data: { url: session.url } });
  } catch (error) {
    res.status(500).json({ message: 'Error initializing payment.' });
  }
};

Webhook: Raw Body & Signature Verification

Define the webhook route before express.json() so the raw body can be used for signature verification.

Server Example

// server.ts
import express from 'express';
import bodyParser from 'body-parser';
import { webhookHandler } from './routes/webhook';
import { createCheckoutSession } from './routes/payment';

const app = express();

// Raw parser for webhook route only
app.post('/api/webhook', bodyParser.raw({ type: 'application/json' }), webhookHandler);

// Then JSON parser for all other routes
app.use(express.json());
app.post('/api/create-payment-link', createCheckoutSession);

app.listen(4000, () => console.log('Server running on port 4000'));

Webhook Handler

// routes/webhook.ts
import { Request, Response } from 'express';
import Stripe from 'stripe';
import stripe from '../utils/stripe';
import dotenv from 'dotenv';
dotenv.config();

export const webhookHandler = async (req: Request, res: Response) => {
  const sig = req.headers['stripe-signature'] as string;
  let event: Stripe.Event;

  try {
    event = stripe.webhooks.constructEvent(req.body, sig, process.env.STRIPE_WEBHOOK_SECRET!);
  } catch (err: any) {
    console.error('Webhook signature verification failed:', err.message);
    return res.status(400).send(`Webhook Error: ${err.message}`);
  }

  if (event.type === 'checkout.session.completed') {
    const session = event.data.object as Stripe.Checkout.Session;
    const productId = session.metadata?.product_id;

    if (productId && session.payment_status === 'paid') {
      // IDEMPOTENCY: ensure session.id hasn't been processed already
      // Example: if (!db.processed(session.id)) { db.markProcessed(session.id); grantAccess(productId); }
      console.log(`Payment confirmed for product ID: ${productId}`);
    }
  }

  res.status(200).json({ received: true });
};

Local Testing with Stripe CLI

Forward events:

stripe listen --forward-to localhost:4000/api/webhook

Copy the whsec_... key from the CLI output into .env as STRIPE_WEBHOOK_SECRET.
Trigger event:

stripe trigger checkout.session.completed

Deployment Checklist

Deploy backend to production.
Register your live webhook URL in Stripe Dashboard (Developers → Webhooks) and subscribe to checkout.session.completed.
Set STRIPE_SECRET_KEY and STRIPE_WEBHOOK_SECRET in your production environment.
Ensure idempotency checks on webhook processing.

Rationale / Key Decisions

Raw body required so Stripe signature can be verified.
Signature verification prevents forged events.
Idempotency avoids duplicate fulfillment on retries.
Stripe CLI simplifies local testing.

My Hackathon Experience: Building Blaut and Pushing My Limits

Hamzat Abdul-muizz — Sat, 18 Oct 2025 11:09:40 +0000

Last week, I took part in a hackathon that turned out to be one of the most intense and rewarding experiences I’ve ever had.

It was organized around the idea of using the BlockDAG chain to build something secure and innovative and my team and I decided to build a decentralized file storage and emergency management system.

We called it Blaut a decentralized file storage and emergency management system designed to ensure that sensitive personal data can be securely stored, encrypted, and accessed only when needed.

GitHub Repository

Live App

Demo Video
Pitch Deck

The Impulsive Start

To be honest, I registered impulsively.

I didn’t overthink it I just saw the hackathon and said:

“You know what, let’s do this.”

I’ve been meaning to participate in more hackathons, not because of the prize or fame, but to push my limits and see how far I can go when I’m uncomfortable.

At first, I was skeptical.

“What if I join and can’t keep up?”

But then I thought what’s the worst that can happen?

I might not win, but I’ll definitely learn something new.

And that’s exactly what happened.

The Idea: Blaut Secure File & Emergency Management

The hackathon theme was centered around security and privacy, and one of the examples the organizers gave was about medical emergencies situations where quick access to sensitive data could save lives.

That inspired us to create Blaut, a secure, decentralized file storage system where users could encrypt their files on-chain and grant emergency access to selected people, like doctors or family members.

In short:

It’s like Google Drive meets Web3 encryption, with an emergency access layer.

We wanted it to be zero-knowledge, meaning even the platform itself wouldn’t have access to users’ files only the file owner and the people they gave permission to.

The Pressure Moments

There were a few points during the hackathon when things got really tense.

The Encryption Crisis

The first one hit when I realized our encryption logic was completely wrong.

Initially, we were encrypting files using a randomly generated token and storing both the encrypted file and the token in our database.

That meant anyone with access to both could technically decrypt the file which broke our “zero-knowledge” promise.

I discovered this flaw on the second day, just when I thought we were almost done.

My heart dropped.

I didn’t even want to tell anyone I just went silent, staring at my code, trying to figure it out.

Eventually, I realized that if we signed the transaction before encryption, we could introduce an extra layer of security.

But before that moment of clarity, I was honestly panicking.

The Deployment Drama

The second stressful moment was deploying the smart contract.

We wrote our code in Solidity and tested it on the Sepolia testnet, but the hackathon required us to deploy on BlockDAG’s EVM-compatible chain.

I went to their dev support, but it felt like they were just as confused as I was.

One person even told me they deployed theirs on Solana, which made zero sense because this was an EVM hackathon.

At that point, it was less than an hour to the deadline, and the chain’s own deployment site was acting up.

I was just done.

I felt the tension, my teammates were asking for updates, and I couldn’t even keep my cool.

I lashed out a bit, which I regret but I was really overwhelmed.

The Proud Moments

Despite all that chaos, there were some really proud moments.

When I looked at what we built, I was genuinely amazed.

The UI was beautiful big shout-out to our designer and front-end teammates: Abdul Samad, Basqi, and Anonymous.

We didn’t even merge everything completely because of time, but what we had looked clean and functional.

There was also a funny moment during our pitch deck preparation we were all fighting sleep but still brainstorming, laughing, and pushing through.

Those little moments made me realize how amazing teamwork can be, even under pressure.

What I Learned About Myself

This hackathon taught me one big thing:

I can do anything.

No problem is too big to overcome with enough patience and persistence.

There were times I wanted to give up, but something in me said, “Just keep going.”

Even though we didn’t make the top three and trust me, that hurt I still left proud.

I compared what we built to some of the other projects, and honestly, ours was solid.

Fully functional, deployed (even if not on BlockDAG), with a clear use case and good design.

But you know what?

Losing didn’t mean failing.

It just meant I needed to keep growing.

Reflection

Hackathons are chaotic, messy, and full of emotions but they are also the best playgrounds for growth.

I learned how to manage pressure, delegate tasks, coordinate with teammates, and still find joy in the process.

I also learned to give myself grace things won’t always go your way, and that’s okay.

What matters is what you take away from the experience.

What’s Next

For me, the goal now is simple:

Keep building. Keep learning. Keep showing up.

I want to focus on personal development sharpen my technical skills, get better at leading teams, and join more hackathons.

It’s not just about winning anymore.

It’s about exposure to possibilities, discovering how far I can push myself, and unlocking opportunities beyond a 9-to-5.

Someday, I want to become a founder not just a participant.

And I believe this journey, one hackathon at a time, is leading me there.

Final Thought

If you’ve never joined a hackathon before, here’s my advice:

Just do it.

Don’t overthink it.

You’ll either win, or you’ll learn — and both are wins in their own way.

Plus, there’s free food. 😄

How to Design Modular Smart Contract In Solidity with Diamond Standard (EIP-2535)

Hamzat Abdul-muizz — Mon, 16 Jun 2025 20:32:01 +0000

1. Introduction

Solidity is one of the most widely used programming languages in the Web3 space, especially on Ethereum and Ethereum Virtual Machine (EVM) compatible chains. As smart contract development has evolved, developers have encountered several challenges, particularly when trying to build complex, upgradeable, and gas-efficient contracts.

One major limitation is Solidity's 24KB maximum contract size, which restricts the amount of logic that can be deployed in a single contract. This has led developers to explore different upgradeability patterns and modular architectures.

To address these limitations, Nick Mudge proposed the Diamond Standard (EIP-2535). This standard provides a framework for building modular, upgradeable smart contracts in a structured way. By organizing contract logic into "facets" and using a single entry point, developers can scale their applications beyond Solidity's size limit while keeping the code maintainable and gas-efficient.

2. The Problems with Traditional Solidity Design

Before understanding the Diamond Standard, it's important to identify the key problems it solves:

Contract size limit: Solidity contracts cannot exceed 24KB in size when deployed, which restricts the amount of logic that can be included.
Tight coupling: Logic is often bundled together, making it hard to isolate and upgrade specific parts.
Upgrade limitations: Traditional upgrade patterns (e.g., proxies) can be limiting and error-prone.
Gas inefficiency: Repetitive or redundant logic in monolithic contracts can increase gas usage.

These issues make it difficult to scale smart contract systems and maintain clean architecture.

3. What is the Diamond Standard (EIP-2535)?

The Diamond Standard is a smart contract architecture pattern that enables modularity and upgradeability. It allows you to break down your smart contract logic into separate modules called facets, while maintaining a single contract interface (the diamond).

Think of it as a smart contract plugin system:

The Diamond acts as a router.
The Facets contain modular business logic.
A fallback function dynamically delegates calls to the correct facet.

This setup enables an application to have unlimited functionality, even beyond the 24KB contract limit.

Comparison with Other Patterns

Pattern	Modular	Upgradeable	Bypasses 24KB Limit
Proxy	No	Yes	Yes
Beacon Proxy	Partial	Yes	Yes
Diamond	Yes	Yes	Yes

4. Core Building Blocks (Conceptual Foundation)

4.1 Storage Slot and Variable Packing

Solidity stores variables in 32-byte (256-bit) storage slots. To save gas, Solidity will try to pack variables tightly into the same slot if possible.

For example:

uint64 a = 1;   // 8 bytes
bool b = true; // 1 byte
uint64 c = 2;   // 8 bytes

All three variables can fit in a single 32-byte slot:

uint64 = 8 bytes
bool = 1 byte (packed to 1 byte)

Variable Packing Tip:

Always order small data types together to reduce unused space.

4.2 Function Call vs Delegate Call

Call: Executes logic in the callee contract and modifies its own state.
Delegatecall: Executes logic in the callee contract but modifies the caller contract's state.

(bool success, ) = otherContract.call(abi.encodeWithSignature("doSomething()"));

This modifies otherContract's state.

(bool success, ) = otherContract.delegatecall(abi.encodeWithSignature("doSomething()"));

This modifies the caller’s state — useful for the diamond pattern where all state is kept in one place.

4.3 Function Signature & Selector

Function Signature: A string like "deposit(uint256)"
Selector: First 4 bytes of the keccak256 hash of the signature.

bytes4 selector = bytes4(keccak256("deposit(uint256)"));

Used for routing function calls in the fallback function.

5. Anatomy of the Diamond Standard

5.1 The Diamond (Entry Point)

This is the main contract. It uses a fallback() function to dynamically route calls to the right facet using delegatecall.

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.19;

import {DepositFacet} from "./DepositFacet.sol";
import {WithdrawFacet} from "./WithdrawFacet.sol";

contract Diamond {
    mapping(bytes4 => address) public selectorToFacet;

    constructor() {
        selectorToFacet[bytes4(keccak256("deposit()"))] = address(new DepositFacet());
        selectorToFacet[bytes4(keccak256("getMyBalance()"))] = address(new DepositFacet());
        selectorToFacet[bytes4(keccak256("withdraw(uint256)"))] = address(new WithdrawFacet());
    }

    fallback() external payable {
        address facet = selectorToFacet[msg.sig];
        require(facet != address(0), "Function not found");

        assembly {
            calldatacopy(0, 0, calldatasize())
            let result := delegatecall(gas(), facet, 0, calldatasize(), 0, 0)
            returndatacopy(0, 0, returndatasize())

            switch result
            case 0 { revert(0, returndatasize()) }
            default { return(0, returndatasize()) }
        }
    }

    receive() external payable {}
}

5.2 Facets

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.19;

import { LibAppStorage } from "./DiamondStorage.sol";

contract DepositFacet {
    function deposit() external payable {
        LibAppStorage.AppStorage storage s = LibAppStorage.getStorage();
        s.balances[msg.sender] += msg.value;
        s.totalBalance += msg.value;
    }

    function getMyBalance() external view returns (uint256) {
        LibAppStorage.AppStorage storage s = LibAppStorage.getStorage();
        return s.balances[msg.sender];
    }
}

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.19;

import { LibAppStorage } from "./DiamondStorage.sol";

contract WithdrawFacet {
    function withdraw(uint256 amount) external {
        LibAppStorage.AppStorage storage s = LibAppStorage.getStorage();
        require(s.balances[msg.sender] >= amount, "Insufficient balance");

        s.balances[msg.sender] -= amount;
        s.totalBalance -= amount;
        payable(msg.sender).transfer(amount);
    }
}

5.3 Diamond Storage

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.19;

library LibAppStorage {
    struct AppStorage {
        uint256 totalBalance;
        mapping(address => uint256) balances;
        address owner;
    }

    bytes32 constant DIAMOND_STORAGE_POSITION = keccak256("diamond.storage.article");

    function getStorage() internal pure returns (AppStorage storage s) {
        bytes32 position = DIAMOND_STORAGE_POSITION;
        assembly {
            s.slot := position
        }
    }
}

6. Putting It All Together (Code Example)

Assume we have 4 files:

Diamond.sol (entry point)
DepositFacet.sol
WithdrawFacet.sol
DiamondStorage.sol

Deployment Steps in Remix:

Deploy DepositFacet and WithdrawFacet to get their addresses.
Deploy Diamond.sol, mapping selectors in the constructor.
Use the Diamond contract address in Remix's "At Address" to interact with it.

7. Testing & Interaction (in Remix)

Deploy DepositFacet and WithdrawFacet first to get their addresses.
Then deploy Diamond.sol, passing in those addresses during setup.
Use At Address in Remix to interact with Diamond.
The fallback function ensures any calls to known selectors are routed to the correct facet.

8. Real-World Use Cases

Aavegotchi uses the Diamond Standard to power its modular gaming contracts.
Any dApp that needs to scale beyond 24KB or separate logic by domain.

Use cases include:

DeFi protocols
DAOs
On-chain games
Cross-chain bridge contracts

9. Pros and Cons

✅ Pros

Scalable and modular
Upgradeable
Efficient storage organization
Encourages separation of concerns

❌ Cons

Complexity in setup
Requires good understanding of low-level calls and storage
Less tooling support than proxies

10. Conclusion

The Diamond Standard (EIP-2535) solves critical challenges in Solidity contract development: modularization, upgradability, and size limitations. By routing calls through a central diamond and organizing logic into facets, developers can write more maintainable and scalable smart contracts.

If you're building a serious dApp with complex logic or expect your contract to grow in the future, the Diamond pattern is worth considering.

If you found this article helpful, don’t forget to leave a like and drop a comment it really helps!

🔗 Stay connected:

How to Set Up a PostgreSQL Database with Drizzle ORM and Neon DB in Node.js

Hamzat Abdul-muizz — Tue, 03 Jun 2025 14:46:45 +0000

Introduction

Working with SQL databases in Node.js doesn't have to feel like writing a PhD thesis in raw SQL. In this guide, you'll learn how to build a simple but real-world Todo List App using modern tools: TypeScript, Drizzle ORM, and Neon DB.

Whether you're a beginner or looking to level up your backend workflow, this article will help you set up a type-safe, scalable, and serverless-ready SQL database using PostgreSQL without the usual headache.

What Is a Relational vs Non-Relational Database?

Before we dive into the tools, let's clarify two core types of databases:

Relational Database

A relational database organizes data into tables (rows and columns). These tables can be connected (or related) using keys like user_id. It's ideal when data consistency and structure are important.

Example (PostgreSQL Schema):

CREATE TABLE todos (
  id SERIAL PRIMARY KEY,
  task TEXT NOT NULL,
  completed BOOLEAN DEFAULT FALSE
);

Non-Relational Database

A non-relational database (often called NoSQL) stores data in formats like documents (JSON), key-value pairs, or graphs. It's more flexible and scalable for unstructured or fast-changing data.

Example (MongoDB Document):

{
  "_id": "1",
  "task": "Buy milk",
  "completed": false
}

🛠️ What Is an ORM?

ORM stands for Object-Relational Mapping. It's a tool that lets you write database queries using your application's language (like TypeScript), instead of raw SQL.

It helps with:

Type safety
Cleaner, more maintainable code
Fewer bugs and less boilerplate

Without ORM:

INSERT INTO todos (task, user_id) VALUES ('Buy milk', 1);

With ORM (Drizzle):

await db.insert(todos).values({ task: "Buy milk", userId: 1 });

Meet Drizzle ORM

Drizzle ORM is a TypeScript-first ORM with:

Strong typing
Lightweight and fast
Serverless-ready
Familiar SQL-like syntax

As their docs put it, it's a "headless TypeScript ORM with a head" — meaning it gives you control without losing flexibility or dev experience.

What Is Neon DB?

Neon is a fully managed serverless PostgreSQL database designed for modern apps. It offers:

Git-style branching for databases
Auto-scaling serverless architecture
Generous free tier
Smooth integration with Drizzle and other tools

In short: it's PostgreSQL for the cloud-native era.

How Do Drizzle and Neon Work Together?

These two tools are made for each other:

Neon hosts your cloud-based PostgreSQL database
Drizzle connects to Neon using a connection string
You write type-safe queries in Drizzle, and Neon runs them

Example setup:

import { neon } from '@neondatabase/serverless';
import { drizzle } from 'drizzle-orm/neon-http';

const sql = neon(process.env.DATABASE_URL!);
const db = drizzle(sql);

Example query:

await db.select().from(todos).where(eq(todos.userId, 1));

Getting Started

Let's begin by setting up our Node.js project.

Prerequisites

Make sure you have Node.js installed. If not, download it here.

Project Setup

Step 1: Create Project Folder

Create a folder and give it any name (we'll use todo-api-drizzle-neon):

mkdir todo-api-drizzle-neon
cd todo-api-drizzle-neon

Step 2: Initialize the Project

Run:

npm init -y

This will create a package.json file for you.

Step 3: Create the Source Folder

Inside your root folder, create a src folder. This is where your app logic will live.

Then create an index.ts file inside it:

todo-api-drizzle-neon/
└── src/
    └── index.ts

Step 4: Install Dependencies

Install the required packages:

npm install express drizzle-kit drizzle-orm typescript @neondatabase/serverless dotenv
npm install --save-dev @types/express

Your package.json should now look like this:

{
  "name": "todo-api-drizzle-neon",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon src/index.ts",
    "db:push": "drizzle-kit push",
    "db:studio": "drizzle-kit studio",
    "db:generate": "drizzle-kit generate",
    "db:migrate": "tsx ./src/db/migrate.ts"
  },
  "dependencies": {
    "@neondatabase/serverless": "^0.10.4",
    "dotenv": "^16.5.0",
    "drizzle-kit": "^0.31.1",
    "drizzle-orm": "^0.44.1",
    "express": "^5.1.0",
    "typescript": "^5.8.3"
  },
  "devDependencies": {
    "@types/express": "^5.0.2"
  }
}

Step 5: Create a tsconfig.json File

Create a tsconfig.json file in your root directory:

{
  "compilerOptions": {
    "lib": ["es5", "es6"],
    "target": "ES2018",
    "module": "commonjs",
    "moduleResolution": "node",
    "rootDir": "./src",
    "outDir": "dist",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "typeRoots": ["./src/types", "./node_modules/@types"]
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

Setting Up the Database

Step 1: Create a Neon Account

Go to https://neon.tech and sign up for a free account
Create a new project
Copy your connection string from the dashboard

Step 2: Set Up Environment Variables

Create a .env file in your project root:

DATABASE_URL="your-neon-connection-string"
PORT=4000

Also, create a .gitignore file:

node_modules
.env

Step 3: Create Database Schema

Create src/db/schema.ts:

import { pgTable, serial, text, boolean } from 'drizzle-orm/pg-core';

export const todos = pgTable('todos', {
  id: serial('id').primaryKey(),
  task: text('task').notNull(),
  completed: boolean('completed').default(false),
});

Step 4: Set Up Database Connection

Create src/db/index.ts:

import dotenv from 'dotenv';
dotenv.config();

import { neon } from '@neondatabase/serverless';
import { drizzle } from 'drizzle-orm/neon-http';
import * as schema from './schema';

const sql = neon(process.env.DATABASE_URL!);
export const db = drizzle(sql, { schema });

Step 5: Configure Drizzle

Create drizzle.config.ts:

import * as dotenv from 'dotenv';
import { defineConfig } from 'drizzle-kit';

dotenv.config();

export default defineConfig({
  schema: './src/db/schema.ts',
  out: './drizzle',
  dialect: 'postgresql',
  dbCredentials: {
    url: process.env.DATABASE_URL!
  },
  migrations: {
    table: '__drizzle_migration',
    schema: 'public'
  },
  verbose: true,
  strict: true
});

Step 6: Push Schema to Database

Run:

npm run db:push

Implementing the Todo API

Now that our database is set up, let's create a RESTful API for managing todos.

Project Structure

src/
├── db/
│   ├── index.ts    # Database connection
│   ├── schema.ts   # Table definitions
│   └── migrate.ts  # Migration script
├── routes/
│   └── todos.ts    # Todo API endpoints
└── index.ts        # Express app setup

Step 1: Create Express Server

Update src/index.ts:

import express from 'express';
import dotenv from 'dotenv';
import todoRoutes from './routes/todos';

dotenv.config();

const app = express();
const PORT = process.env.PORT || 4000;

// Middleware
app.use(express.json());

// Routes
app.use('/api/todos', todoRoutes);

// Health check endpoint
app.get('/health', (_req, res) => {
  res.json({ status: 'ok' });
});

// Centralized error handling middleware
app.use((err: Error, _req: express.Request, res: express.Response, _next: express.NextFunction) => {
  console.error(err.stack);
  res.status(500).json({ 
    error: 'Something went wrong!' 
  });
});

app.listen(PORT, () => {
  console.log(`🚀 Server running at http://localhost:${PORT}`);
});

Step 2: Implement Todo Routes

Create src/routes/todos.ts:

import { Router, RequestHandler } from 'express';
import { db } from '../db';
import { todos } from '../db/schema';
import { eq } from 'drizzle-orm';

const router = Router();

// Create a new todo
const createTodo: RequestHandler = async (req, res, next) => {
  try {
    const { task } = req.body;

    if (!task || typeof task !== 'string') {
      res.status(400).json({ 
        error: 'Task is required and must be a string' 
      });
      return;
    }

    const [newTodo] = await db.insert(todos)
      .values({ task })
      .returning();

    res.status(201).json(newTodo);
  } catch (error) {
    next(error); // Pass to error handling middleware
  }
};

// Get all todos
const getAllTodos: RequestHandler = async (_req, res, next) => {
  try {
    const allTodos = await db.select().from(todos);
    res.json(allTodos);
  } catch (error) {
    next(error);
  }
};

// Get a single todo
const getTodoById: RequestHandler = async (req, res, next) => {
  try {
    const id = parseInt(req.params.id);

    if (isNaN(id)) {
      res.status(400).json({ 
        error: 'Invalid todo ID' 
      });
      return;
    }

    const [todo] = await db.select()
      .from(todos)
      .where(eq(todos.id, id));

    if (!todo) {
      res.status(404).json({ 
        error: 'Todo not found' 
      });
      return;
    }

    res.json(todo);
  } catch (error) {
    next(error);
  }
};

// Update a todo
const updateTodo: RequestHandler = async (req, res, next) => {
  try {
    const id = parseInt(req.params.id);
    const { task, completed } = req.body;

    if (isNaN(id)) {
      res.status(400).json({ 
        error: 'Invalid todo ID' 
      });
      return;
    }

    // Validate input
    if (task !== undefined && typeof task !== 'string') {
      res.status(400).json({ 
        error: 'Task must be a string' 
      });
      return;
    }

    if (completed !== undefined && typeof completed !== 'boolean') {
      res.status(400).json({ 
        error: 'Completed must be a boolean' 
      });
      return;
    }

    // Update todo
    const [updatedTodo] = await db.update(todos)
      .set({ 
        ...(task !== undefined && { task }),
        ...(completed !== undefined && { completed })
      })
      .where(eq(todos.id, id))
      .returning();

    if (!updatedTodo) {
      res.status(404).json({ 
        error: 'Todo not found' 
      });
      return;
    }

    res.json(updatedTodo);
  } catch (error) {
    next(error);
  }
};

// Delete a todo
const deleteTodo: RequestHandler = async (req, res, next) => {
  try {
    const id = parseInt(req.params.id);

    if (isNaN(id)) {
      res.status(400).json({ 
        error: 'Invalid todo ID' 
      });
      return;
    }

    await db.delete(todos)
      .where(eq(todos.id, id));

    res.status(204).send();
  } catch (error) {
    next(error);
  }
};

// Register routes
router.post('/', createTodo);
router.get('/', getAllTodos);
router.get('/:id', getTodoById);
router.patch('/:id', updateTodo);
router.delete('/:id', deleteTodo);

export default router;

Step 3: Test the API

Start the server:

npm run dev

Test the endpoints using curl or Postman:

Create a todo:

curl -X POST http://localhost:4000/api/todos \
  -H "Content-Type: application/json" \
  -d '{"task": "Learn Drizzle ORM"}'

Get all todos:

curl http://localhost:4000/api/todos

Get a specific todo:

curl http://localhost:4000/api/todos/1

Update a todo:

curl -X PATCH http://localhost:4000/api/todos/1 \
  -H "Content-Type: application/json" \
  -d '{"completed": true}'

Delete a todo:

curl -X DELETE http://localhost:4000/api/todos/1

Conclusion

In this guide, we've built a type-safe Todo API using:

TypeScript for type safety
Drizzle ORM for database operations
Neon for serverless PostgreSQL
Express for the API server

The result is a modern, scalable, and maintainable backend that's ready for production use. With TypeScript and Drizzle, we gain excellent type safety and developer experience. Neon gives us a cloud-native database that scales effortlessly.

If you found this article helpful, don’t forget to leave a like and drop a comment it really helps!

🔗 Stay connected:

Project Repository: View it on GitHub

Thanks for reading, and happy coding! 🚀

Transitioning from Web2 to Web3: A Developer’s Guide to the Base Ecosystem

Hamzat Abdul-muizz — Fri, 01 Nov 2024 11:39:55 +0000

Understanding Web2 and Web3

In today’s digital world, two terms that often arise are Web2 and Web3, each marking a unique phase in internet evolution.

Web2: This is the internet most people use today, which began in the early 2000s. Web2 introduced interactive websites, allowing users to contribute content instead of merely consuming it. Social media platforms, e-commerce, and sites with user-generated content like YouTube and Wikipedia emerged during this era. However, Web2 is largely centralized, with a few big players like Google, Facebook, and Amazon controlling significant amounts of user data. This has raised privacy and data security concerns.
Web3: The next internet evolution, Web3, is centered around decentralization and blockchain technology. It empowers users to own their data and digital assets. Transactions occur on transparent, decentralized ledgers, and applications run on distributed networks rather than centralized servers. Key elements of Web3 include smart contracts (self-executing contracts on the blockchain), decentralized finance (DeFi), non-fungible tokens (NFTs), and decentralized autonomous organizations (DAOs). This movement aims to give users control over their digital interactions.

For developers transitioning from Web2 to Web3, the Base ecosystem offers a welcoming entry point, combining blockchain’s potential with tools that simplify building scalable Web3 applications.

Introducing the Base Ecosystem

Base is a Layer 2 scaling solution on Ethereum, designed to be secure, low-cost, and developer-friendly. Built on Ethereum, Base offers a robust, scalable environment ideal for decentralized applications (dApps). It is fully Ethereum Virtual Machine (EVM)-compatible, meaning that developers familiar with Solidity can seamlessly transfer their skills to Base.

Why Develop on Base?

EVM Compatibility: Base supports Ethereum-compatible smart contracts, enabling developers to use tools like Solidity, Hardhat, and Remix.
Security and Scalability: Leveraging Ethereum’s security, Base enables high throughput with lower gas costs—essential for scalable dApp development.
Decentralization and Interoperability: Base’s decentralized design provides developers access to tools and protocols compatible across blockchain platforms.

Key Concepts for Web2 Developers

Transitioning from Web2 to Web3 involves some new concepts that differ from traditional architectures:

Smart Contracts: These self-executing contracts are coded on the blockchain, automating transactions without intermediaries. In the Base ecosystem, smart contracts are coded in Solidity and can be tested using Hardhat.
Wallets, Gas Fees, and Transactions:
- Wallets serve as digital identities and manage keys and assets (e.g., Coinbase, MetaMask, etc.).
- Gas Fees are costs for blockchain operations.
- Transactions are cryptographically verified actions on the blockchain and can be explored using tools like Etherscan.
Token Standards: Web3 includes standards like ERC-20 (fungible tokens), ERC-721 (NFTs), and ERC-1155 (multi-token standard). Familiarity with these is essential when developing on Base.

Resources and Tools for Developing on Base

Base has curated resources to help developers start building on Base, accessible here.

Here are some essential tools for development:

Base Onchain Kit: A toolkit with libraries and templates for contract development. Access it here.
Development Environment:
- Hardhat: A popular development environment for Ethereum smart contracts.
- Remix: A web-based IDE for Solidity.
- Truffle Suite: A framework offering testing and deployment capabilities.
Frames development: Building farcatser frames.
Smart Contract Development with Solidity:
- Explore Solidity fundamentals and best practices with this in-depth Solidity course designed to guide developers from beginner to advanced concepts.

Tutorials and Learning Pathways

These tutorials provide structured learning for new Web3 developers:

Base Quick Start Guide: This guide covers wallet setup, writing a smart contract, and deploying it on Base. Start here.
Solidity Tutorial: Learn Solidity, the main language for smart contracts, with this guide.
Bridging Web2 to Web3 Applications: Integrate Web2 apps with Base using APIs and decentralized storage options like IPFS.
Advanced Tutorials:
- NFT Minting: Create unique digital assets with this guide.
- DeFi dApp Development: Develop DeFi applications with this guide.
- Gas Optimization Techniques: Minimize gas costs using this optimization guide.

Community and Support

Base’s community offers extensive resources and networking opportunities:

Developer Community: Join Base’s Discord to connect, share resources, and receive feedback.
Documentation and Updates: Regularly consult Base Documentation for the latest tutorials and technical insights.
Hackathons and Events: Participate in Base’s Events to join hackathons, webinars, and coding sessions.

Tips and Best Practices for Web3 Development

Prioritize Security: Blockchain applications are immutable, so testing is essential. Follow OpenZeppelin’s Security Checklist.
Optimize for Performance: Efficient gas usage is crucial. Follow Ethereum’s Gas Optimization Guide.
Stay Updated: Follow Base’s Blog and the Ethereum Blog for the latest developments.

Final Thoughts

The shift from Web2 to Web3 may seem challenging, but the Base ecosystem provides the tools and community to support you. By leveraging these resources, Web2 developers can navigate the Web3 space and build impactful decentralized applications. Whether interested in DeFi, NFTs, or dApps, Base offers an accessible, scalable platform to begin your Web3 journey.

If you found this article helpful, feel free to share it with family and friends.

Let’s bring everyone on-chain. Based Builders 🚀🔵

Connect with me on X/Twitter, Warpcast

Introduction To Blockchain

Hamzat Abdul-muizz — Tue, 17 Sep 2024 20:33:16 +0000

Introduction

Imagine a world where you don’t need banks to transfer money or middlemen to verify your contracts. A world where every transaction you make is secure, transparent, and cannot be tampered with. Welcome to the world of blockchain, a technology poised to change the way we interact with money, information, and each other.

Blockchain is a decentralized network of computers that share a synchronized history of transactions. Unlike traditional systems that are controlled by a central authority, blockchain is open for everyone to view and verify, ensuring transparency and security. Once recorded, data on the blockchain cannot be altered, making it immutable (once the transaction has been recorded, it can't be changed).

How do we (you and I) benefit from blockchain technology?

Blockchain technology is transforming the way industries operate, offering solutions to everyday challenges. Here’s how it benefits us directly:

Finance: Blockchain enables faster, more secure, and transparent transactions, reducing the need for middlemen like banks. This means lower fees and more control over our finances.
Supply Chain Management: We can now track the origin and journey of products we buy, ensuring authenticity and transparency, whether it's food, clothing, or electronics.
Government: With blockchain, public records such as voting and land titles are more secure and transparent, giving us greater trust in the system and reducing the risk of fraud or tampering.
Healthcare: Our medical records can be securely stored on the blockchain, ensuring our privacy while still allowing quick and accurate access to doctors when needed.

These examples show how blockchain is not just a buzzword—it's actively improving transparency, reducing costs, and increasing security in various sectors that affect our daily lives.

Key Features of Blockchain:

Distributed: Available to everyone on the network.
Decentralized: No single entity controls the system.
Immutable: Once recorded, transactions cannot be changed or deleted.

Blockchain vs Bitcoin: Are They the Same?

Blockchain and Bitcoin are often confused, but they are not the same.

Blockchain is the underlying technology, a decentralized ledger that records transactions.
Bitcoin is a digital currency (cryptocurrency) that operates on a blockchain.

Blockchain can power much more than just Bitcoin. It is used in various industries to record all kinds of transactions and data. Think of Bitcoin as just one application of blockchain technology.

Rise of Ethereum: The Next Step in Blockchain

While Bitcoin proved that we could have decentralized digital currency, Ethereum took blockchain technology a step further. Ethereum introduced a platform where developers can build decentralized applications (dApps) and smart contracts, opening up endless possibilities.

Unlike Bitcoin, which focuses solely on currency, Ethereum provides a framework for developing software on a decentralized network.

What is a Smart Contract?

A smart contract is a self-executing program stored on the blockchain that automatically enforces the terms of an agreement. These contracts eliminate the need for intermediaries, like lawyers or banks, making transactions faster and more efficient.

Example:

Imagine you want to buy a house. Instead of using a bank and paying fees, a smart contract can automatically transfer ownership when the payment is made, with no middleman involved.

To create smart contracts, developers use a programming language called Solidity. Since blockchain cannot access real-world data directly, oracles (like Chainlink) provide the necessary data to make these contracts functional.

How Blockchain Transactions are Processed: Layer 1, Layer 2, and Rollups

Blockchain networks use several methods to process transactions efficiently:

Layer 1 (L1): The base layer where transactions are processed directly. Examples include Bitcoin, Ethereum, and Solana. However, Layer 1 can face scalability issues, such as slower processing times and high transaction fees.
Layer 2 (L2): Built on top of Layer 1 to help improve scalability and reduce fees. L2 processes most of the transactions off-chain and sends a summary back to L1 for validation. Examples include Optimistic Roll Ups and Bitcoin's Lightning Network.
Rollups: A type of Layer 2 solution that bundles multiple transactions into a single batch. Only minimal data is submitted to Layer 1, significantly reducing fees and improving processing speeds. There are two types of rollups:
- Optimistic Rollups: Assume transactions are valid unless challenged.
- ZK-Rollups: Use cryptographic proofs to validate transactions off-chain.

Blockchain Terminologies You Need to Know

Understanding blockchain requires knowing some key terms. Here’s a glossary of essential terms:

Decentralization: Control is distributed across the network, not held by one authority.
Consensus Mechanisms: Algorithms that verify transactions. Examples: Proof of Work (PoW), Proof of Stake (PoS).
Nodes: Computers that store and validate copies of the blockchain.
Mining: The process of solving cryptographic puzzles to validate transactions (for PoW systems).
Smart Contracts: Programs that self-execute when conditions are met.
Gas Fees: Costs to perform transactions on a blockchain, such as on Ethereum.

How to Get Started with Blockchain

If you’re new to blockchain and curious about diving deeper, below is some learning material to help you as you proceed in your journey.

Introduction to blockchain
How does a blockchain work - Simply Explained
Blockchain Basics By Cyfrin Updraft
What is Cryptocurrency and how does it work?
Blockchain Facts: What Is It, How It Works, and How It Can Be used

Conclusion

Blockchain is more than a buzzword. It’s a transformative technology reshaping industries by offering transparency, security, and efficiency. Whether it’s powering cryptocurrencies like Bitcoin, enabling decentralized applications through Ethereum, or solving complex problems with smart contracts, blockchain has a wide range of applications that are only growing.

If you found this article helpful, feel free to share your thoughts or join the conversation. You can connect with me on Twitter(X) or explore more of my work on GitHub. Let's dive deeper into this game-changing technology together!

How Much JavaScript is Enough to Learn ReactJS?

Hamzat Abdul-muizz — Wed, 20 Dec 2023 23:40:49 +0000

Introduction

When embarking on my journey to learn ReactJS, I encountered a common challenge: imposter syndrome. The internet was flooded with diverse opinions, leaving me unsure if it was the right time to delve into ReactJS. Amidst the confusion, a particular statement resonated with me: "If you wait to understand everything in JavaScript, you might end up not learning ReactJS." The rationale behind this advice is rooted in the vastness of JavaScript, acknowledging that no one can claim to know it all.

Understanding JavaScript and ReactJS

JavaScript

JavaScript is a scripting/programming language empowering the implementation of complex features on web pages.

ReactJS

ReactJS is a JavaScript library designed to accelerate web application development and enhance overall performance.

JavaScript Fundamentals for ReactJS

1. Higher Order Functions, Callback Functions

Higher Order Function (HOF):
- A function that returns another function or takes another function as an argument.
a. Function returning another function:
```
function implement() {
     return function () {
         console.log("Welcome here!!");
     };
}
```
b. Function taking another function as an argument:
```
function implement(func) {
    func();
}
```
- Callback Function:
  - Any function passed as a parameter to another function.
Use case in ReactJS:
useEffect in ReactJS is an example of a higher-order function, allowing side effects and code execution in response to specific events.
```
useEffect(() => {
    // code block
});
```

2. Arrow Functions and Anonymous Functions

Arrow Function:

A concise way to write functions without the function keyword.

const greet = () => {
    console.log("Hello!");
};

const add = (a, b) => a + b;

Anonymous Function:

Any function without a name.

// Anonymous function using the function keyword
(function () {
    console.log("Welcome to OpenReplay"); 
})();

// Anonymous function using arrow function syntax
(() => { 
  console.log("Welcome to OpenReplay"); 
})();

Use case in ReactJS:
Anonymous functions are often used in React components, especially when defining event handlers.

const componentA = () => {
    return (
        <div>
            <button onClick={function(){console.log("Hello")}}>
                Click me!!!
            </button>
            <button onClick={() => {console.log("Hello")}}>
                Click me!!!
            </button>
        </div>
    );
}

3. Destructuring of Objects and Arrays

Destructuring of Objects:

Extracting specific properties from an object.

const person = { name: 'John', age: 25, country: 'USA' };
const { name, age } = person;

Use case in ReactJS:
Destructuring is commonly used when working with props or state in React components.

const MyComponent = ({ name, age }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

Destructuring of Arrays:

Unpacking values from arrays.

const numbers = [1, 2, 3];
const [firstNumber, secondNumber] = numbers;

Use case in ReactJS:
useState in React is often used with array destructuring to manage component state.

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

4. Spread and Rest Operators

Spread Operator:

Spreading elements of an array or object into a new array or object.

const originalArray = [1, 2, 3];
const copyArray = [...originalArray];

const originalObject = { key1: 'value1', key2: 'value2' };
const copyObject = { ...originalObject };

Use case in ReactJS:
Spreading is handy when passing props to components.

const userComponent = ({ name, age, nationality }) => {
  return (
    <div> 
      <h1>{name}</h1>
      <h1>{age}</h1>
      <h1>{nationality}</h1>
    </div>
  );
}

// Usage with spread operator
<userComponent {...property1}/>

Rest Operator:

Representing an indefinite number of arguments as an array.

// Without rest parameter
function addition(a, b){
    return a + b;
}

// With rest operator
function addition(...input){
    let sum = 0;
    for(let i of input){
        sum+=i;
    }
    return sum;
}

Use case in ReactJS:
The rest operator is often used in function parameters to handle a variable number of arguments.

const DynamicList = ({ title, ...items }) => {
  // Render list dynamically using key-value pairs
  return (
    <div>
      <h2>{title}</h2>
      <ul>
        {Object.entries(items).map(([key, value]) => (
          <li key={key}>
            {key}: {value}
          </li>
        ))}
      </ul>
    </div>
  );
};

5. Array Methods

Array methods are functions used with arrays to perform specific tasks or operations on array elements.

Map Method:

Creates a new array by applying a function to each element of the existing array.

const numbers = [1, 2, 3];
const doubledNumbers = numbers.map(number => number * 2);

Use case in ReactJS:
Mapping is often used to transform arrays into arrays of JSX elements.

const NumberList = ({ numbers }) => {
  const renderedNumbers = numbers.map(number => <li key={number}>{number}</li>);
  return <ul>{renderedNumbers}</ul>;
};

Filter Method:

Creates a new array with elements that pass a specified condition.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);

Use case in ReactJS:
Filtering is useful for selectively rendering or manipulating elements based on a criterion.

const EvenNumbers = ({ numbers }) => {
  const evenNumbersElements = numbers
    .filter(number => number % 2 === 0)
    .map(evenNumber => <p key={evenNumber}>Even Number: {evenNumber}</p>);

  return <div>{evenNumbersElements}</div>;
};

6. Modules (Import and Export)

Modules are a way to structure code and make it more manageable. The export keyword is used to make specific code reusable, while the import keyword is used to bring that code into another file.

// printName.js
export function printName(name) {
    console.log(name);
}

// user.js
import { printName } from "./printName.js";

Usecase In Reactjs
It has a very similar use case with javascript, just as we have used above. Instead of copying and pasting different reusable functions, you can simply import it
Note: Don't forget the export keyword

7. Fetch API, Promises, Async/Await

Fetch API

The Fetch API is a modern JavaScript API that enables making network requests, providing a more powerful and flexible way to handle HTTP requests.

// Example using Fetch API
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Promises

Promises are a mechanism for handling asynchronous operations in JavaScript. A promise can exist in one of three states: pending, resolved (fulfilled), or rejected. It's akin to making a promise, such as committing to washing the car.

// Example of a Promise
const fetchData = new Promise((resolve, reject) => {
  if (/* data is successfully fetched */) {
    resolve(data);
  } else {
    reject('Error fetching data');
  }
});

fetchData
  .then(data => console.log('Data:', data))
  .catch(error => console.error('Error:', error));

Async/Await

Async/await is a syntax sugar built on top of promises, making asynchronous code look and behave more like synchronous code. It provides a more readable and concise way to work with asynchronous functions.

// Example using Async/Await with Fetch API
async function fetchData() {
      try {
           const response = await fetch('https://api.example.com/data');
           const data = await response.json();
           console.log('Data:', data);
       } catch (error) {
           console.error('Error:', error);
       }
 }

 fetchData();

Understanding the Fetch API, promises, and async/await is crucial for handling data fetching and asynchronous operations in ReactJS applications. These concepts provide efficient ways to manage network requests and maintain a responsive user interface.

Conclusion

In the journey of learning ReactJS, mastering the fundamentals of JavaScript is key. This article has offered a comprehensive overview of essential JavaScript concepts and their practical applications in React development. Don't feel overwhelmed—take your time absorbing these concepts.

The knowledge gained here will undoubtedly make your ReactJS learning journey more fulfilling. Happy coding! 😎

All About Open Source

Hamzat Abdul-muizz — Sat, 02 Dec 2023 15:04:13 +0000

Ah, open source. A magical realm of tech wizards, intricate codebases, and... wait, what about the rest of us? Let me spill the beans – the first time I dipped my toes into open source, I felt like a confused penguin in a tech jungle. The code looked like a secret language, and I wondered if contributing meant signing up for a code-war I wasn't ready for.

But here's the gist; open source isn't just for the code whizzes. It's like a digital playground where everyone, no matter their skill level, can join the fun and make a splash.

Basically, Open source is a term that is closely associated with innovation, collaboration, and community-driven development. Open source software is software that is distributed with its source code available for use and modification.

Open Source Opened My eyes to a lot of things, and I am happy I was able to embrace it. Mind you, I am just starting my journey. So you can take this as advice from your younger brother lol.

Open source is for everyone: Even small contributions matter. Fixing bugs, writing documentation, or suggesting ideas can help the project and the community grow.
Embrace learning: The learning never stops in open source. Each contribution is a chance to level up your skills and become a better developer.
Join the community: The open-source community is welcoming and supportive. Don't hesitate to ask questions, share your ideas, and connect with other contributors.
Start small: Don't try to tackle too much at once. Begin with beginner-friendly tasks and gradually build your confidence and skills.
Have fun!: Open source is a journey of discovery, collaboration, and innovation. Enjoy the process and celebrate your contributions.
Embrace the learning: Open source is a rollercoaster of learning curves. Challenges are chances to grow, not roadblocks.
Join the community: It's a friendly space. Ask questions, throw in your ideas, and vibe with other contributors.

Getting Started with Open Sources

The first step is to find a project to contribute to. But how can you find one? Personally, my curiosity is always very high, and I tend to jump on anything that crosses my path. You don't want to be like me. My approach is good but with a lot of limitations.

Putting unnecessary pressure on myself.
Not being able to contribute because I don't have the required skill.
Not excited about the project because it doesn't align with my values, etc.

Because of that, I created a structured guide to find the right project for you.

Identify your Interests and skills: Consider the programming language, and tools, as well as other technical skills like design and writing.
Choose a project Category: There are a lot of project categories: mobile, web, data science, machine learning, etc. Narrow down the category that matches your interest.
Explore Project Repositories on Platforms like GitHub, GitLab, etc: You can leverage the search section to search based on specific keywords that align with you.
Contribute to beginner-friendly issues: It is always advisable to contribute to projects that are beginner-friendly before you advance to projects with more complexity. The reason behind this is to avoid getting overwhelmed with a new codebase.
Join Project Community: Engage with the project community by participating in discussions and asking questions.
Start with small Contributions: It is always advisable to take smaller tasks to familiarize yourself with the project codebase.

There is no doubt that open source is something that almost everyone in the tech ecosystem has heard of at one point or the other. Why is it so popular? Why do we have a lot of open-source enthusiasts?

Transparency: Because the codebase is accessible to everyone, it fosters trust and accountability. With this, users can identify potential security vulnerabilities and fix them.
Collaboration And Connection: Open source is a global community of tech enthusiasts, everyone bringing their expertise, sharing ideas, and viewing things from different perspectives. In the end, you have a chance to build connections with people who share the same interests as you.
Community-Driven Development: Open sources are not driven by profit margin, they are driven by the collective goals and aspirations of the community.
Social Impact: open source often addresses societal challenges such as health care, education, environmental stability, etc. These problems are faced by almost everyone, and a collective solution is considered the best way to solve them.

How to make your first contribution?

Familiarize Yourself with Documentation: Before contributing, it's crucial to understand the project's documentation. This will provide insights into the coding conventions, workflow, and the overall structure of the project.
Version Control Basics: Learn the basics of Git, a widely used version control system, to efficiently manage changes and collaborate with others.
The Contribution Process: Most open-source projects have a contribution guide. Follow the steps outlined in the guide, which typically include forking the repository, creating a new branch, making changes, and submitting a pull request.
Collaboration and Feedback: Be open to collaboration and feedback. Your initial contribution might undergo revisions. Use this as an opportunity to learn and enhance your skills through constructive criticism.
Celebrate Your Contribution: Completing your first contribution is a significant achievement. Celebrate your success, share it with the community, and reflect on what you've learned throughout the process.

Beyond Code: Contributions for Non-Coders

Designers in Open Source: The popular saying is, "The current OSS world is too much developer-centered, and there is no support for things related to product design or icon design." But still, some designers are contributing and people really appreciate them.

Open source projects welcome designers to contribute by improving user interfaces, creating logos, or designing documentation. Platforms like GitHub have specific tags for design-related issues.

There are different ways you can contribute to open source as a designer. You can also help define a style guide to help the project have a consistent visual design. You can also help in creating logos or icons for open source projects. This is a good read to help you find your path in contributing to open source as a designer link.

How can Open source impact your skill?

Practical Skill Development: Open source provides real-world experience. You will be able to work with more experienced developers, tackle real-world problems, and learn from different perspectives.
Demonstrate Expertise: It is a way to show how good you are. With this, potential employers can review your code and have an idea of how much of a problem solver you are.
Expand Portfolio: It showcases versatility and the ability to adapt to different code bases and development environments, preparing you for the challenges you might face while working for a new company.
Career Advancement: That might be where you get noticed by your next employer.
Networking opportunities: It provides a platform to connect and network with people who share the same interests as you. In the process, you can connect with other devs, mentors, your next co-founder, etc.

List of Open source projects you can contribute to

Absolutely, here's a list of beginner-friendly open-source projects along with the developer's name, tech stack, and GitHub link:

Project: First contributions
- Developer: first-contributions
- Tech Stack: HTML, CSS, JavaScript, Documentation, Markdown
- GitHub Link: Firstcontributions/first-contributions
Project: Name Taker
- Developer: OSS Guild
- Tech Stack: HTML, CSS, Markdown, Documentation
- GitHub Link: Open Source Guild/Nametaker
Project: StarterHive
- Developer: ArslanYM
- Tech Stack: React, Node.js, Expressjs
- GitHub Link: ArslanYM/StarterHive
Project: World Presidents
- Developer: VectorChi
- Tech Stack: HTML, CSS Javascript
- GitHub Link: VectorChi/worldpresidents
Project: Grafana
- Developer: Eve Engineer
- Tech Stack: Golang, mysql, postgress
- GitHub Link: Grafana/grafana
Project: Open Project
- Developer: OPF
- Tech Stack: Angular, Ruby
- GitHub Link: opf/openproject
Project: ORCID-Source
- Developer: ORCID
- Tech Stack: Javascript, Java, Postgress
- GitHub Link: ORCID/ORCID-Source
Project: readme-template
- Developer: Dbader
- Tech Stack: Markdown
- GitHub Link: HankPythonista/pythonic-utilities
Project: Data Science for Beginners
- Developer: Iris Analyst
- Tech Stack: Jupyter, Pandas
- GitHub Link: IrisAnalyst/data-science-for-beginners
Project: WebDev-OpenSource
- Developer: rudra016
- Tech Stack: web, html, css, javascript, phyton, mongodb, markdown
- GitHub Link: JakeAppDev/mobile-app-playground

In conclusion, open source is not just about coding; it's a collaborative journey where individuals, no matter their background, can contribute. So, take the plunge, start small, and enjoy the adventure of making a difference in the tech world!

How to Implement Pagination in your Reactjs

Hamzat Abdul-muizz — Tue, 22 Aug 2023 18:40:48 +0000

Pagination is a technique that involves breaking down a large dataset into manageable segments or pages. It's a crucial component when dealing with lists, tables, or search results to ensure a smooth user experience. By dividing content into pages and providing navigation controls, users can access information more effectively without feeling overwhelmed.

Why Use Pagination?

In this article, we'll guide you through implementing pagination in your ReactJS application. By incorporating pagination, you'll significantly enhance your users' experience, achieve faster loading times, and simplify navigation within your web app or website. This tutorial assumes familiarity with JavaScript and ReactJS, making it accessible to developers of varying skill levels.

Getting Started

Before we dive into creating pagination, make sure you have a ReactJS app set up. If you're starting from scratch, you can create a new app using the following command:



yarn create vite

Once your server is running, your directory structure should resemble the one shown below.



project-root/
├── src/
│   ├── App.jsx
│   ├── components/
│   ├── ...

Implementing Pagination Logic

We'll begin by focusing on the App.jsx file within the src directory. This is where the core pagination logic will be implemented. Here are the key steps:

Data Storage: Utilize the useState hook to store data fetched from the server. Initialize the state with an empty array.
Loading Indicator: Set up a loading state to notify users when data is being fetched. Initialize it as false.
Current Page Management: Create a currentPage state to keep track of the currently displayed page. If you're working with 100 items and want to show 10 per page, initialize this state with 1.
Posts Per Page: Implement a state to manage the number of posts displayed per page. In this article, we'll consider 10 posts per page.

Here's a snippet illustrating these states:



const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const [postsPerPage, setPostsPerPage] = useState(10);

Fetching Data from the Server

To simulate fetching data, we'll use a fake API provided by jsonplaceholder.typicode.com. Here's how you can handle the data fetching process:

UseEffect for Fetching: Create a useEffect to fetch data from the API. This ensures that data is fetched when the component mounts.
Fetching Function: Inside the useEffect, implement an async function using fetch to retrieve data from the API endpoint.
Updating State: Set the posts state to the fetched data. Don't forget to handle loading states appropriately.

Here's a snippet showcasing this process:



useEffect(() => {
  const fetchPosts = async () => {
    setLoading(true);
    try {
      const response = await fetch("https://jsonplaceholder.typicode.com/posts");
      const data = await response.json();
      setPosts(data);
      setLoading(false);
    } catch (error) {
      console.log(error);
    }
  };
  fetchPosts();
}, []);

Displaying Paginated Data

To display paginated data, we'll create a Post component. This component will receive the posts array and the loading state as props. Here's how you can structure the Post component:



import React from 'react';

const Post = ({ posts, loading }) => {
  if (loading) {
    return <h1>Loading...</h1>;
  }

  return (
    <>
      {posts.map((data, index) => (
        <div className='list' key={index}>
          <p>{data.title}</p>
        </div>
      ))}
    </>
  );
};

export default Post;

To make it look more appealing I have a simple css file used for this article



body {

  background: black;

  color: white;

}

.container {

  width: 100%;

  max-width: 800px;

  margin: auto;

}

.list {

  border: 1px solid #fff;

  padding: 5px;

}

.pagination {

  display: flex;

  border: 1px solid #fff;

  justify-content: space-between;

  padding: 20px;

}

.pagination button {

  padding: 10px;

}

.active {

  background: black;

  color: #fff;

  border: 1px solid #fff;

}

Implementing the Pagination Component

To control the page navigation, let's create a Pagination component. This component will calculate the number of pages based on the data length and posts per page. Here's the process:

Calculating Pages: Using a loop, determine the number of pages needed based on the data length and posts per page.
Rendering Page Numbers: Render buttons with page numbers for navigation. We'll utilize the map function to create buttons for each page.

Here's a simplified version of the Pagination component:



import React from 'react';

const Pagination = ({ postsPerPage, length }) => {

  const paginationNumbers = [];

for (let i = 1; i <= Math.ceil(length / postsPerPage); i++) {

    paginationNumbers.push(i);

  }

return (

    <div className='pagination'>

      {paginationNumbers.map((pageNumber) => (

        <button key={pageNumber}>{pageNumber}</button>

      ))}

    </div>

  );

};

export default Pagination;

Handling Page Changes

To make the pagination dynamic, we need a way to handle page changes. This involves updating the currentPage state. Here's how you can achieve this:

Creating the Handler: Define a function, such as handlePagination, in your App.jsx to update the currentPage state.
Passing the Handler: Pass the handlePagination function to the Pagination component as a prop.
Using the Handler: Inside the Pagination component, implement the onClick event for each page button. Call the handlePagination function with the appropriate page number.



const handlePagination = (pageNumber) => {

  setCurrentPage(pageNumber);

};

// Inside your component's return...

<Pagination

  length={posts.length}

  postsPerPage={postsPerPage}

  handlePagination={handlePagination}

/>

Highlighting the Active Page

For better user experience, highlight the currently active page. To achieve this, add a dynamic class to the active page's button. Here's how:

Conditional Class: Inside the Pagination component's map function, conditionally apply a class to the active page's button.



{paginationNumbers.map((pageNumber) => (

  <button

    key={pageNumber}

    className={currentPage === pageNumber ? 'active' : ''}

  >

    {pageNumber}

  </button>

))}

Conclusion

Congratulations! You've successfully implemented pagination in your ReactJS application. By breaking down data into manageable chunks and providing intuitive navigation controls, you've enhanced both the user experience and your app's performance. Feel free to explore further customization and experiment with different designs to create an even more engaging interface for your users. Link to the source code used in this article here

Feedback and Interaction

If you found this article helpful or have any feedback, I'd love to hear from you! Feel free to connect with me on social media and share your thoughts:

Twitter: @CanHamzaCode
Facebook:@Hamzat Abdul-muizz
Instagram: @CanHamzaCode

Happy coding!

How to Create a Custom Hook in Your ReactJs Application

Hamzat Abdul-muizz — Sun, 13 Aug 2023 21:19:25 +0000

A hook in React is a JavaScript function that enables you to encapsulate reusable logic and stateful behavior within functional components. Hooks allow you to modularize code by extracting common functionality from components, promoting cleaner and more maintainable code. With hooks like useState, useEffect, and useContext, developers can efficiently manage component state, handle side effects, and share state across components.

In this article, we'll delve into the creation of a custom hook that enables you to implement a toggle functionality, which can be utilized across different parts of your React app. We'll explore best practices and offer solutions to potential errors you might encounter during the integration process. Familiarity with JavaScript and ReactJS is assumed for this tutorial. Please note that while we will use 'yarn' for package management, you can substitute 'npm' wherever applicable.

Setting Up Your React App

Before we dive into creating custom hooks, ensure you have a React app set up. If you haven't already, you can create a new React app using the following command:

yarn create vite

Once your server is up and running, you should have a directory structure similar to this:

Creating a Custom Toggle Hook

1 . Inside your "src" folder, create a subfolder named "hooks" and add a new file named useToggle.jsx.

project-root/
  src/
    hooks/

2 . Define Your Custom Hook:

import { useState } from "react";

const useToggle = (initialValue = false) => {
  const [state, setState] = useState(initialValue);

  const toggle = () => {
    setState(!state);
  };

  return { state, toggle };
};

export default useToggle;

In the above code:

We import useState to handle the current state of the toggle.
The custom hook useToggle is created, which accepts an optional parameter initialValue. If not provided, the default value is false.
The toggle function is defined within the hook, toggling the state between true and false.
Importantly, remember that hooks return logic, not UI components.

Using the Custom Toggle Hook

To utilize the custom hook in your components, follow these steps:

1 . Import the useToggle hook:

import useToggle from '../hooks/useToggle';

2 . Get the return values from the hook using destructuring:

const { state, toggle } = useToggle();

3 . Implement the toggle functionality in your app's UI:

<div>
   <button onClick={toggle}>
       {state ? "Hide" : "Show"}
   </button>
   {state && <h1>Hidden Text</h1>}
</div>

Using the Custom Hook Across Components

If you want to use the custom hook across multiple sections of the same component, you can avoid state conflicts by renaming the variables. Here's how:

const { state: showData, toggle: toggleData } = useToggle();

In this tutorial, you've learned how to create a custom hook that encapsulates the toggle functionality within your React app. By extracting common logic into reusable hooks, you can enhance code maintainability and promote a more organized project structure. This approach empowers you to efficiently manage complex behaviors and state in functional components, making your codebase cleaner and more modular. Happy hooking!

Remember that practice is key to mastering custom hooks and React's vast ecosystem. As you become more comfortable with hooks, you can explore other hooks and share your experiences with the community.

Feel free to explore more complex custom hooks and experiment with various use cases to further solidify your understanding of this powerful feature in React development.

Link to the code here

How to Implement Firebase Google Authentication with ReactJS

Hamzat Abdul-muizz — Wed, 09 Aug 2023 09:15:59 +0000

Introduction

Google Authentication, a software-based authentication method, utilizes the Time-based One Time Password (TOTP) mechanism for multifactor authentication. In this comprehensive guide, suitable for developers of all levels, we will delve into implementing Google Authentication into your ReactJS application. We'll explore best practices and offer solutions to potential errors you might encounter during the integration process. Familiarity with JavaScript and ReactJS is assumed for this tutorial. Please note that while we will use 'yarn' for package management, you can substitute 'npm' wherever applicable.

Setting Up Your React App

To begin, create your React app and install ReactJS if you haven't already:



yarn create vite

Once your server is up and running, you'll have a structure similar to this:

Setting Up Firebase:

Start by creating an account on Firebase here here.
Once logged in, access the Firebase Console by clicking the "Go to console" button in the top right corner.

Click "Add project" and provide a project name in the input field. Then, click "Continue."
Skip enabling Google Analytics for this tutorial and proceed by clicking "Create project."
After a brief setup period, you'll be redirected to a new page resembling this:

Navigate to the web icon and follow the steps to register your app. Skip Firebase Hosting for now.
Copy the provided Firebase Software Development Kit (SDK).

Setup Authentication for the App
1 Navigate to your dashboard for this particular project.
2 Click on Authentication button after which you will select google as your provider

Configuring Firebase in Your App:

Inside the 'src' folder, create a 'config' folder and a new file 'firebase.jsx.'
Paste the previously copied Firebase SDK into 'firebase.jsx'.
Import 'auth' and 'googleAuthProvider' from 'firebase/auth':



import { getAuth, GoogleAuthProvider } from "firebase/auth";
export const auth = getAuth(app);
export const googleProvider = new GoogleAuthProvider();

Note: Make sure you don’t push your secret key to github

Installing Dependencies:
Now, let's install 'react-firebase-hooks' to handle data persistence:



yarn add react-firebase-hooks

Implementing Google Authentication:
In the component where you plan to handle authentication, import necessary modules and create the 'signInWithGoogle' function:



import { auth, googleProvider } from './config/firebase';
import { signInWithPopup } from 'firebase/auth';
import { useAuthState } from 'react-firebase-hooks/auth';

function YourComponent() {
  const [user] = useAuthState(auth);

  const signInWithGoogle = async () => {
    try {
      await signInWithPopup(auth, googleProvider);
    } catch (error) {
      console.error("Error signing in with Google:", error);
    }
  };

  // ... rest of your component code
}

Displaying Authentication Status:
You can now show the user's authentication status in your component:



function YourComponent() {
  const [user] = useAuthState(auth);

  // ... previous code ...

  return (
    <>
      {user ? (
        <>
          <h1>Hello, {user?.displayName}</h1>
          <button onClick={handleLogout}>Log out</button>
        </>
      ) : (
        <button onClick={signInWithGoogle}>Sign In with Google</button>
      )}
    </>
  );
}

Logging Out:
Implement the 'handleLogout' function to allow users to sign out:



function YourComponent() {
  const [user] = useAuthState(auth);

  const handleLogout = () => {
    auth.signOut();
  };

  // ... previous code ...
}

Conclusion:
Congratulations! You've successfully integrated Google Authentication into your ReactJS app using Firebase. You've learned to handle user authentication, implement sign-in with Google, and enable sign-out functionality. Feel free to explore further by customizing the user interface and expanding your application's capabilities. If you found this guide helpful, please consider giving it a thumbs up and follow for more valuable content. See you in the next tutorial!

Link to the GitHub repository here

Forem: Hamzat Abdul-muizz

October Taught Me to Show Up

The Gym, The Struggle, and The Promise I Kept

Work, Learning, and Taking Ownership

Learning to Pay Attention

Fear, Doubt, and the Weird Thing About Courage

Being Alone Without Feeling Lonely

When Everything Feels Important

Love, Growing Up, and Taking Responsibility

Closing Thoughts: Just Getting Started

How to Create a One-Time Payment Link and Secure Webhook Integration with Stripe

Introduction

Payment Flow Overview

Textual Diagram (ASCII)

Quick Setup

1. Install packages

2. .env (example)

3. Initialize Stripe

Create Checkout Session (Backend Route)

Webhook: Raw Body & Signature Verification

Server Example

Webhook Handler

Local Testing with Stripe CLI

Deployment Checklist

Rationale / Key Decisions

Further Reading

My Hackathon Experience: Building Blaut and Pushing My Limits

The Impulsive Start

The Idea: Blaut Secure File & Emergency Management

The Pressure Moments

The Encryption Crisis

The Deployment Drama

The Proud Moments

What I Learned About Myself

Reflection

What’s Next

Final Thought

How to Design Modular Smart Contract In Solidity with Diamond Standard (EIP-2535)

1. Introduction

2. The Problems with Traditional Solidity Design

3. What is the Diamond Standard (EIP-2535)?

Comparison with Other Patterns

4. Core Building Blocks (Conceptual Foundation)

4.1 Storage Slot and Variable Packing

Variable Packing Tip:

4.2 Function Call vs Delegate Call

4.3 Function Signature & Selector

5. Anatomy of the Diamond Standard

5.1 The Diamond (Entry Point)

5.2 Facets

5.3 Diamond Storage

6. Putting It All Together (Code Example)

7. Testing & Interaction (in Remix)

8. Real-World Use Cases

9. Pros and Cons

✅ Pros

❌ Cons

10. Conclusion

🔗 Stay connected:

How to Set Up a PostgreSQL Database with Drizzle ORM and Neon DB in Node.js

Introduction

What Is a Relational vs Non-Relational Database?

Relational Database

Non-Relational Database

🛠️ What Is an ORM?

Meet Drizzle ORM

What Is Neon DB?

How Do Drizzle and Neon Work Together?

Getting Started

Prerequisites

Project Setup

Step 1: Create Project Folder

Step 2: Initialize the Project

Step 3: Create the Source Folder

Step 4: Install Dependencies

Step 5: Create a tsconfig.json File

Setting Up the Database

Step 1: Create a Neon Account

Step 2: Set Up Environment Variables

Step 3: Create Database Schema