Forem: DevForge

Building an ERC-20 Token From A to Z (Hardhat + OpenZeppelin)

DevForge — Thu, 18 Dec 2025 01:45:23 +0000

⚠️ Disclaimer
This article is for educational purposes only.
The token created here is not money, has no intrinsic value, and is not associated with any real-world brand or stablecoin.
Do not impersonate existing projects or tickers. Always use your own unique token name and symbol.

Why I Wrote This Article

Many people entering crypto ask the same questions:

“Why did a random token appear in my wallet?”
“Why do I see a balance but can’t sell it?”
“How are ERC-20 tokens actually created?”
“Why does a token look real if it’s fake?”

The best way to truly understand this is simple:

Create your own ERC-20 token once.

When you do that, everything suddenly makes sense:

balances
wallets
approvals
fake tokens
approvals

This article walks through the entire process from zero to deployment, step by step.

What We Will Build

We will build a clean educational ERC-20 token with:

OpenZeppelin ERC-20 implementation
Role-based access control
Pausable transfers
Minting
Deployment with Hardhat
Adding the token to MetaMask
Understanding how wallets detect balances

1. What Is ERC-20 (Plain English)

ERC-20 is not a currency.
It’s simply a standard interface — a set of functions that wallets and dApps know how to call.

At minimum, an ERC-20 token has:

balanceOf(address)
transfer(address, amount)
totalSupply()
name(), symbol(), decimals()

❗ Important
An ERC-20 contract does not know its price.
Price exists only if:

a market exists
liquidity exists
someone is willing to trade

No liquidity → no price → no real value.

2. Environment Setup
Requirements

Node.js (LTS)
npm
MetaMask wallet
Sepolia test ETH
RPC provider (Alchemy, Infura, etc.)

Create the Project

mkdir my-token
cd my-token
npm init -y
npm install --save-dev hardhat @nomicfoundation/hardhat-toolbox dotenv
npx hardhat

Choose:

Create a JavaScript project

3. Install OpenZeppelin

OpenZeppelin provides audited, production-grade smart contracts.

npm install @openzeppelin/contract

4. Writing the ERC-20 Token Contract

Create contracts/MyToken.sol:

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

/*
    MyToken — an educational ERC-20 token.
    NOT money. NOT a stablecoin.
*/

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";
import "@openzeppelin/contracts/access/AccessControl.sol";
import "@openzeppelin/contracts/utils/Pausable.sol";

contract MyToken is ERC20, AccessControl, Pausable {
    bytes32 public constant MINTER_ROLE = keccak256("MINTER_ROLE");
    bytes32 public constant PAUSER_ROLE = keccak256("PAUSER_ROLE");

    constructor(uint256 initialSupply)
        ERC20("My Educational Token", "MYT")
    {
        _grantRole(DEFAULT_ADMIN_ROLE, msg.sender);
        _grantRole(MINTER_ROLE, msg.sender);
        _grantRole(PAUSER_ROLE, msg.sender);

        _mint(msg.sender, initialSupply);
    }

    function mint(address to, uint256 amount)
        external
        onlyRole(MINTER_ROLE)
    {
        _mint(to, amount);
    }

    function pause() external onlyRole(PAUSER_ROLE) {
        _pause();
    }

    function unpause() external onlyRole(PAUSER_ROLE) {
        _unpause();
    }

    function _update(address from, address to, uint256 amount)
        internal
        override
        whenNotPaused
    {
        super._update(from, to, amount);
    }
}

Key Concepts Here

Name and symbol are just strings
The contract itself stores balances
Tokens exist only after mint
If you don’t mint → balance will be zero

5. Hardhat Configuration
Create hardhat.config.js:

require("@nomicfoundation/hardhat-toolbox");
require("dotenv").config();

module.exports = {
  solidity: "0.8.20",
  networks: {
    sepolia: {
      url: process.env.SEPOLIA_RPC,
      accounts: process.env.PRIVATE_KEY ? [process.env.PRIVATE_KEY] : [],
    },
  },
};

