Auction Website
1.0.0
경매 포인트는 사용자가 품목을 사고 팔 수있는 웹 사이트입니다. 이 풀 스택 프로젝트의 목표는 eBay와 유사한 온라인 경매 플랫폼의 설계 및 개발이었습니다. 구현은 REST-API 아키텍처를 따르고 일부 주요 기능은 다음과 같습니다.
JavaScript 스택은 백엔드 용 Express 및 Node.js , 데이터베이스의 MySQL 및 프론트 엔드에 반응하는 보다 쉽고 빠른 배포에 사용되었습니다. 데이터 모델링, 연결 및 쿼리는 속편을 사용하여 객체 관계 매핑으로 처리되기 때문에 다른 관계형 데이터베이스를 사용할 수도 있습니다.
백엔드 MySQL 또는 유사한 관계형 데이터베이스와 Node.js 및 NPM의 설치가 필요합니다.
config.json 파일에 개인 MySQL 설정을 추가하십시오.
API 폴더 실행 : npm install 에서 Express, Cors 및 기타 필요한 모듈을 설치하려면
속편 sequelize init 데이터베이스에 연결하려면 명령을 실행합니다.
트랜잭션은 SSL/TLS 프로토콜을 통해 암호화됩니다. 로컬로 인증서를 만들려면 mkcert 사용한 다음 경로를 추가 할 수 있습니다.
const sslServer = https . createServer ( {
key : fs . readFileSync ( '/yourpath/key.pem' ) ,
cert : fs . readFileSync ( '/yourpath/cert.pem' )
} , app ) ;서버를 시작하려면 단순히 API 디렉토리에서 실행됩니다.
npm start
프론트 엔드의 경우 필요한 모든 종속성은 package.json 파일에 정의됩니다. 설치하려면 단순히 프론트 디렉토리에서 실행됩니다 : npm install
프론트 디렉토리 실행에서 프론트 엔드를 시작하려면 :
npm start
응용 프로그램의 설계를 위해 순수한 CSS와 몇 가지 재료 UI 구성 요소를 사용했습니다. 편집 페이지뿐만 아니라 페이지 전환을 위해 몇 가지 애니메이션이 추가되었습니다. 타이틀과 주요 요소의 경우 간단하고 시대를 초월한 서체 인 Futura를 사용했으며 신체와 세부 사항에는 Roboto 및 기타 유사한 Sans-Serif 글꼴을 사용했습니다.
이 사이트의 환영 페이지는 새 방문객이 사이트에 입장하는 데 관심이있는 것을 목표로하는 다소 간단합니다. 로그인 버튼과 제공된 서비스에 대한 간단한 요약 만 있으므로 정보가 압도되지 않습니다.
경매 페이지에서 사용자는 카테고리, 검색 또는 필터별로 목록을 탐색 할 수 있습니다. 이 카테고리는 계층 구조를 가지고 있으며, 이는 MySQL에서 자체 참조 외부 키를 사용하고 필요할 때 프론트 엔드와 백엔드에 재귀 적으로 트리를 구축하여 달성되었습니다.
경매 페이지에는 항목의 모든 세부 사항이 있으며 구매자 또는 판매자가이를보고있는 경우에 따라 다른 옵션이 제공됩니다. 사진은 회전 목마에 표시되며 사진 업로드의 경우 백엔드에서 멀터 API를 사용했습니다. OpenStreetMap 및 Leaflet을 사용한 위치를 표시합니다. 사용자는 핀을 떨어 뜨리거나 검색하여 정확한 위치를 추가 할 수 있습니다. 위의 스크린 샷에서 볼 수 있듯이 맵을위한 폴라로이드와 같은 컨테이너를 디자인했으며, 좌표는 DMS 형식으로 표시됩니다.
등록 필드와 웹 사이트의 다른 형식의 경우 YUP를 사용하여 Formik 라이브러리와 함께 스키마 검증을 수행했습니다. 사용자의 암호는 Blowfish Cipher를 기반으로하는 Bcrypt 기능을 사용하여 해시 된 데이터베이스에 저장됩니다.
프로필 페이지에서 구매자는 판매자의 사용 가능한 모든 항목을 볼 수 있습니다. 각 사용자마다 유사한 대시 보드 페이지가 제공되며, 여기서 항목도 권장합니다. 권장 시스템은 매트릭스 인자 화 알고리즘을 사용하는 반면, 사용자가 경매를 방문하거나 입찰하는 동안 데이터를 수집합니다.
받은 편지함, 우출통 및 새 메시지를 보내는 기능 외에도 메일 클라이언트에는 메시징 인터페이스도 있습니다. 메시지 외에도 구매자는 품목이 도착했을 때 판매자를 평가할 수 있으며 판매자는 각각 지불을 완료했을 때 구매자를 평가할 수 있습니다.
관리자가 로그인하면 Ebay DTD 템플릿에 따라 XML, JSON 또는 CSV 형식으로 경매 세부 정보를 내보낼 수있을뿐만 아니라 사용자 애플리케이션을 승인 할 수 있습니다. 또한 데이터베이스를 채우고 추천 알고리즘을 훈련시키기 위해 eBay 웹 사이트의 실제 데이터를 UCLA에서 제공하는 XML 형식으로 사용했습니다.
이 웹 사이트는 Express, Node.js, MySQL, 속편 및 반응을 사용하여 구축되었습니다.
