Chainlink DApp Example

you’ll learn how to create a simple end-to-end dApp that allows the user to retrieve and store the current price of Ethereum in a smart contract (using Chainlink Data Feeds).

source: The Architecture of a Web3 Application

Project structure:

1. Backend

npm init -y
npm install --save-dev hardhat
npx hardhat
(choose create javascript project, choose default parameters)

Create a smart contract:

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

import "@chainlink/contracts/src/v0.8/interfaces/AggregatorV3Interface.sol";

contract PriceConsumerV3 {

    AggregatorV3Interface internal priceFeed;
    int public storedPrice;

    /**
     * Network: Rinkeby
     * Aggregator: ETH/USD
     * Address: 0x8A753747A1Fa494EC906cE90E9f37563A8AF630e
     */
    constructor() {
        priceFeed = 
AggregatorV3Interface(0x8A753747A1Fa494EC906cE90E9f37563A8AF630e);
    }

    /**
     * Returns the latest price
     */
    function getLatestPrice() public view returns (int) {
        (
            /*uint80 roundID*/,
            int price,
            /*uint startedAt*/,
            /*uint timeStamp*/,
            /*uint80 answeredInRound*/
        ) = priceFeed.latestRoundData();
        return price;
    }

    function storeLatestPrice() external {
        storedPrice = getLatestPrice();
    }
}

2. Deploying the smart contract

Rememer to note the contract address down. 

3. Frontend

cd ..
npx create-react-app@latest frontend

4. Running you DApp

Source code: https://github.com/pappas999/chainlink-dapp-tutorial

npm run start

Connect to MetaMask.

Open http://localhost:3000/ 

References:

https://blog.chain.link/how-to-build-a-dapp/