beb-09-second-02

팀명

BlockPink

팀 구성 및 역할

• 박찬우(팀장)

  잡부(백엔드, 컨트랙트, 프론트엔드)

  • 컨트랙트 배포

    • ERC20
    • ERC721URIStorage - NFTLootBox 형태, 지정한 ERC 20 토큰의 특정 양으로 구매가능

  • API Docs 작성

  • API 구현

    • users.js - 특정 유저의 정보 조회
    • posts.js - 게시글 조회, 게시글 작성, 게시글 삭제, 게시글 수정
    • fildUpload.js - 로컬에 파일 저장, ipfs에 이미지 파일 pinning 및 ipfsHash 가져오기
    • nft.js - NFTLootBox 로 NFT 민팅

  • 클라이언트 API 연동

    • 회원가입, 로그인, 게시글 조회, 유저 정보 조회, eth-faucet 요청, 게시글 포스팅, nft 민팅

  • 클라이언트 유저 정보 관리(react Context hook, localStorage 사용)

  • 프로젝트 진행 과정 매니징

• 금윤수

  백엔드

  • Schema & API Docs 작성
  • Server 구축, DB 연결 등 초기 환경 세팅
  • API 구현(init.js ,join.js, auth.js, ethFaucet.js, sendToken.js)
  • Daemon.js(트랜잭션 실시간 모니터링) 구현
  • BackEnd Architecture 작성, Contracts,Server,Client README Files 정리

• 유채원

  프론드엔드(Sign In, Login, Create NFT, MyPage, Header Logout 초기 구현), Flow Chart 작성

• 한재경

  프론트엔드

  • Wireframe 작성
  • Herder, Footer, Sidebar.. 등 전체적인 홈페이지 UI&UX DESIGN
  • Spinner, Notfound 페이지 구현

Quick Start

Follow these steps to get started:

1. Installing the foundry and running anvil:

foundry

$ curl -L https://foundry.paradigm.xyz
$ foundryup

anvil

$ anvil

2. Contract Deployment: Deploy the contracts by following the instructions in the contracts/README.md file.

3. Server Execution: Start the server by following the instructions in the server/README.md file.

4. Client Execution: Run the client application by following the instructions in the client/README.md file.

프로젝트 소개

백엔드 아키텍처

프론트엔드 플로우차트

기술 스택

Contracts

Foundry - 컨트랙트 배포(forge) 및 로컬 블록체인 노드 운영(anvil)

Backend

Express.js - 서버 구축

MySQL - DB 구축

Sequelize - ORM 이용

Multer - 파일을 다루기 위한 Node.js 미들웨어

Frontend

React

Material UI(MUI) - CSS 라이브러리

프로젝트 기간

2023년 7월 3일 ~ 2023년 7월 13일

Page View

🖥️ 메인페이지

🖥️ 게시글 상세페이지

🖥️ 회원가입후 로그인 페이지 이동

🖥️ 로그인후 마이페이지 이동

🖥️ 마이페이지

🖥️ 로그아웃 후 로그인 페이지 이동

🖥️ 오류페이지

🖥️ 게시글 작성페이지

🖥️ 게시글 삭제 기능

🖥️ NFT 민팅페이지

🖥️ ETH Faucet 기능

🖥️ 유저 간 토큰(ERC20, SWT in this service) 전송 기능

🖥️ 로딩화면