케이크 배달 웹 사이트
소개
Cake Delivery 앱은 Backend, Web API, 데이터베이스 관리 용 SQL 및 Frontend 용 React를 사용하여 구축 된 풀 스택 웹 애플리케이션입니다. 이 앱을 통해 고객은 케이크 카탈로그를 탐색하고 주문을 사용자 정의하며 자동화 된 위치 감지로 안전한 주문을 할 수 있습니다. 이 시스템에는 케이크, 카테고리, 고객 및 사용자를 관리하기위한 관리자 패널이 포함되어 있으며 고객 및 관리자 모두에게 원활한 경험을 제공합니다.
특징
고객 앱
케이크 카탈로그
고객은 카테고리별로 구성된 광범위한 케이크를 탐색하여 완벽한 케이크를 쉽게 찾을 수 있습니다.
주문 사용자 정의
고객은 특정 케이크 크기와 수량을 선택하여 주문을 개인화 한 다음,이 맞춤형 케이크를 쇼핑 카트에 추가하여 체크 아웃하기 전에 쉽게 관리 할 수 있습니다.
위치 자동 감지
Leaflet React Integration을 사용하면 앱은 체크 아웃 중 고객 위치를 자동으로 감지하여 수동으로 주소를 입력 할 필요가 없으며 특히 모바일 사용자에게 유용합니다.
안전한 체크 아웃
체크 아웃 프로세스는 필수 고객 연락처 정보, 지불 정보를 모으고 자동 변속 전달 주소를 확인하여 원활하고 안전한 주문 경험을 보장합니다.
피드백 시스템
주문을 완료 한 후 고객은 자신의 경험에 대한 피드백을 남기도록 초대됩니다. 이 리뷰는 홈페이지에 표시되므로 새로운 방문객은 다른 고객의 실제 평가를 볼 수 있습니다.
동적 홈페이지
- 최근에 추가 된 케이크 : 카탈로그에 최신 추가 기능을 강조하여 고객이 신선한 옵션을 반환하고 탐색하도록 장려합니다.
- 고객 피드백 및 평가 : 고객의 실제 피드백을 표시하고 신뢰성을 추가하고 신규 사용자가 정보에 입각 한 결정을 내릴 수 있도록 도와줍니다.
- 연락처 정보 : 필수 연락처 세부 정보가 눈에 띄게 표시되어 고객이 질문이나 특별 요청을 쉽게 할 수 있습니다.
관리자 패널
- 관리자 로그인 페이지는 관리자 패널에 안전한 로그인 액세스를 제공하여 공인 사용자 만 앱의 데이터 및 기능을 관리 할 수 있도록합니다.
- 대시 보드 개요 관리자 대시 보드는 일주일 동안의 빠른 판매 요약을 제공하여 관리자가 비즈니스 성능 지표를 한눈에보고, 트렌드를 식별하며 데이터 중심 결정을 내릴 수 있습니다.
- 케이크 관리 전용 케이크 페이지는 관리자에게 카탈로그에서 케이크를보고, 추가, 업데이트 또는 제거 할 수있는 능력을 제공합니다. 재고 수량 제어 : 관리자는 고객의 정확한 가용성을 보장하기 위해 각 케이크의 양을 재고로 조정할 수 있습니다.
- 카테고리 관리 카테고리 페이지는 케이크를 분류 (예 : 생일, 기념일, 잡초)로 구성하여 고객이 쉽게 탐색 할 수 있습니다. 관리자는 새로운 카테고리를 추가하거나 기존 카테고리를 편집하거나 오래된 범주를 삭제할 수 있습니다.
- 고객 관리 관리자는 주문을 한 고객 목록에 액세스하여 고객 행동에 대한 통찰력을 제공하고 계정 별 문의 또는 문제를 해결할 수 있습니다.
- 사용자 관리 관리자는 추가 직원을위한 새로운 사용자 계정을 만들고, 기존 사용자 정보를 관리하며, 필요할 때 이메일 주소를 업데이트하거나 비밀번호를 재설정하여 원활하고 안전한 시스템 운영을 보장 할 수 있습니다.
사용 된 기술
데이터 베이스
- 데이터베이스 : ado.net이있는 Microsoft SQL Server.
프론트 엔드
- 빌드 도구 : 효율적인 프로젝트 구축을위한 Vite.
- React Query : 원격 상태 관리 및 데이터 가져 오기.
- UI 상태 관리를위한 컨텍스트 API.
- 반응 라우터 : 라우팅을 구현하려면.
- Tailwindcss : 스타일링 용.
- 양식 관리를위한 후크 양식을 반응합니다.
- Recharts : 통계를 보여줄 차트를위한 라이브러리.
- React-Hot-toast : 토스트 알림의 경우.
- 반응 아이콘 : UI 아이콘의 경우.
백엔드
컨트롤러 :
- 자원에 대한 HTTP 요청을 구성하고 처리합니다 (예 : 케이크, 주문).
- HTTP 방법을 통해 CRUD 작업을 정의하십시오 (Get, Post, Put, Delete).
모델/DTOS :
- 클라이언트-서버 데이터 전송을 간소화하기 위해 데이터 구조를 정의합니다.
HTTP 방법 :
- GET : 자원 검색 (예 : 케이크 목록).
- 게시물 : 새 리소스 생성 (예 : 주문 제출).
- PIT : 기존 리소스를 업데이트하십시오 (예 : 케이크 세부 정보 수정).
- 삭제 : 자원을 제거합니다 (예 : 케이크 삭제).
상태 코드 :
- 200 OK : 성공적인 데이터 검색/업데이트.
- 201 생성 : 자원 생성 성공.
- 204 콘텐츠 없음 : 자원이 성공적으로 삭제되었습니다.
- 400 불량 요청 : 유효하지 않은 데이터가 수신되었습니다.
- 404 찾기 : 자원이 존재하지 않습니다.
확인:
- 들어오는 데이터가 정확하고 안전한 지 확인합니다.
- 모델 속성 및 사용자 정의 로직 시행 데이터 요구 사항.
라이브 데모
나를 클릭하세요!
