OpenSea 클론코딩

OpenSea는 이더리움 기반의 NFT 거래소 입니다. 저희는 OpenSea 일부 기능(ERC-721)만을 클론 코딩 하였습니다. 저희 프로젝트의 OpenC에서는 ERC-721 기술로 생성된 NFT를 지갑을 연결하고 민팅을 하실 수 있습니다.

---

💻 Front-end Stack 💻

📫 Back-end Stack 📫

💾 Etc Stack 💾

---

👨‍👩‍👧‍👦팀 멤버

팀원	역할	기타
김서연(팀장)	Front-end	Blog link
김가연	Back-end	Blog link
이지수	Back-end	Blog link
유채원	Front-end	Blog link

---

Flow Chart

화면 흐름도

---

기능

• 로그인 / 로그아웃
  • 메타마스크 지갑을 이용해 로그인 할 수 있습니다.
    • 쿠키에 메타마스크에 로그인한 지갑 주소를 저장합니다.
  • 로그아웃을 하는 경우 지갑 연결이 해제 됩니다.
    • 로그아웃 시에 쿠키에 저장된 지갑 주소도 삭제됩니다.
• NFT 생성
  • 파일 첨부, NFT 타이틀, 가격 등을 모두 입력 후 Mint 버튼 클릭 하면 메타마스크 서명 요청을 할 수 있습니다.
  • 해당 서명은 서버에서 서명 검증을 하고, 검증이 완료되면 가스비를 지불 할 수 있는 창이 생성됩니다.
  • 가스비 지불이 완료되면 마이 페이지로 이동하면서 NFT 생성, 즉 민팅이 완료됩니다.
• IPFS
  • 이미지와 메타 데이터를 저장합니다.
  • 메타 데이터에는 NFT의 타이틀, 설명, 가격 등 NFT와 관련된 정보들이 포함되어 있습니다.
  • 해당 메타 데이터를 이용해 프론트에서 NFT 정보를 가져올 수 있습니다.
    • 메인 페이지와 NFT 상세 페이지, 마이 페이지에서 메타 데이터를 이용해 NFT 정보를 출력합니다.

---

프로젝트 실행 전 필요 항목

Contract Address

client 폴더 안에 .env 파일을 생성 후 아래 코드를 작성합니다.

현재 저희 repository에는 해당 코드가 작성이 되어 있는 상태입니다.

  REACT_APP_ERC_721_ADDRESS = "0x3b975dF52Bd5899c0600E3FEa9D4326c9c2b83Ee"

NFT.Storage API KEY

server 폴더 안에 .env 파일을 생성 후 NFT.Storage 홈페이지에서 생성한 API KEY를 작성합니다.

NFT_STORAGE_API_KEY = "Your API KEY"

NFT.Storage 홈페이지에 회원 가입 후 API Keys 탭에서 API KEY를 생성하실 수 있습니다.

---

실행 화면

Main Page

Create Page

Request Signature(서명 요청)

Pay for Gas Fee(가스비 지불)

My Page

Detail Page

---

Package.json

Client

1. React Version

    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",

2. react-router-dom Version

   "react-router-dom": "^6.13.0",

3. React-slick Version

   "react-slick": "^0.29.0",
   "slick-carousel": "^1.8.1",

4. React-cookie Version

   "react-cookie": "^4.1.1",

5. MUI Version

   "@mui/icons-material": "^5.11.16",
   "@mui/material": "^5.13.5",
   "@mui/styles": "^5.13.2",

Server

1. OpenZeppelin Version

   "@openzeppelin/contracts": "^4.9.2",

2. cors Version

   "cors": "^2.8.5",

3. dotenv Version

   "dotenv": "^16.3.1",

4. Express Version

   "express": "^4.18.2",

5. multer Version

   "multer": "^1.4.5-lts.1",

6. nft.storage Version

   "nft.storage": "^7.1.0",

7. nodemon Version

   "nodemon": "^2.0.22"

8. ethers Version

   "ethers": "^5.7.2"