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

• Override tailwind.config.js with the code inside this file.
• Override global.css

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! ✅

5. Copy CID.
6. 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

• Full-stack-web3-connectors: a repo that contains different ways of using web3 connectors.
• Nextjs repo: repo that we are going to work with.
• Hardhat simple storage: Patricks repo clonned to run our own local Blockchain network and interact with its Smart Contracts.
• web3uikit: Can be used for the front end to interact when user changes account or connect/disconnect.
• tailwindcss with Nextjs: CSS formater.# raffle-frontend