NextJS Smartcontract Lottery

This is front-end of our smartcontract lottery dapp. Simple one :)

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

• NextJS Smartcontract Lottery (Raffle) FCC
• Getting Started
  • Requirements
  • Quickstart
  • Typescript
    • Optional Gitpod
  • Formatting in VSCode
• Usage
  • Testing
• Deploying to IPFS
• Deploy to IPFS using Fleek
• Linting
• Thank you!

Getting Started

Requirements

• git
  • You'll know you did it right if you can run git --version and you see a response like git version x.x.x
• Nodejs
  • You'll know you've installed nodejs right if you can run:
    • node --version and get an ouput like: vx.x.x
• Yarn instead of npm
  • You'll know you've installed yarn right if you can run:
    • yarn --version and get an output like: x.x.x
    • You might need to install it with npm or corepack

Quickstart

git clone https://github.com/FurkanSezal/SmartContractLottery-Front-end
cd SmartContractLottery-Front-end
yarn
yarn dev

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.

Usage

1. Run your local blockchain with the lottery code

In a different terminal / command line

git clone https://github.com/FurkanSezal/Hardhat-smartcontract-Lottery
cd Hardhat-smartcontract-Lottery
yarn 
yarn hardhat node

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

2. Add hardhat network to your metamask/wallet

• Get the RPC_URL of your hh node (usually http://127.0.0.1:8545/)
• Go to your wallet and add a new network. See instructions here.
  • Network Name: Hardhat-Localhost
  • New RPC URL: http://127.0.0.1:8545/
  • Chain ID: 31337
  • Currency Symbol: ETH (or GO)
  • Block Explorer URL: None

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

3. Run this code

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

yarn dev

4. Go to UI and have fun!

Head over to your localhost and play with the lottery!

Deploying to IPFS

1. Build your static code.

yarn build

2. 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.

3. Deploy to IPFS

• Download IPFS desktop
• Open your IPFS desktop app
• Select import and choose the folder the above step just created (should be out)

4. Copy the CID of the folder you pinned

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

6. 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!