hongzzi / sogaething-pwa-react-ts-mobx

맞춤형 중고거래 매칭 PWA - typescript / nextjs / ...

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool


mock-up

소개띵

매칭시스템을 도입한 중고거래 PWA

UI/UX기획안 · 프로젝트 계획서


📎 프로젝트 소개

검색하지 말고 소개받자, 물건을 소개해주는 소개 Thing !

Product Name Screen Shot

소개띵은 조건검색으로 중고물품을 매칭시켜주는 중고거래 플랫폼입니다.

기존 중고거래 사이트 중고나라, 번개장터, 당근마켓은 많은 게시글을 제공해 이용자에게 결정권을 줍니다. 제목에 의존한 검색으로 년도, 모델명, 상태 등의 세부조건에 충족하는 물건을 찾는게 어렵습니다. 그 중 원하는 가격과 조건의 물건을 찾으려면 많은 시간을 할애해야 합니다. 또 마음에 드는 가격의 물품이라 연락했는데 사기글 또는 광고글이었던 경험은 누구나 가지고 있을 정도입니다.

그래서 소개띵은 조건매칭시스템과 해시태그검색을 사용합니다. 사용자가 원하는 조건에 가장 알맞은 게시글을 추천해주고 해시태그를 이용해 상세한 검색이 가능하도록 했습니다. 추가로 카카오페이를 제공하여 은행앱에 가지 않아도 송금이 가능하도록 기능을 구현했기에 보다 쉬운 물품검색과 거래경험을 제공할 수 있습니다.


소개띵은 PWA(Progressive Web App)입니다.

Cross-platform App을 구축하는 기술 중 가장 인기있는 두 가지는 PWAReact Native 입니다. PWA를 선택한 이유는 앱스토어를 통해 모바일 디바이스에 타겟팅 하는 것 외에 브라우저를 통해 광범위한 사용자 및 장치에 접근하고자 했기 때문입니다. PWA는 React Native에 비하여 비교적 적은 비용으로 다양한 기기에서 퍼포먼스를 낼 수 있습니다. HTML, CSS 및 JS를 사용하여 앱을 한 번 작성하면, 브라우저를 사용할 수 있는 대부분의 곳에서 실행됩니다. 브라우저를 사용할 수 없는 경우 PWA를 감싸고 있는 작은 화면에서 WebView를 사용하여 항상 하이브리드 앱을 빌드 할 수 있습니다.

참고문서 : PWA vs React Native


📋 프로젝트 산출물

Built With

사용한 프레임워크


⚙️ Getting Started

소개띵 시작 방법입니다. 클라이언트 실행방법을 설명해드립니다.

Installation

  1. Clone the repo
git clone https://lab.ssafy.com/s02-final/s02p31a404.git
  1. Install NPM packages
cd client
yarn install
  1. Enter your API in .env.build
NEXT_APP_STAGE = 'example'
NEXT_APP_GRAPHQL_ENDPOINT = "http://www.example.com"
NEXT_APP_KAKAO_CLIENT_KEY = "example"
NEXT_APP_REST_ENDPOINT = "http://www.example.com/chat"
NEXT_APP_SOCKET_ENDPOINT = "http://www.example.com/ws-stomp"
  1. generate and run
yarn generate
yarn dev

⚒️ 개발스택

협업Tool

Language

DBMS

Library



👥 Contact

Samsung Software Academy for Youth 2th Seoul, 심화프로젝트 A404

Project Link: https://lab.ssafy.com/s02-final/s02p31a404


참고문서


About

맞춤형 중고거래 매칭 PWA - typescript / nextjs / ...


Languages

Language:Java 48.5%Language:TypeScript 46.5%Language:HTML 2.3%Language:JavaScript 1.4%Language:CSS 1.1%Language:Dockerfile 0.1%