This is my first React dApp serverless to mint NFT (jpeg projects) on ETH, I'm beginner in react
The project got boring for me
I use firebase for Authentication and store datas,
- I used react-app-rewired cuz i need buffer to generate a merkle tree when we update the whitelist on contract
- Working with firebase but u can create ur own API and auth system
- Tailwind <3
The dApp interact with a contract already deployed, so u need to put the json of contract on /contracts and import him where u want. After just set the address of contract in contract.js
if you use firebase like me, don't forget to update firebase.js with your datas, create a file .env.local and set ur firebase api key "REACT_APP_FIREBASE_API_KEY=XXXXX"
Dont forget to update some function who interact with contract with the ETH mainnet and your contracts functions
Auth and steps of contract are set in global context
Working with Firebase Auth system.
When submit form in login page if its successfully we set the user in context and now you can access to the private route /admin
step are recovered when you load App.js, and changed when you update the contract or set "soldout" in admin panel.
According to current step of context the buttons on page change so you dont need to update the website on the server
this is of what my steps collection look like :
If the current Step of contract is se to "Before" (when new user can be whitelisted) an user can click on the button in whitelist page and its juste create a new document on the whitelist collection in firebase
example :
My firebase rules (first time, do it better plz)
- Premint function
- Limite access to page Whitelist/Premint/Mint when its the current step
- Better design
- Limite by IPs when writing in whitelist collection
- The are no "COUNT" in firebase, so when an user load whitelist page we count one by one all address whitelisted, its actually not scalable , so find a better way than count one by one whitelisted addresses
- Refactor somes functions
- Error/success messages