6. Environment Variables

Create .env (never commit this):

SEPOLIA_RPC=https://eth-sepolia.g.alchemy.com/v2/YOUR_API_KEY
PRIVATE_KEY=0xYOUR_PRIVATE_KEY

7. Deployment Script

Create scripts/deploy.js:

const hre = require("hardhat");

async function main() {
  const [deployer] = await hre.ethers.getSigners();

  console.log("Deploying with address:", deployer.address);

  const initialSupply = hre.ethers.parseUnits("1000", 18);

  const MyToken = await hre.ethers.getContractFactory("MyToken");
  const token = await MyToken.deploy(initialSupply);

  await token.waitForDeployment();

  console.log("Token deployed at:", await token.getAddress());
}

main().catch(console.error);

8. Compile and Deploy

npx hardhat compile
npx hardhat run scripts/deploy.js --network sepolia

You will receive a contract address.

9. Adding the Token to MetaMask

Switch MetaMask to Sepolia
Go to Assets → Import token
Paste the contract address
MetaMask auto-fills symbol & decimals

If balance shows 0, check:

correct network
minted address
decimals
wallet cache (reload MetaMask)

10. Why Tokens Can Appear “Out of Nowhere”
Here’s the critical realization:

Wallets do not store tokens.

A wallet simply calls:
balanceOf(yourAddress)
If any contract returns a non-zero number → the wallet displays it.

That means:

someone can mint tokens to your address
without asking
without permission

Your wallet will still show them.

11. Why Name, Symbol, and Icon Mean Nothing

Blockchains have:

no global registry of names
no trademark enforcement
no “official token” flag

Anyone can deploy:

any name
any symbol
any decimals
any logo The only real identity of a token is:

its contract address

12. The Core Security Lesson

Once you understand this, many scams become obvious:

“free tokens” → meaningless balances
fake stablecoins → just ERC-20 contracts
approval traps → dangerous permissions

Knowledge beats fear.

Conclusion

ERC-20 tokens are just smart contracts.
Balances are just numbers.
Price comes from markets, not from code.
Trust comes from verification, not appearance.

Creating your own token once is the fastest way to understand all of this.

Building a 3D Rotating Cube for a Shoe Store with HTML & CSS

DevForge — Mon, 17 Nov 2025 17:20:26 +0000

🌀 Building a 3D Rotating Cube for a Shoe Store with HTML & CSS

Have you ever seen those flashy website templates or ad mockups with a rotating 3D cube — each side showing a product?
I saw a few frameworks selling such templates and thought: why not build one myself, from scratch?

So I created a 3D Rotating Cube entirely in HTML, CSS, and a bit of JS — perfect for e-commerce, product showcases, or creative portfolios.

🎥 Demo

👉 https://www.youtube.com/watch?v=HV_7-rM-I7o
👉 https://github.com/renocmon-cloud/3dkub

💡 Idea

The idea was simple: a rotating cube where each face is clickable — linking to a different shoe (or any product page).
It spins smoothly in 3D, stops on hover, and even works on touch devices.

This could be useful for:

Fashion or shoe stores
Product galleries
Interactive 3D landing pages
Or just learning cool CSS 3D transformations!

🧱 How It Works

The cube is built using 6 divs, each representing one face.
We use transform: rotateY() and translateZ() to position them in 3D space.

🧩 Structure

<div class="scene">
  <div class="cube">
    <a href="shoe1.html" class="face face-front"  style="background-image:url('images/img1.jpg')"></a>
    <a href="shoe2.html" class="face face-back"   style="background-image:url('images/img2.jpg')"></a>
    <a href="shoe3.html" class="face face-right"  style="background-image:url('images/img3.jpg')"></a>
    <a href="shoe4.html" class="face face-left"   style="background-image:url('images/img4.jpg')"></a>
    <a href="shoe5.html" class="face face-top"    style="background-image:url('images/img5.jpg')"></a>
    <a href="shoe6.html" class="face face-bottom" style="background-image:url('images/img6.jpg')"></a>
  </div>
