NFT를 통한 투명한 해양 기부 서비스, 푸르게

🌊 https://purgae.net/ (현재는 free tier 문제로 잠시 서비스 중단)

PC환경으로 제작되었습니다. 반응형 페이지가 적용되어 있습니다.

1. 프로젝트 개요

🏆 프로젝트 목표

심각한 환경 문제 중 하나인 해양 쓰레기를 처리하기 위한 기부 사이트 입니다.

기존에 단순히 성금 모금과 전달에 머물렀던 기부 서비스를 NFT와 결합하여 기부자에게 새로운 재미와 보람을 제공합니다.

기부와 동시에 NFT를 획득할 수 있으며, 게이미피케이션 요소를 서비스 곳곳에 배치하여 일회성 기부 사이트가 아닌 즐기면서 기부할 수 있는 사이트를 제작하였습니다.

📅 전체 일정

2022.08.29 ~ 2022.10.06 (6주)

👥 구성원

같이海요 팀

2. 프로젝트 설계

🎨 Figma(link) / 📖 REST API (link)/ 📃 컨트랙트 (link) / :file_folder: 파일 구조 (link)

🛠 개발환경 (link)

📊 아키텍처

🛢 ERD

4. 프로젝트 소개

메인 수족관	메인

초기 접속 페이지(수족관)

• 수족관이 보이고, 오늘 기부한 후 발급된 해양생물 NFT가 떠다닌다.
• 음악을 재생할 수 있고, 배경을 누르면 물방울이 올라간다.
• 프로필에서 접속하는 개인수족관은 개인이 기부한 후 발급받은 NFT가 보인다.

메인페이지

• 푸르게 서비스에 대한 설명과, 기부받은 돈을 어떻게 사용할 것인지 알 수 있다.
• 간단한 FAQ를 볼 수 있다.

로그인	로그인 (네트워크가 다를 시)

로그인

• 메타마스크를 이용하여 고릴 네트워크로 연결할 수 있다. 초기 렌덤 닉네임이 발급된다.
• 메타마스크에 로그인이 되어 있다면 자동으로 연결되어 서비스를 이용할 수 있고, 잠금 시 로그아웃된다.

기부하기	랭킹

기부

• 최소 0.005ETH를 기부할 수 있고, 기부한 금액으로 몇kg의 쓰레기를 치웠는지 볼 수 있다.
• 기부를 누르게되면, 메타마스크 창이 열리고 거래가 진행된다. 기부된 금액은 100% 기부되며, opensea에서 재판매시 금액의 10%가 푸르게 서비스로 기부된다.
• 도감상세를 누르면 제공되는 해양생물 NFT종류를 볼 수 있고,발급된 NFT는 프로필페이지에서 볼 수 있다.

랭킹

• 팔로워, 게임랭킹을 볼 수 있다.
• web3를 통해 NFT기부 횟수, 기부횟수에 따른 쓰레기를 치운 횟수를 볼 수 있다.

게임 (플레이)	게임 (공유하기)

게임

• 내가 발급받은 NFT로 게임을 진행할 수 있다.
• 게임 방법, 랭킹 등을 확인할 수 있고 카카오톡으로 게임점수를 공유할 수 있다.

프로필	프로필 (개인 정보 수정)

프로필

프로필 팔로우 및 도감

• 다른 사용자의 프로필을 팔로우, 팔로우 해제할 수 있으며 리스트에서 볼 수 있다.
• 기부를 통해 발급받은 NFT를 도감으로 볼 수 있고, NFT를 클릭하면 도감 상세를 확인할 수 있다.

개인정보 수정

• 프로필 페이지에서 내 NFT를 등록할 수 있고, 초기 발급받은 랜덤 닉네임을 수정할 수 있다.
• 유효성 검사, 닉네임 글자수 제한이 되어있다.

FAQ	FAQ

자주 묻는 질문

• NFT가 익숙하지 않은 사용자들을 위해, 사이트 소개와 더불어 메타마스크 사용방법, 고릴이더를 무료로 받는 방법 등 다양한 안내를 적어두었다.

5. 포팅 매뉴얼

Backend

1. git clone https://lab.ssafy.com/s07-blockchain-nft-sub2/S07P22B107.git
2. cd Back
3. 경로 : Back/src/main/resources/properties/env.properties 파일 추가

db.username = {username}
db.pw = {password}

1. Build Project
2. Run ‘PurgaeApplication’

Frontend

1. cd Front
2. 경로: Front/.env파일 추가

VITE_API = {api}

# contract
VITE_CONTRACT_ADDRESS = {contract_address}

## wallet
VITE_BE_METAMASK_ADDRESS ={metamask wallet address}
VITE_BE_METAMASK_SECRET_KEY = ''

## alchemy: 고릴
VITE_PURGAE_NET_ALCHEMY = {alchemy key}

## 카카오 공유하기
VITE_KAKAO_APP_KEY = {kakao app key}

## 구글 애널리틱스
VITE_GA_KEY = {google analytics}

1. Project build : npm install
2. Project run : npm run dev

6. 프로젝트 산출물

• 발표자료

• UCC

• 배포 매뉴얼

• 시연 시나리오