This post may kind of boring for those didn't know how to coding.
First, put the good github reference (Please give a star to him): https://github.com/HashLips/hashlips_nft_minting_dapp
I am not expert on full-stack things, I didn't touch JS or react.js before, I only had little experience on HTML and CSS, I was helping my friend to build a static website to display his resume, so I know how to find simple HTML/CSS template to write a website, but I didn't know how to interact with the smart contract. I goolge for all while, still don't understand how to do that (Maybe you familiar with JS, you can understand easily). Until I found this great template, it solved everything, include the front-end template, and how to interact with contract, but the code is written by react.js, so I decide to study react.js and try to modify it.
I think there are a lot of page is using this template, below is what I found, be careful if you see these kind of pages, they may be scam or rug project, because they just want to fast implement with template, especially those just change image and didn't change any layout on pages, but not all of them all scam. https://woawnft.xyz/ https://www.evmfers.com/ You can see these pages looks like the same.
Step of using this github to build a DAPP and what things you need to notice
Install JS in your OS : https://nodejs.dev/download/
git clone the github, and install with npm (follow the step on the github)
you can check the usage on the github page, there are several setting you can change in simple way.
If you want to connect to your smart contract, you need to modify the "public/config/config.json" file, (see the attach image, these three place are most important, the others just impact the display on website.)
Change your public mint function on "src/App.js" (see the attach image, set your public function name on your contract, everyone deploy the contract may using different function name)
Run "npm run start" , and go to "http://localhost:3000/" to check all the setting is correct.
Modify the website whatever you want!!! (google it! search all the react command!)
Run the "npm run build", there is a folder name "build" will be deploy, put all files in the build folder to your server.
If you follow these steps, only change the background, and some image, it may only take half to one day finish this mint page, I spent about 3 days to finish my pages, because I learned a lot of front-end stuff, include the RWD, learn some react command, and generate logo / GIF iamges, and also, I may have OCD.
Discord :
Twitter :