</div>

Each <a> tag acts as a clickable face with its own background image.

🎨 CSS Magic

The CSS handles the 3D layout and animation.

.cube {
  transform-style: preserve-3d;
  animation: spin 10s infinite linear;
}

@keyframes spin {
  from { transform: rotateX(0deg) rotateY(0deg); }
  to   { transform: rotateX(360deg) rotateY(360deg); }
}

Hovering the cube pauses the rotation:

.scene:hover .cube {
  animation-play-state: paused;
  cursor: pointer;
}

It looks smooth because of perspective, which gives the illusion of depth.

📱 Mobile Support

A few lines of JavaScript let mobile users tap the cube to pause/resume rotation:

const cube = document.querySelector('.cube');
const scene = document.querySelector('.scene');
let isPaused = false;

scene.addEventListener('touchstart', () => {
  isPaused = !isPaused;
  cube.style.animationPlayState = isPaused ? 'paused' : 'running';
});

🚀 Try It Yourself

Copy the HTML/CSS/JS code.
Replace the image URLs with your own product pictures.
Open it in a browser — voilà, you have a rotating 3D cube!

🎲 Game 21 — Cheburashka & Gena

DevForge — Sat, 18 Oct 2025 16:41:01 +0000

Built in Pure Python + Tkinter
🐊 Introduction

It started as a small side project — just a cheerful, nostalgic mini-game.
That’s how 🎲 Game 21 — Cheburashka & Gena was born — a cartoon-style dice game where you play against the famous Russian duo Cheburashka and Gena the Crocodile.

You roll dice, collect points, and watch cartoon faces react to your luck — all made entirely in pure Python.

🧩 Gameplay

Roll dice to get as close to 21 points as possible —
but if you go over, you lose!

Decide whether to roll again or stop, then watch your AI opponents — Cheburashka and Gena — take their turns automatically.
The one closest to 21 wins.

🖼️ Features

🎮 Cartoon-styled interface
🎵 Procedural sound & music
🏆 Local leaderboard (SQLite)
🌈 Dynamic color themes
🗣️ English & Russian languages

Run it instantly:

python game21.py

GitHub → github.com/renocmon-cloud/Game21_v8_1

Website → belcantorest.me

🎨 Design & UI

A custom CartoonButton class makes Tkinter look alive — rounded corners, shadows, gradient fills, and small “bounce” animations.
No images — everything is generated procedurally with Pillow.

Each theme (Sunny ☀️, Ocean 🌊, Mint 🌿) has its own color palette, or you can let it switch automatically for variety.

🎵 Sound & Music

No sound files — just math.
Python generates short WAVs for dice rolls and melodies using wave, math, and struct.
It’s a tiny, built-in synthesizer 🎹

🧠 Lessons Learned

Tkinter can look modern with creativity

Procedural art and sound are pure joy

SQLite is perfect for small games

Simplicity can be surprisingly powerful

💬 Conclusion

Game 21 — Cheburashka & Gena is a love letter to simplicity and charm.
No frameworks, no assets — just Python, imagination, and a bit of nostalgia.

Free Professional Invoice Generator

DevForge — Sun, 28 Sep 2025 22:41:47 +0000

Managing invoices can often feel overwhelming — especially for freelancers, startups, and small businesses.
That’s why I created the Professional Invoice Generator — a free, browser-based tool that helps you design, preview, and export professional invoices in minutes.

This project is open-source, works entirely in your browser, and requires no installation.

🔗 Live Demo: belcantorest.me
📦 Source Code: GitHub Repository

✨ Why Use This Tool?

Unlike traditional invoicing software or expensive SaaS platforms, this generator is:

🖥 100% browser-based (no backend or database required)
🌍 Supports US and EU (VAT) invoice styles
🖼 Lets you upload your company logo for branding
📲 Generates QR codes for instant payments
💾 Allows you to save/load JSON data for future use
🖨 Exports directly to PDF or Print

⚡ Key Features

