Code Monkey home page Code Monkey logo

23-1st-rushour-frontend's Introduction

Rushour 프로젝트 Front-end/Back-end 소개

  • 영국 천연 코스메틱 사이트 러시 클론 프로젝트
  • 짧은 프로젝트 기간동안 개발에 집중해야 하므로 디자인/기획 부분만 클론했습니다.
  • 개발은 초기 세팅부터 전부 직접 구현했으며, 아래 데모 영상에서 보이는 부분은 모두 백앤드와 연결하여 실제 사용할 수 있는 서비스 수준으로 개발한 것입니다.

개발 인원 및 기간

  • 개발기간 : 2021/08/02 ~ 2021/08/13
  • 개발 인원 : 프론트엔드 4명, 백엔드 2명
  • 백엔드 github 링크

프로젝트 선정이유

  • 다른 커머스 사이트보다는 데이터량이 많지 않아 쉽게 다루기에 적합하기도 했고, 기본적인 커머스 기능들이 있어서 선택하게 되었습니다.
  • 깔끔한 ui와 본질에 치중된 기능들로 클론 프로젝트에 적합하다 생각해서 선택하게 되었습니다.

데모 영상(이미지 클릭)

유투브 영상 링크나 캡쳐 이미지 넣어주세요.

적용 기술 및 구현 기능

적용 기술

  • Front-End : JavaScript, React.JS, React-Router, Sass
  • Back-End : Python, Django web framework, Bcrypt, My SQL
  • Common : AWS(EC2,RDS), RESTful API

구현 기능

공통

  • 일반 회원가입(주소 찾기 API 사용) / 로그인
  • 네비게이션 바 api

메인페이지

  • 캐러셀 모두 각각 api 호출하여 구현
  • 캐러셀 슬라이드 기능 구현
  • 신제품 리스트 필터링으로 api 호출

상품 목록 페이지

  • 상품 리스트 기능 (페이지네이션, 필터링)
  • 카테고리, 서브카테고리 별 설명, 이미지 api

상품 상세 페이지

  • 상품 이미지, 수량, 상세설명 api 구현
  • 장바구니 등록 기능 구현
  • 페이지 내 이동 탭 기능 구현

장바구니

  • 장바구니 목록 호출 api
  • 삭제기능 구현

Reference

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

23-1st-rushour-frontend's People

Contributors

materokatti avatar eoskandlv avatar jw0525 avatar tonyk0901 avatar yeonuk-hwang 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.