Home

Awesome

Update: Head to Cyfrin Updraft

ℹ️ Important: This repo is no longer maintained, we invite all people learning Solidtiy to head to Cyfrin Updraft! The 100% free #1 smart contract education platform on earth.

Important!!

The moralis integration has been removed. Please use the the graph integration instead.

NextJS Smartcontract Lottery (Raffle) FCC

This is a section of the Javascript Blockchain/Smart Contract FreeCodeCamp Course.

⌨️ (16:34:07) Lesson 10: NextJS Smart Contract Lottery (Full Stack / Front End)

Full Repo

App

Example App here! Example App on IPFS here!

Built with ❤️ using: NextJS Solidity Chainlink Moralis web3uikit Ethers Hardhat IPFS

This project is a part of the Hardhat FreeCodeCamp video.

Video coming soon...

Getting Started

Requirements

Quickstart

git clone https://github.com/PatrickAlphaC/nextjs-smartcontract-lottery-fcc
cd nextjs-smartcontract-lottery-fcc
yarn
yarn dev

Typescript

If you want to get to typescript and you cloned the javascript version, just run:

git checkout typescript

Optional Gitpod

If you can't or don't want to run and install locally, you can work with this repo in Gitpod. If you do this, you can skip the clone this repo part.

Open in Gitpod

Formatting in VSCode

To have VSCode extension prettier auto-format .jsx and .tsx, add the following to your settings.json file:

  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

Usage

  1. Run your local blockchain with the lottery code

In a different terminal / command line

git clone https://github.com/PatrickAlphaC/hardhat-fund-me-fcc
cd hardhat-fund-me-fcc
yarn 
yarn hardhat node

You can read more about how to use that repo from its README.md

  1. Add hardhat network to your metamask/wallet

Ideally, you'd then import one of the accounts from hardhat to your wallet/metamask.

  1. Run this code

Back in a different terminal with the code from this repo, run:

yarn dev
  1. Go to UI and have fun!

Head over to your localhost and play with the lottery!

Testing

I didn't write any front end tests 😢

If you'd like to create some tests for this repo, please make a PR!

Deploying to IPFS

  1. Build your static code.
yarn build
  1. Export your site
yarn next export

Note: Some features of NextJS & Moralis are not static, if you're deviating from this repo, you might run into errors.

  1. Deploy to IPFS
  1. Copy the CID of the folder you pinned

IPFS

  1. Get IPFS companion for your browser (or use Brave Browser)

  2. Go to ipfs://YOUR_CID_HERE and see your ipfs deployed site!

Deploy to IPFS using Fleek

You can also have Fleek auto-deploy your website if you connect your github. Connect to fleek and follow along the docs there. You'll get an IPFS hash and a "regular" URL for your site.

Linting

To check linting / code formatting:

yarn lint

Thank you!

If you appreciated this, feel free to follow me or donate!

ETH/Polygon/Avalanche/etc Address: 0x9680201d9c93d65a3603d2088d125e955c73BD65

Patrick Collins Twitter Patrick Collins YouTube Patrick Collins Linkedin Patrick Collins Medium