Code Monkey home page Code Monkey logo

23-1st-tangoplate-frontend's Introduction

Mango Plate Clone Project!!

Tango Plate Project Family

  • F.E
    이정일 : 인간 망고플레이트 / 해당 프로젝트에 진심인 개발자
    최정민 : F.E 막내 On top / F.E에서 실질적 PM의 위치
    김명성 : 여얼쩡 여얼쩡 / 팀에서 말이 제일 많지만 분위기를 담당하고 있음

  • B.E
    고유영 : 망고 플레이트 제안자 / 정신적 지주이자 우리들의 최고PM
    한승훈 : B.E 능력자 / 다른 조에서도 눈독 들이고 있는 B.E top class

What is Tango Plate Project?

  • 국내 맛집이란 맛집은 다 모인 망고플레이트 클론 프로젝트
  • 촉박한 프로젝트 기간으로 최소 기능을 구현할 수 있는 페이지만 클론
  • wecode Bootcamp에서 배운 내용들을 바탕으로 구현할 수 있는 기능들과
    그 외에 추가로 구현할 수 있는 기능들을 선정해 구현했습니다.
  • 개발은 초기 세팅부터 직접 구현했으며, 프론트와 백을 연결해 실제 사용 가능한 수준으로 개발했습니다.

개발 인원 및 기간

  • 개발기간 : 2021/8/2 ~ 2021/8/13
  • 개발 인원 : 프론트엔드 3명, 백엔드 2명
  • B.E github 링크

프로젝트 선정이유

  • 그동안 wecode에서 구현했던 기술들을 접목해 클론 하기 적합한 난이도
  • 사용자에게 일방적인 정보 제공보다 여러 사용자의 데이터를 기반으로
    다른 사용자에게 나은 정보를 제공한다는 점에 매력을 느낌
  • 인간의 3대욕구 중 하나와 관련된 사이트이다 보니, 코드로 구현하는 부분 외에도
    다양한 즐거운 부분이 있어 프로젝트 진행 과정에서 지치지 않고 할 수 있음

적용 기술 및 구현 기능

적용 기술

-Front-End : javascript, React.js framwork, sass
-Back-End : Python, Django web framework, MySQL, Bcrypt, pyjwt
-Common : POSTMAN, RESTful API

구현 기능

회원가입 / 로그인 모달창 /내정보(내정보 및 가고싶다(찜기능))모달창

  • 회원가입 시 정규식을 통한 유효성 검사. (소문자, 대문자, 특수문자의 조합)
  • 로그인 이후 토큰 발행, 계정 활성화
  • 로그아웃 시 토큰 삭제, 계정 비활성화
  • 비회원일 경우 회원 권한이 필요한 곳 (리뷰쓰기, 가고싶다 찜기능) 에 접근 시 로그인 유도
  • 로그인 전 : 내 정보 아이콘 클릑 시 로그인과 회원가입 가능한 모달창
  • 로그인 후 : 내 정보 아이콘 클릭 시 유저 정보와 가고싶다(찜기능)목록 중 선택하여 볼 수 있는 모달창

메인페이지

  • 검색바에서 키워드 검색시 검색결과 상단에 검색값 + 맛집 리스트 페이지로 이동.
  • 우측 상당 맛집 리스트 클릭시 상단에 필터리스트 + 맛집 리스트 페이지로 이동.
  • 메인페이지 슬라이드 기능.

맛집 리스트 페이지

  • 키워드(카테고리, 지역명) 필터링.
  • 카테고리에 대한 식당 리스트를 평점순으로 나열.
  • 클릭시 상세 페이지로 이동.
  • 가고싶다(찜) 여부
  • 더보기 기능
  • nav바, footer 레이아웃

상세페이지

  • 해당 식당의 사진들, 상세정보, 리뷰에 따른 별점 , 가고싶다 (찜)여부.
  • 식당에 대한 리뷰 평점순으로 나열, 페이지네이션.
  • 가고싶다(위시리스트) 추가, 삭제
  • 리뷰 생성(별점 부여,텍스트, Img url), 해당 유저가 쓴 리뷰에게만 보이는 수정, 삭제 CRUD

Reference

  • 이 프로젝트는 망고플레이트 사이트를 참조하여 학습목적으로 만들었습니다.
  • 실무수준의 프로젝트이지만 학습용으로 만들었기 때문에 이 코드를 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제될 수 있습니다.
  • 이 프로젝트에서 사용하고 있는 사진 대부분은 위코드에서 구매한 것이므로 해당 프로젝트 외부인이 사용할 수 없습니다.

23-1st-tangoplate-frontend's People

Contributors

201steve avatar minmin9324 avatar saengmotmi avatar tonyk0901 avatar we-dohyeon 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.