Phenon | NFT Minting Website

A go-to NFT minting application built with React and shadcn-ui UI library. It uses the Thirdweb APIs to integrate contract features. This project is a web application developed using modern web technologies, including React, TypeScript, TailwindCSS, and Vite. The project structure is set up for optimal development and build processes, with linting and type-checking integrated for code quality assurance.

Demonstration & Snapshots

Video

Click the link to watch the minting step progress demo: https://github.com/thanhhoa214/nft-minting/blob/b8f820539e44f08f9f405d9b3e5ba786c91f83d0/minting/demo/demo.mov

Snapshots

Features

• List all NFTs of the contract
• Filter NFTs by selecting an owner
• Upload file to IPFS
• Mint NFTs with comprehensive progress tracking and validations by react-form-hook and zod
• Expand an NFT detail at the Home Page
• Support dark-mode

Project Structure

📦  root
 ┣ 📂 demo - Demo folder
   ┣ 📃 demo.mov - Demo file
   ┣ 📃 home.jpeg - Demo file
   ┣ 📃 mint.jpeg - Demo file
 ┣ 📂 src
 ┃ ┣ 📂 components
 ┃ ┃ ┣ 📂 sections - sections of pages
 ┃ ┃ ┣ 📂 ui - shared components across the pages, initialized by `shadcn-ui`
 ┃ ┣ 📂 hooks - reused data-related hooks
 ┃ ┣ 📂 lib - library integration, util, ...

Getting Started

To get a local copy up and running, follow these steps:

1. Clone the repository:

git clone https://github.com/thanhhoa214/nft-minting.git

2. Install the dependencies:

cd minting && npm install

3. Start the development server:

cd minting && npm run dev

The application will be available at http://localhost:5173.

Deployment

To build the application for production, use the following command to build it at dist destination:

npm run build

Built With

• React
• shadcn-ui
• Tailwind CSS
• Thirdweb
• react-confetti
• usehooks-ts

Thank you!

Thank you so much for the interviews and valuable chats. Being a crypto holder, I would love to be a part of your team to accelerate Web3 adoption to the community!