Fullstack DApp 2025: Solidity, React & Ethereum Blockchain

Learn solidity to capitalize on high demand and job opportunities, build disruptive decentralized apps across domains, and gain creative freedom with DeFi, NFT, and token-based apps.

Explore solidity, a programming language for writing smart contracts on the Ethereum blockchain, and learn how web3 apps leverage decentralized networks as backends.

Navigate remix.ethereum.org to explore web3 development, open Solidity files, compile with the Solidity compiler, and deploy and run the smart contract using the deploy and run transaction panel.

Learn to write your first smart contract in Remix editor, creating a hello Solidity contract with a private message state, constructor initialization, and public getter and setter functions.

Learn the basic structure of a Solidity smart contract, including declaring the compiler version, naming the contract, adding state variables, and implementing constructors, getters (view), and setters.

Explore how the view keyword in Solidity makes a function read-only, prevents state changes, and incurs no gas cost.

Explore Solidity’s pure keyword as a read-only function that returns a calculation, contrast it with view, and see a deployed contract where get sum returns four.

Explore how Solidity handles memory locations, including storage, memory, call data, and stack, and understand why contract state lives in storage while function parameters and returns use memory.

Explore Solidity access specifiers—private, internal, external, and public—demonstrating how each restricts or enables function calls, including inheritance implications and internal versus external accessibility.

Learn how to implement a Solidity shop struct and initialize it in the constructor with owner name, age, address, base64 dp, and boolean. Log updates via Hardhat console.

Explore arrays in solidity by building a shopping mall array, pushing shop entries, and iterating to log each owner's name, then compiling and deploying to view logs.

Learn how to create maps in Solidity, using a string key to map a mall name to its shop array, retrieve data, iterate, compile, and deploy.

Define and use enums in Solidity by creating a shop state with open or closed, passing it to a constructor, and conditionally logging whether the shop is open or closed.

Learn how Solidity events notify front-end clients when specific contract actions occur by declaring and emitting an event, such as shop status, when the shop closes.

Apply and enforce rules in Solidity with require, revert, and assert to guard transactions based on shop state, including changing from open to closed in the constructor.

Explore global variables to access block, message, and transaction properties and their runtime characteristics, including block.base_fee, block.gas_limit, block.chain_id, message.sender, message.value, and transaction.origin.

Learn about has a relationship in solidity through composition by modeling a car contract that holds a chassis contract and a getter that returns the chassis number.

Learn about inheritance in Solidity by building an account and a savings account, sharing an internal balance, and overriding the log interest rate in the child class.

Define abstract contracts that cannot be instantiated and use a pure virtual function overridden by concrete classes to vary interest rates while the abstract class provides a generic getbalance.

Build the hello world smart contract front end using the project template, deploy to a local blockchain, and connect React via the hello solidity.json abi and address.

Configure the fullstack dapp template by installing node and hardhat, compiling and deploying contracts on a local blockchain, wiring contract data into the frontend, and setting up MetaMask for interactions.

Extend a Solidity contract with a get version function and reflect it in a React frontend using ethers and the Abi. Connect through MetaMask and fetch the version on load.

Begin building a full stack decentralized polling application using our same hardhead template. Rename the GitHub repository to polling app and check in.

Begin phased solidity election development by defining voter and candidate structs with addresses, an election struct with start and end times, and mappings for voters and candidates.

Learn to implement admin-only and time-bound modifiers in a Solidity election contract, enforce voting during the election and winner declaration only after completion, with admin set in the constructor.

Phase 2 adds an external only-admin function to create an election with name, start date in future, and end date, enforcing zero current name and end date greater than start.

Implement getters for election name, candidates, and voters, and a vote function with validations; compute the winner by iterating candidates and returning name, party, and vote count.

Compile and deploy a Solidity smart contract with hardhead, fix version warnings, and update the deployment script for the single election voting contract on a local node, generating front-end JSON.

Configure the front end to integrate with contract.js by wiring the contract address, API interface, and browser provider, then implement signer and read/write and read-only contract access.

Export an async create election function in contract.js that retrieves the contract, calls contract.createElection with name, start timestamp, end timestamp, passes nouns and a gas limit, and awaits the transaction.

Write contract.js functions to add candidate and to get candidates, using async transactions with gas limit, and implement read-only get candidates with error handling.

