• 

  Web Application Screenshot

Bullery

User can upload, sell, and buy Bull NFT artworks.

Inspiration

Recently, NFT (Non-fungible Tokens) seem to have exploded out of the ether this year. From art and music, these digital assets are even selling some for millions of dollars. This NFT can protect the license of the digital artwork using BlockChain technology with its unique identifying codes. These characteristics that NFTs are unique, irreplaceable, and provide exclusive ownership on the blockchain blew our mind and trigger us to learn and implement a small project using the idea of NFT.

What it does

• User Stories

  User	Functions
  Mint NFT button	User can register and bring Bull NFT to their own NFT page
  My NFT	User can view, set price to sell, and sell their owned Bull NFT
  Sale Status under My NFT	User can check if they are logged in to sell Bull NFT
  Sale NFT	User can view Bull NFTs on sale and buy them
  Other Tool required	MetaMask Chrome Extension

• DApp explained A decentralized application (DApp) is an application built on a decentralized network that combines a smart contract and a frontend user interface. On Ethereum, smart contracts are accessible and transparent – like open APIs – so your DApp can even include a smart contract that someone else has written.

How we built it

Package Structure

📦 contracts
 ┣ 📂 node_modules
 ┃ ┗ 📂 @openzeppelin
 ┃ ┗ 📂 .package-lock.json
 ┣ 📂 package-lock.json
 ┣ 📂 package.json
 ┣ 📂 MintAnimalToken.sol
 ┣ 📂 SaleAnimalToken.sol
 ┣ 📂 artifacts
📦 frontend
 ┣ 📂 node_modules
 ┣ 📂 public
 ┃ ┗ 📂 NFTimages
 ┣ 📂 src
 ┃ ┗ 📂 components
 ┃ ┃ ┣ 📂 AnimalCard.tsx
 ┃ ┃ ┣ 📂 Layout.tsx
 ┃ ┃ ┣ 📂 MyAnimalCard.tsx
 ┃ ┃ ┣ 📂 SaleAnimalCard.tsx
 ┃ ┗ 📂 routes
 ┃ ┃ ┣ 📂 main.tsx
 ┃ ┃ ┣ 📂 my-animal.tsx
 ┃ ┃ ┣ 📂 sale-animal.tsx
 ┃ ┗ 📂 App.test.tsx
 ┃ ┗ 📂 index.tsx
 ┃ ┗ 📂 react-app-env.d.ts
 ┃ ┗ 📂 reportWebVitals.ts
 ┃ ┗ 📂 setupTests.ts
 ┃ ┗ 📂 web3Config.ts
 ┣ 📂 .gitignore
 ┣ 📂 config-overrides.js
 ┣ 📂 package-lock.json
 ┣ 📂 package.json
 ┗ 📂 tsconfig.json

Technologies

👉 Technologies Used for Bullery Project

• BlockChain

  • Solidity
  • Remix | Ethereum IDE
  • ERC721
  • Smart Contract

• Frontend

  • React
  • TypeScript
  • Charkre UI

• Deployment

  • GitHub Page

• Collaboration

  • GitHub
  • Git
    

Contributors

👉 Introduce team members and contribution

Challenges we ran into

• Building an NFT website was challenging since it was our first time experiencing Solidity. We have read the docs regarding the concept of Solidity, Smart Contract, DApp, and BlockChain in general and referred to some YouTube videos to implement the NFT blockchain part.

• In addition to constructing the NFT blockchain portion, connecting React frontend part to the blockchain was struggling. We have utilized Charkre UI in order to reduce some time to design the web frontend and Web3.js to connect both ends.

Accomplishments that we're proud of

• We are proud that we could implement a fully functioning web application that the user can mint, set a price, sell, and buy their NFT with a few clicks.

• We are proud that we collaborated utilizing Git and GitHub for the team project and be part of USF's 4th Hackathon, participating in a team project and several workshops and managing the limited time.

What we learned

• We were able to understand how BlockChain works under the frontend webpage by doing debugging on Remix Ethereum IDE

• We were able to know how to work on a project as a group (utilizing Git and GitHub - creating branch, merge, pull request, etc)

What's next for Bullary

• More functions
  • Users can upload their own NFT artworks on the web app
  • User Registration Backend
  • Users can manage their NFT artworks (adding comments, product explanation, etc)
  • Users can view other's NFT artworks
  • Users can create their personalized gallery with their owned NFTs.

Built With

• charkre
• css
• git
• github
• react
• remix
• solidity
• typescript