REracle 재활용품 별 분리수거 방법 서비스

REracle 사용자들이 쉽고 정확하게 재활용품을 분리수거할 수 있도록 도와주는 웹 기반 서비스입니다. React와 Firebase를 활용하여 개발된 이 서비스는 실시간 데이터 업데이트 기능을 제공합니다.

배포 링크

https://reracle.netlify.app/

시작

설치 및 실행

git clone https://github.com/FE8-Team6/renewal-reracle.git

yarn install

yarn dev

사용한 기술

React.js	TypeScript	Vite	TailwindCSS	Firebase
Git	Eslint	Prettier	PWA	Vitest

REracle 개발 과정

1️⃣ 먼저 피그마로 기획을 했습니다.

🖼️ 피그마

초반 REracle 프로젝트는 처음에 4명에서 기획을 하여 1명이 피그마 와이어프레임을 작성하였습니다.
디자인 시안을 확인할 수 있습니다.

2️⃣ REracle 프로젝트 컨벤션

🤙 REracle 프로젝트 컨벤션

프로젝트에 일관된 개발 컨벤션을 사용하였습니다. 브랜치 이름과 커밋 메시지, label 등에 동일한 규칙을 적용하여 어떤 작업을 진행하고 있는 명확하게 표시하고, 쉽게 이해하도록 하였습니다.

3️⃣ 개발 과정에서 고민 했던 내용

REracle을 혼자서 기획 및 구현하면서 고민했던 내용들을 볼 수 있습니다.

• Styled-components에서 Tailwind로 전환
• 뷰포트 단위에서 rem, px, %, vh로 리팩토링
• React PWA에서 푸시 알림 구현하기: 사용자 경험을 한 단계 업그레이드하세요.
• REracle: 비용 효율적인 서비스 운영