MongoDB Atlas Hackathon 2022 - TheSample web3 project for developers and community builders
Published: 2022-11-25 16:46:32

## What I built

The sample project for web3 enthusiasts, community builders and developers. This project contains of smartcontract (ERC-721) and a website with dashboard and wallet (Metamask) authorization. It can be cloned and used for selling pfp-avatars or NFT collections. 

You can check the app link below and try to register using any wallet you want.

### Category Submission: 

Choose Your Own Adventure

### App Link

[Link to TheSample project](https://web3-pfp-sample.vercel.app/)

### Screenshots

**Main page:**

![Main page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d6uyq57xakzs499dhbku.jpg)

![Main page mobile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zx4f3c5z45t69emuosn8.jpg)

**Register form**

In the demo you can choose, how to register: admin or not. Dashboards will be different.

![Register form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2y8zsev8phtfwi4x1xae.png)

**Admin dashboard - Users**

Admins have access to all users. They can change their state to pending, verified, blocked. Only verified users have access to mint form. User's page also has a search.

![Admin dashboard - Users](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nslhicr9i1nf66fqg5ca.png)

**Admin dashboard - Settings**

Superadmin (specified in `.env`) can interact with smartcontract and start or stop the sale. Visibility of minting form also depends on that setting.

Superadmin can send emails to all verified users, that the sale has begun.


![Admin dashboard - Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xa8zn7501nwz3jurvmnk.jpg)

**User dashboard - Home**

Users have access to home page, where they can find information about the collection and mint form.

![User dashboard - Home](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2l1txesov3uocyenbbp.png)

**Minting**

![Minting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7dj0qihvis8dhue1wi0m.jpg)

**User dashboard with minted token**

![User dashboard with minted token](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ms54u13di9qdswxf1cca.jpg)

**Private page for NFT holders**

Only NFT holders have access to "Private page".

![Private page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0x6ihnctepbo0p9o7mw.jpg)

**Provenance page**

Page with the provenance hash. Script of the calculating provenance hash is available in the [repo](https://github.com/gapon2401/web3-pfp-sample).

![Provenance page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jk5vs5kf8ots24u8r6m7.jpg)

### Description

This project gives you the ability to create and deploy smartcontract, create the list of people, who will be elegible to mint NFT from your collection. After that people will have access to Private page, available only for NFT holders. You can extend the project as you want.

Let's explore users experience.

1) Users get to the site, read the information about your project and collection.

2) Users register using their wallet and fill in all necessary information. After that the dashboard is available for them. From now, users are in the waiting list.

3) Admin need to check the users and make them verified. Users get the email (Mailgun integration), that they were verified.

4) Admin starts the sale. In the Settings tab there is a button for sending emails to all verified users.

5) Users get the email about the sale, go to the dashboard and mint the token.

6) After minting users will get access to Private page

Further steps is up to you!

More information you will find in repositories.

### Link to Source Code

[Web repo](https://github.com/gapon2401/web3-pfp-sample)

[Smartcontract repo](https://github.com/gapon2401/web3-pfp-smartcontract)

### Permissive License

MIT

## Background

I wanted to create a project, that can be useful for web3 developers or community builders even after the hackathon ends.  

It might be difficult to organize the sale of NFT collection, especially, if you need universal whitelist, where you can add or remove people at any time. It's very important to unite like-minded people and have the ability to know more about them, before you give them access to your club. 

That's why I've made that project. You can easily change it to suit your needs. It contains dashboard for admins to manage users, dashboard for users to mint tokens and get special access to "Private page". 

I hope it makes someones life easier 😊  

### How I built it

This is the first time I was using the MongoDB, and I found it easy-to-start and easy-to-use. 

You just need to create Mongo DB and this is it. Table will create automatically after you run the project. For superadmin I added a button "Setup indexes" to add additional indexes.

I used [node driver](https://www.mongodb.com/docs/drivers/node/current/) for the project.

Stack and services:
- [MongoDB](https://www.mongodb.com/atlas) for holding users information, 
- [React](https://reactjs.org/) + [Next.js](https://nextjs.org/) for website navigation,
- [Solidity](https://docs.soliditylang.org/) + [Hardhat](https://hardhat.org/) for smartcontract,
- [Python](https://www.python.org/) for creating provenance hash  
- [Mailgun](https://www.mailgun.com/) for mailer

### Additional Resources/Info

- [Create, deploy and mint smart contract (ERC-721) with NodeJS + Hardhat + Walletconnect + Web3modal](https://dev.to/igaponov/create-deploy-and-mint-smart-contract-erc-721-with-nodejs-hardhat-walletconnect-web3modal-59o8)
- [How to Implement a Whitelist in Smart Contracts (ERC-721 NFT, ERC-1155, and others)](https://www.freecodecamp.org/news/how-to-implement-whitelist-in-smartcontracts-erc-721-nft-erc-1155-and-others/)