Git Product home page Git Product logo

awsome-place-frontend's Introduction

Awesome Place FrontEnd Part

스크린샷 2022-05-27 오전 10 00 44

사이트: http://youngble.shop/

시연영상 : https://youtu.be/03uA2gT4y-0

Awesome Place 프로젝트 소개

사용자가 보다 쉽게 다양한 카테고리, 테마, 차별화된 음식추천서비스(선택장애, 룰렛)를 통해 맛집을 추천받고 사용자가 원하는 음식 및 음식점을 검색하여 음식점을 찾을 수 있는 서비스이다. 서울 지역을 중심으로 '서울열린데이터광장' 모범음식점 데이터를 사용하여 보다 나은 안전하고 청결한 음식점들을 선별하여 서비스하였다.

개발기간

2022.03.03 ~ 2021.5.21

프론트엔드 파트담당

김태언 https://github.com/Taeeon-kim

백엔드 파트담당

백엔드페이지 -> https://github.com/Capstone-Awesome-Place-Team/BackEnd

핵심기능

  • 메인페이지 - 선택장애,룰렛, 테마, 카테고리, 검색창 서비스 제공
  • 선택장애 - 8가지의 키워드를 제시해주고 키워드를 선택하면 키워드에 해당하는 8가지의 음식을 추천
  • 룰렛 - 슬롯머신 애니메이션효과와 함께 3가지의 랜덤한 음식을 추천
  • 내찜목록 - 찜한 리스트를 각구별로 선택 필터하여 볼 수 있음
  • 나만의맛집지도 - 찜한 리스트를 커스텀디자인한 지도에 원하는 구를 선택하여 해당 구에 저장한 찜목록을 볼 수 있음
  • 테마페이지 - 10가지의 테마에 맞는 음식점들을 추천
  • 검색결과페이지 - 카카오맵api를 활용 검색된 음식점리스트를 지도에 보여주고, 정렬(댓글순,평점순)을 하여 우선순위로 볼 수 있고, 필터를 통해 가격대 주차, 포장 여부를 선택하여 리스트를 볼 수 있다.
  • 상세페이지 - 해당 음식점의 정보(가격대, 이미지, 주소)를 볼 수 있고 리뷰작성을 통해 별점과 함께 후기를 남길수있다. 또한 카카오맵을 통해 해당 음식점 위치를 확인할 수 있다.

기술 스택

Typescript, React ,Redux, Styled-components, AWS S3

Tool

Git , GitHub, Github Actions(CI/CD)

UX Flow

스크린샷 2022-05-27 오전 9 34 18

아키텍처

FrontEnd_Architecture

awsome-place-frontend's People

Contributors

taeeon-kim avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.