Giter Club home page Giter Club logo

n2dlotto-erc20-lottery-app's Introduction

N2DLotto-ERC20-Lottery-App

⚑An ERC20 Crypto Lottery Game App Repo - Build your own lottery game that pays with your own custom ERC20 Token!

** THE FILES ATTACHED TO THIS REPO ARE FOR EDUCATIONAL PURPOSES ONLY **

** NOT FINANCIAL ADVISE **

** USE IT AT YOUR OWN RISK** **I'M NOT RESPONSIBLE FOR ANY USE, ISSUES ETC.. **

ENTIRE PLAYLIST:

Sections

Click for video:

Click for video:

Please watch tutorial video for full walkthru.

Inside the Part2 Repo Folder:

N2D Lotto Smart Contract Sample with Chainlink VRF Integration
NodeJS Array Bubble Sort Function Sample

Click for video:

Please watch tutorial video for full walkthru.

Inside the Part3 Repo Folder:

N2D Lotto Final Smart Contract Completed
Sample ERC-20 Smart Contract used during tutorial

Click for video:

Please watch tutorial video for full walkthru.

Inside the Part4 Repo Folder:

NodeJS Backend Demo Files

Click for video:

Please watch tutorial video for full walkthru.

Step 1

Create a new NextJS instance:

npx create-next-app lottoadmin

Step 2

Download the Part5 folder from the repo, open the admin_frontend_files folder, copy and paste the contents inside into your NextJS project folder. This includes files and folders, Replace files when prompted.

Step 3

Install Dependencies:

cd lottoadmin
npm i 

Step 4

Proceed to update your backend by replacing the backend.js and interfaces.js files with the ones located in the Part5 backend_files folder, but FIRST save your private keys, smart contract addresses located in the interfaces.js before replacing. You should've provided the values when you deployed and setup the backend during Part4 tutorial. Re-insert your values in the variables accordingly.

const lottery = 'ADD_SMART_CONTRACT_ADDRESS';
const key = 'ADD_CONTRACT_OWNER_WALLET_PRIVATE_KEY';
const apikey = "ADD_MONGODB_API_KEY";
const url = "https://data.mongodb-api.com/app/ADD_MONGODB_API_PATH/endpoint/data/v1/action/";

save file! CTRL + S

then start your backend:

cd backend
node backend.js

Step 5

Proceed to update your config.js file located in the nextjs components folder with your lottery and erc20 smart contract addresses.

save file! CTRL + S

Proceed to update your interfaces.js file located in the nextjs components folder with your backend url address. If you're running the backend in the same PC as the frontend, do not modify.

save file! CTRL + S

Step 6

Start application and test!

cd lottoadmin
npm run dev

Click for video:

Full Lottery Application Setup

Download the folder "Final" then proceed with steps (This guide assumes you are deploying on Mumbai Testnet but works for other testnets:

Step 1 SMART CONTRACT DEPLOYMENT

Create a Chainlink VRF Subscription. Follow video 1 if you have doubts.

Deploy Sample ERC-20 Token Smart Contract to Mumbai Testnet

N2D-ERC20-Sample-SmartContract.sol

Mint ERC-20 Tokens to your wallet and add the token smart contract address to your wallet to confirm you received the tokens.

Deploy the Lottery Smart Contract to Mumbai Testnet, provide the chainlink vrf subscription id and erc-20 token smart contract address to deploy.

N2DLotto-SmartContract-Final.sol

Once deployed, navigate to your Chainlink VRF subscription and add your Lottery Smart Contract address as a consumer.

Follow video 1 if you have doubts.

Step 2 Backend DEPLOYMENT

Navigate to the backend folder located on the "Final" folder then install dependencies:

cd final
cd backend
npm i 

Update the interfaces.js file with your contract addresses and keys:

const lottery = 'ADD-LOTTERY-SMART-CONTRACT';
const key = 'ADD-SMART-CONTRACT-OWNER-WALLET-PRIVATE-KEY';
const apikey = "ADD-MONGO-DB-API-KEY";
const url = "https://data.mongodb-api.com/app/ADD-MONGO-DB-API-PATH/endpoint/data/v1/action/"; // replace "ADD-MONGO-DB-API-PATH" with your api path.

CTRL + S to save file

Run your backend:

cd final
cd backend
node backend.js

Follow video 4 if you have doubts.

Step 3 Admin Front-End DEPLOYMENT

Create a new nextjs instance for your admin front end:

npx create-next-app lottoadmin

If prompted:

  • No typescript
  • yes ESLINT
  • No Src
  • No App
  • Yes alias

Copy all the files inside "admin-front-end" folder located on the "Final" folder and paste inside the nextjs "lottoadmin" project folder. Replace files when promted.

Navigate to the nextjs "lottoadmin" project front-end folder and install dependencies.

cd lottoadmin
npm i 

Update the config.js file located in the "components" folder with your contract addresses:

const erc20 = 'ADD-ERC-20-SMART-CONTRACT-ADDRESS';
const lottery = 'ADD-LOTTERY-SMART-CONTRACT-ADDRESS';

CTRL + S to save file

Update the interfaces.js file located in the "components" folder with your backend addresses:

const backend = 'http://ADD-BACKEND-IP-ADDRESS:8082'

CTRL + S to save file

Run the Lotto Admin Front-end:

cd lottoadmin
npm run dev

Confirm you can access the front-end!

Follow video 5 if you have doubts.

Step 4 Lotto Front-End DEPLOYMENT

Create a new nextjs instance for your game front end:

npx create-next-app lottogame

If prompted:

  • No typescript
  • yes ESLINT
  • No Src
  • No App
  • Yes alias

Copy all the files inside "game-front-end" folder located on the "Final" folder and paste inside the nextjs "lottogame" project folder. Replace files when promted.

Navigate to the nextjs "lottogame" project front-end folder and install dependencies.

cd lottogame
npm i 

Update the config.js file located in the "components" folder with your contract addresses:

export const lotterycontract = 'ADD-LOTTO-SMART-CONTRACT';
export const erc20contract = "ADD-ERC20-SMART-CONTRACT";

CTRL + S to save file

Update the interfaces.js file located in the "components" folder with your backend addresses:

const backend = 'http://ADD-BACKEND-IP-ADDRESS:8082'

CTRL + S to save file

Run the Lotto Game Front-end:

cd lottogame
npm run dev

Confirm you can access the front-end!

Follow Final Video if you have doubts.

n2dlotto-erc20-lottery-app's People

Contributors

net2devcrypto avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.