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

🖥️ 메인페이지

🖥️ 게시글 상세페이지

🖥️ 회원가입후 로그인 페이지 이동

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

🖥️ 마이페이지

🖥️ 로그아웃 후 로그인 페이지 이동

🖥️ 오류페이지

canu0205/blockpink