Seller & Buyer details
Invoice number, issue date, and due date
Multiple currencies: USD, EUR, GBP, INR, JPY, BTC, and more
Discounts and customizable tax rates
EU extras: VAT IDs, IBAN/SWIFT support
Smart item management (add, duplicate, remove, clear all)
Bank and payment details with QR code generation
Real-time invoice preview

🚀 How It Works

Open the demo.
Fill in your company & client details.
Add items, taxes, and discounts.
Customize payment details (bank, SWIFT, reference).
Preview your invoice in real time.
Export as PDF or print directly.

💡 Perfect For

Freelancers who need quick, professional invoices
Small businesses avoiding complex accounting tools
Startups that want a free and customizable invoicing system

📜 License

This project is released under the MIT License — free to use, modify, and share.

🔗 Try it now: belcantorest.me
💻 Explore the code: GitHub Repository

👉 If you find this tool useful, feel free to ⭐ the GitHub repo and share it with others!

Smart Expense Tracker Pro

DevForge — Thu, 25 Sep 2025 13:24:30 +0000

📋 Project Overview

Introducing Smart Expense Tracker Pro — a next-generation personal finance solution that goes far beyond basic expense tracking.

Built entirely with KendoReact’s free component library, this application demonstrates just how quickly and effortlessly developers can create enterprise-grade, production-ready applications.

With its modern design, advanced analytics, and intelligent budgeting features, Smart Expense Tracker Pro is a powerful showcase of what’s possible when innovation meets simplicity.

🎯 Key Highlights
🔐 Multi-User Authentication

Secure, seamless login & registration

Personalized dashboards & settings

Reliable data isolation for privacy

💰 Smart Financial Management

Visual Budget Tracking: Color-coded progress indicators

Multi-Currency Support: Real-time currency conversions

Expense Categorization: 10+ categories with icons

Priority System: Critical, High, Medium, Low levels

Recurring Transactions: Daily, weekly, monthly, yearly

📊 Advanced Analytics

Interactive charts & graphs

Monthly trend insights

Real-time calculations & instant updates

Flexible custom date ranges

📱 Modern User Experience

Light & Dark themes

Fully mobile-optimized

Accessibility-first approach

Smooth, elegant animations

🛠️ Powered by KendoReact

This application leverages 19+ KendoReact components, proving their versatility and scalability.
Every component is pushed to its maximum potential, making the app both powerful and easy to use.

🌟 What Makes This App Stand Out

✅ Enterprise-Grade Architecture — scalable, maintainable, and extensible
✅ Production-Ready Quality — error handling, validation, and loading states built-in
✅ Real-World Utility — useful for individuals, small businesses, or as the foundation of a SaaS product
✅ Modern React Practices — optimized performance, hooks, context, clean code

📈 Business Value

For Individuals: Simplifies personal budgeting & money management

For Businesses: Streamlines expense reporting & accounting

For Education: A practical tool for teaching financial literacy

For SaaS Startups: A ready-made foundation for scalable financial apps

🔮 The Road Ahead

Planned enhancements include:

AI-powered insights for smarter budgeting

OCR receipt scanning for automatic expense entry

Investment tracking & goal setting

Collaborative budgeting for families & teams

PWA & real-time sync for cross-device usage

💡 Key Takeaways

KendoReact Mastery: Component composition, performance optimization, accessibility-first design

React Excellence: Hooks, context API, clean architecture, maintainability

Innovation in Action: A real, production-ready financial solution built entirely with free KendoReact tools

🏆 Conclusion

Smart Expense Tracker Pro is more than just a project — it’s a living example of how KendoReact empowers developers to build apps that are:

Sophisticated yet simple

Feature-rich yet lightweight

Professional yet accessible

👉 This project doesn’t just show what can be done — it proves that KendoReact enables anyone to build software that rivals commercial products in quality, performance, and design.

🔗 Live Demo: https://expense-tracker-beta-ashy.vercel.app/

💻 Source Code: https://github.com/renocmon-cloud/expense-tracker

🎥 Demo Video: https://www.youtube.com/watch?v=R0TF-9V4Tag