Import contract.js functionality to power the admin panel and voting panel, enabling create and start election, add candidate, and get voters.

Add and manage user interface state in a React admin panel for a blockchain election app using useState for election data, candidates, and voters, and useEffect for data loading.

Implement useEffect to fetch election data on component load, defining async functions for election name, start and finalized status, winner, candidates, and voters via contract.js.

Implement event handlers in admin panel to create elections, add candidates, add voters, and start or end elections using async try-catch calls to contract.js with UI updates and error alerts.

Build the admin panel UI for election management with create election (name, start and end dates), candidate and voter forms, and start/end controls.

Test the front end by starting the app with npm start, creating a future election with dates, adding candidates and voters, and validating admin panel functions.

Develop and test a voting panel by importing contract functions to get candidates and vote, loading candidates with a use effect, and building a dropdown user interface for voters.

Set up a full stack dapp routing by configuring React Router DOM, creating routes for admin and voting panels, and linking them on the home page.

Integrate IPFS storage in the frontend by using Pinata as the IPFS provider, handling API keys, JWT tokens, and gateway URL in a secure config.js.

Upload a file to IPFS via the Pinata API, validating the file and posting with a JWT token, then update the UI and smart contract for the candidate profile image.

Upload images to IPFS, store the image hash in the smart contract, and update contract.js and the frontend to pass the hash when adding a candidate.

Learn to fetch and display images from IPFS in a fullstack dapp: validate hashes, build IPFS URLs, retrieve image blobs, map them to candidate addresses, and render in the UI.

Explain how layer 2 networks on Ethereum, such as Arbitrum, Optimism, and Zksync, boost scalability, reduce gas fees, and speed transactions, and show how to integrate L2 into polling apps.

Clone the full stack pooling dapp l2 repository, then set up docker and start the local zksync l2 network, installing hardhat, ethers, and zksync dependencies.

Configure the MetaMask wallet for zkSync L2 with a custom network, and deploy the single election voting contract on local L2, saving the address and API for the frontend.

Update the frontend by installing zksync ethers and refactoring contract.js to return a wallet from a provider on L2, enabling panel actions like elections and IPFS candidate uploads.

Refactor the contract to support separate admin and voter signers, using the deployer's admin signer for admin functions and a MetaMask signer for voting, and test the voting flow.

Select voters in the MetaMask wallet, cast votes for candidate a, confirm transactions, and finalize the election on L2 with candidate a as the winner.

Develop the fundme functionality to let users fund their favorite candidates and integrate Chainlink oracle for live ether-to-usd price feed in the smart contract.

Learn the development workflow for a routing app: write the Funmi smart contract, integrate a Chainlink oracle, deploy it, and wire it into Funmi.js and a new route.

Install chainlink contracts in the backend folder and add Funmi.sol beside elections voting.sol, as Funmi.sol imports the chainlink aggregator interface and mock v3 aggregator for local deployments.

Develop the fundme contract by adding a candidate struct and mapping to store candidate addresses and funded amounts, an aggregator v3 price feed and events candidate funded and price updated.

Deploy the Funmi contract by configuring the signer as deployer, using a mock v3 aggregator from Chainlink, linking the price feed address, and finalizing with the Funmi abi interface.

Develop remaining fundme functions: get candidates returns funded candidates, fund candidate as external payable via message.value, and withdraw transfers funds back after validation.

Retrieve candidate funding by address and return the funded amount; update the price feed with latest round data, increasing precision from eight to eighteen decimals for ETH to USD conversion.

Deploy the election and Funmi contracts with deploy.js and deploy Funmi.js to generate Funmi.json, then load the address, API, and methods fund candidate, get funding, update price into the UI.

Trace how the fund candidate is invoked from the fund me panel via the onclick handler. Verify that the invocation flows to contract.fundCandidate implemented in fundme.sol.

Add a fund-me panel route and apply component-level styles to complete and demo a front-end application with structured containers, titles, and ui tiles.

Explore frontend changes for a dapp by creating elections with start and end dates, adding candidates with IPFS images, registering voters, and enabling voting via MetaMask and ether funding.

Demonstrates a complete dapp workflow: create an election in the admin panel, add candidates with IPFS images, fund with ETH via a blockchain oracle, and vote to declare a winner.