8000 raffle-frontend/README.md at main · JMariadlcs/raffle-frontend · GitHub
[go: up one dir, main page]
Skip to content

Latest commit

 

History

History
115 lines (73 loc) · 3.69 KB

README.md

File metadata and controls

115 lines (73 loc) · 3.69 KB

RAFFLE FRONT END ✅

This is a full stack decentralized Raffle App using Chainlink VRF and Chainlink Keepers, Solidity and Next.js from workshop from Chainlink Hackathon Spring 2022 and which is also complemented by Patrick Alpha's Free Code Camp course.

This repo contains all the stuff for the front-end part, the back-end is hold on raffle-frontend.

To achieve fully descentralization the Front-End has been uploaded to IPFS and fleek: ipfs://QmexxqxhViwpFsbWnbMktNhG3qsukTA58rLyLQaCpg8vy3, https://curly-butterfly-3592.on.fleek.co/

The workshop followed to complete this repo is this one.

The used repos from Patricks are the followings:

  1. Hardhat Smart Contract Lottery: Patrick's repo that we are building.
  2. Front-end Smart Contract Lottery: Patrick's repo for the Front-end part.
  3. Patricks Hardhat course video.

DEPENDENCIES AND SET-UP

  • Create Next.js project:
yarn create next-app .
  • Add Moralis to interact with front-end:
yarn add moralis react-moralis
  • Add Moralis web3uikit to interact with front-end:
yarn add web3uikit
  • Add tailwindcss (CSS formarter):
yarn add --dev tailwindcss postcss autoprefixer

or

npm install tailwindcss postcss autoprefixer
  • Initialize tailwindcss:
yarn tailwindcss init -p

or

npx tailwindcss init -p

RUN LOCAL SERVER:

yarn dev

You will have your local server running at: http://localhost:3000.

  • Open new bash terminal to use while yarn server is running

EXPORT CODE

Once our Front-End code is finished..

  1. Export our code to a Bundle.
  2. Upload the Bundle to IPFs to be fully decentralized.
  • Execute:
yarn next build
yarn next export

A file called out is going to be generated with our exported code.

UPLOAD TO IPFS

We want our Front-End to be fully decentralized. To achive this goal we are uploading the out file to IPFS.

  1. Open IPFS.
  2. Go to Files.
  3. Import out directory.
  4. Click 'set pinning'.

DONE! ✅

  1. Copy CID.
  2. Go to Browher and paste ipfs://CID.

NOTICE: It is possible to use fleekhq or pinata to host our ipfs in a normal domain in order to make it easier for people to reach our page.

REMINDER: if you use fleekhq (recomended) -> add: buildcommand: 'yarn install && yarn run build && yarn run export'

RESOURCES
0