Code Monkey home page Code Monkey logo

lilakchal-server's Introduction

⚖️ 우리동네 경매장 땅땅마켓

small

우리동네 경매장 땅땅마켓에서
여러분들의 중고 물품을 등록해 경매 주최자가 되어보세요!
등록된 물품을 입찰하고 실시간 채팅을 통해 거래할수 있습니다

경매를 통해 원하는 가격으로 중고물품을 거래하세요!

🌸 Lilakchal

프로젝트 멤버를 소개해 드립니다.

팀원 역활
백광호 🏅 Frontend
김유상 🏅 Frontend
임혜림 🏆 Fullstack
이은정 🎖 Backend

Worklog

백광호의 Worklog 📘
  • github 셋팅

    • 이슈 템플릿 추가
    • 라벨 추가
    • 프로젝트 칸반보드 생성
    • 팀 메니지먼트
      • Issues, Pull requests, Upstream, Branch, Marge 관리
    • Readme.MD, Wiki 작성
  • Client 프로젝트 셋팅

    • 프레임워크, 라이브러리 세팅
  • 등록페이지 구현

    • 사진 파일 등록 및 입력받은 데이터 서버로 전달
    • 유효성 검사
    • 레이아웃 구성
    • 디자인 구성
  • 닉네임변경 모달

    • PATCH 요청
    • 레이아웃 구성
    • 디자인 구성
  • 상세아이템 모달

    • 레이아웃 구성
    • 디자인 구성
  • 경매버튼 컴포넌트 구현

    • 유효성 검사 추가
  • footer 컴포넌트 구현

    • 레이아웃 구성
    • 디자인 구성
  • 반응형 페이지 구현

    • footer 컴포넌트 데스크탑, 모바일 반응형 구현
    • 등록 페이지 데스크탑, 모바일 반응형 구현
김유상의 Worklog 📘
  • Header 컴포넌트 구현

    • DegaultGroup과 MyoptionGroup으로 나누어 그인 상태와 페이지 상태에 따른 메뉴 랜더링
    • 레이아웃 구성
    • 디자인 구성
  • SearchcBar 컴포넌트 구현

    • 검색시 키워드와 위치정보에 따라 서버에 검색요청
    • 서버로 부터 받은 응답을 리덕스로 전역으로 상태관리
    • 레이아웃 구성
    • 디자인 구성
  • FilterBtn 컴포넌트 구현

    • 입찰/판매 버튼에 따른 서버 검색 요청
    • 리덕스로 전역에서 응답을 상태로 관리
    • 레이아웃 구성
    • 디자인 구성
  • GoMypage 컴포넌트 구현

    • Mypage로 라우팅
    • Mypage로 이동후 헤더 메뉴 변경
    • 레이아웃 구성
    • 디자인 구성
  • GoSearch 컴포넌트 구현

    • SearchPage로 라우팅
    • SearchPage로 헤더 메뉴 변경
    • 레이아웃 구성
    • 디자인 구성
  • KAKAO OAuth

    • 카카오 API를 이용하여 소셜로그인/로그아웃
    • 로그인후 받은 정보를 서버로 전달
    • 로그인이 성공하면 리덕스로 isLogin상태를 전역상태로 관리
    • isLogin을 true로 변경하고, 로그인 컴포넌트를 로그아웃 컴포넌트로
  • GoRegister 컴포넌트 구현

    • RegisterPage로 라우팅
    • 레이아웃 구성
    • 디자인 구성
  • MyPage 컴포넌트 구성

    • 서버에서 받은 정보를 이용하여 ItemCard를 랜더링하는 Auction컴포넌트 구현하여 랜더링
  • LandingPage 컴포넌트 구현

    • 화면비율에 따른 섹션 구간 길이 i.2배로 구성
    • 스크롤 값 계산 함수 이용하여 스크롤 비율에 따른 애니메이션 구성
    • 서비스 이용전 사용자 편의를 위해 GIF와 이미지를 이용한 설명
    • 레이아웃 구성
    • 디자인 구성
    • PC, 모바일 사이즈 반응형 구현
임혜림의 Worklog 📘

[ BE ]

  • 서버 라우팅 설정

    • 서버 mvc 구조 세팅
  • 실시간 경매/채팅 서버 작성

    • socket.io를 이용한 실시간 이벤트 처리
    • DB 레코드 조회 및 업데이트
  • 이미지 업로드 및 정적 파일 제공

    • multer를 이용하여 클라이언트가 보내준 이미지 데이터 저장
    • 이미지 정적파일 제공
  • 에러로그 파일 기록

    • morgan, winston을 이용한 에러로그 기록

[ FE ]

  • 서치페이지

    • 데스크탑 및 모바일 반응형 UI 구현
    • 실시간 입찰 및 가격 업데이트 구현
  • 채팅페이지

    • 물품별 실시간 채팅 구현
  • 로딩 모달 구현

    • Lottie 파일 사용
  • 헤더

    • 모바일 메뉴 작성
    • 모바일 서치바 고정
  • 위치정보 수집 및 주소변환

    • KaKao 주소 변환 API 사용
  • Client 리덕스 세팅

    • ducks 패턴 구현

[ Deploy ]

  • AWS EC2, ELB를 이용한 https 서버 배포
  • AWS S3, CloudFront를 이용한 https 클라이언트 배포
  • Docker를 이용한 서버 개발/자동빌드환경 구축
  • AWS CodeBuild를 이용한 클라이언트 자동빌드/배포환경 구축
이은정의 Worklog 📘 [ BE ]
  1. MySQL DB구축
  2. 라우팅 구현(유저정보, 검색 등)
  3. sequelize로 DB와 node 연결
  4. 카카오 API 로 소셜로그인 구현

[ FE ]

  1. 무한스크롤 구현
  2. 페이지간 이동시 로딩화면 로직 구현
  3. 채팅페이지 반응형 구현

💾 Tech Stack

Common

  • ESlint
  • Dotenv
  • Axios
  • Socket.io

Front

  • TypeScript
  • SASS(SCSS)
  • Styled-Component
  • React
  • React Hooks
  • React Route Dom
  • React Responsive
  • Redux
  • Typesafe-Action

Back

  • Node.js
  • Express
  • Multer
  • MySQL
  • Sequelize
  • AWS(EC2, ELB, RDS, S3, Route53, CloudFront)
  • Docker

🛠 Architecture

Frontend Flowchart

TTM-Front

Backend Flowchart

TTM-Server TTM-Socket

Project Detail

App View

Landing Page
Loading
Infinite Scroll
Search
Login
Bid Item
Register Item
My Page
Name Change
Chat
Responsive Page
Mobile

WIKI

lilakchal-server's People

Contributors

pangho297 avatar flobeeee avatar imhyelim1209 avatar imhyelim avatar kimyoosang 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.