ethereum-lottery-app-react: The Anatomy of a Backend-less Application

How an educational 2018 codebase perfectly captures the architectural leap from traditional React to decentralized global state.

5 min read • View on GitHub • More from zubair-trabzada

A traditional server rack dissolving into a massive, interconnected web of identical ledger books. This represents the shift from centralized monolithic backends to decentralized blockchain state. — The transition from centralized servers to decentralized ledgers.

Key Takeaways

The repository demonstrates a fundamental architectural shift where a React frontend treats the Ethereum blockchain as its sole database and backend logic layer.
Legacy 2018 Web3 patterns highlight how applications silently hijacked browser-injected providers before modern privacy-focused permission models existed.
An Application Binary Interface (ABI) acts as the crucial translation layer that maps raw blockchain bytecode to callable JavaScript methods.
The reliance on React 16.3 class components and the deprecated Rinkeby Test Network frames the codebase as an educational time capsule of early dApp development.

The Database is a Global State Machine

Opening this repository reveals an immediate architectural shock for traditional web developers. There is no Node.js backend. There is no Python API. There is no SQL database. The application is entirely front-end code, built to interface directly with a global, decentralized state machine.

Instead of REST calls to a private server, the React app's componentDidMount lifecycle method reads state directly from the Ethereum network. The smart contract itself serves as the backend logic, storing the manager's address, the list of players, and the prize pool.

This is a demo application to implement Lottery application in ReactJS and Solidity.

syedmuhamaddanish, Project Author · GitHub - syedmuhamaddanish/Web3-Lottery-Dapp-ReactJS

Hijacking the MetaMask Handshake

The technical core of this time capsule lives in src/web3.js. In 2018, browser extensions like MetaMask forcibly injected a Web3 provider directly into the global window object. Decentralized applications (dApps) would silently hijack this provider to interact with the blockchain.

The evolution of Web3 provider injection from silent hijacking to explicit user consent.

This legacy approach allowed apps to read user data without explicit permission. Modern privacy standards now require applications to explicitly request connection access via eth_requestAccounts. Seeing the old window.web3.currentProvider pattern in the wild is like finding an architectural fossil.

// The 2018 Legacy Pattern
import Web3 from 'web3';

// Hijack the provider injected by the browser extension
const web3 = new Web3(window.web3.currentProvider);

export default web3;

The ABI Translation Layer

If the blockchain is the database, the Application Binary Interface (ABI) is its Rosetta Stone. Found in src/lottery.js, the ABI is a hardcoded array of JSON objects. It tells the JavaScript frontend exactly which functions exist on the compiled Solidity smart contract.

A close-up of a heavy, etched stone tablet being scanned by a mechanical brass eye equipped with a complex series of rotating magnifying lenses. This represents the ABI translating raw blockchain bytecode into readable JavaScript. — The ABI acts as a translation layer between raw Ethereum bytecode and callable JavaScript functions.

Without this translation layer, the React application would just see a black box of hexadecimal bytecode. By mapping standard JavaScript calls to Ethereum Virtual Machine instructions, the ABI makes decentralized development look deceptively like standard object-oriented programming.

The Rinkeby Fossil Record

This repository serves as a perfect educational artifact. It relies on React 16.3 class components, pre-dating the widespread adoption of Hooks. More importantly, it targets the Rinkeby Test Network, a blockchain environment that has since been entirely deprecated.

A glass laboratory bell jar resting on a wooden desk. Inside the jar sits a vintage daily calendar page next to a fossilized mechanical gear mechanism partially embedded in rock. This symbolizes out-of-date but historically important code. — Educational repositories often become time capsules, capturing the exact state of a rapidly evolving technology ecosystem.

The speed at which Web3 development practices evolve means that a fully functional application from a few years ago now reads like ancient history. Yet, for developers learning the core concepts of decentralized architecture, these early, stripped-down implementations offer the clearest view of the underlying mechanics.