Overview

팀 명 쓰레기 조(줘)

프로젝트 명 Fresh Trash

🌐 https://github.com/fresh-trash-project

💢 환경부 자료에 의하면 매일 1인당 생활 폐기물이 1kg이상 발생합니다.

Fresh Trash

매년 늘어가는 폐기물을 줄이기 위해 사용가능한 폐기물을 거래하여 재사용 될수 있게 하는 웹 서비스, Fresh Trash를 소개합니다.

• Fresh Trash에 가입해서 집안에 안쓰고 자리만 차지했던 애물단지를 등록하고 판매, 나눔하세요.
• 다른 유저가 등록한 애물단지를 살펴보고 구매해 보세요.
• 마음에 드는 애물단지를 찜하세요.
• 애물단지에 대해 궁금한 점이 있으면 실시간 채팅으로 물어보세요.

시연영상

데모영상(경매리뷰 변경사항 반영) (1).mp4

기술 스택

프론트엔드

Core Technologies

• HTML
• CSS
  • 반응형 디자인(모바일~데스크톱)
  • styled-components
  • TailwindCSS (+daisyUI, flowbite)
• Javascript
• React
  • react-icons
  • react-daum-postcode
  • react-toastify (알림 및 사용자 피드백)
  • react-i18next (국제화 및 다국어 지원)
  • react-spinners (로딩 스피너)
  • url-join (URL 조합 유틸리티)

Routing

• React-Router-Dom

State Management

• Recoil

Tools & Deployment

• VITE: 프론트엔드 빌드 도구
• Axios: HTTP 클라이언트 라이브러리
• StompJS: WebSocket 통신 구현
• event-source-polyfill: 오래된 브라우저에서 SSE 지원 및 인증토큰을 포함한 커스텀 헤더 전송
• Figma: UI/UX 디자인
• Vercel: 프론트엔드 호스팅 및 배포

백엔드

• Language
  • Java 17
• Framework
  • QueryDSL, Spring JPA
  • Spring Security(JWT), OAuth2
  • Spring Mail(+ Email Validation API)
  • Spring WebSocket(+ STOMP)
  • Spring AMQP(RabbitMQ)
  • SSE(Server-Sent Event)
  • Spring Actuator
• Build
  • Gradle
• Database
  • MariaDB
  • Redis
• Proxy
  • Nginx
• Container
  • Docker
• AWS
  • Amazon EC2, Amazon S3, Amazon RDS, Amazon ElastiCache
• CI/CD
  • GithubAction
  • CodeDeploy
• Testing
  • JUnit5, Mockito, JaCoCo, CodeCov, Jmeter
• Tool
  • IntelliJ
  • Grafana, Prometheus
  • Postman

시스템 아키텍쳐

ERD