앱이 라이브로 실행 중입니다.
https://nextjs-ecommerce-typescript.vercel.app/
저자
특징
메모
- 관리 대시보드는 복제한 경우에만 액세스할 수 있습니다. 관리 계정에 가입할 수 없습니다. 더미 제품 및 카테고리를 추가했습니다.
다중 사용자 로그인 시스템
- 로그인 / 회원가입 ✔
- 비밀번호 찾기 ✔
- 각 승인된 요청에 대한 JWT 검증 ✔
- 관리자 액세스 및 고객 액세스에 대한 인증 확인 ✔
관리자 패널
- 제품 추가 ✔
- 제품보기 ✔
- 제품 삭제 ✔
- 제품 업데이트 ✔
- 카테고리 추가 ✔
- 카테고리 보기(데이터 테이블) ✔
- 카테고리 업데이트 ✔
- 카테고리 삭제 ✔
- 카테고리 검색 이름으로 ✔
- 카테고리 이름으로 제품 검색 ✔
- 주문 배송 처리 ✔
- 보류 주문 목록 ✔
- 완료된 주문 목록 ✔
고객
- 제품 및 카테고리 보기 ✔
- 특정 카테고리와 관련된 상품 보기 ✔
- breadcamp로 동적 페이지 세부정보 보기 ✔
- 장바구니에 제품 추가 ✔
- 장바구니에서 제품 삭제 ✔
- 장바구니 품목 수량 늘리기 ✔ (제품 재고 수량이 장바구니 수량보다 적으면 해당 제품 수량을 늘릴 수 없습니다)
- 재고 수량을 사용할 수 없는 경우 알림 ✔
- 즐겨찾는 제품을 즐겨찾기에 추가하세요 ✔
- 북마크에서 제품 삭제 ✔
- 제품주문 ✔
- 주문 생성 후 현재 사용자의 장바구니에 제품이 존재하면 삭제됩니다 ✔
- 주문 상태 추적 ✔
- 주문 세부정보 보기 ✔
메모
시간이 지남에 따라 더 많은 기능이 추가될 예정입니다.
기술
- Nextjs 13
- 타이프스크립트
- 순풍 CSS
- Redux 툴킷
- 조이 검증
- 몽고DB
- API를 가져오기 위한 SWR 후크
환경 변수
이 프로젝트를 실행하려면 .env 파일에 다음 환경 변수를 추가해야 합니다.
DB_URI = 귀하의 mongoDB URL
JWT_SECREAT = 사용자 정의 JWT_SECREAT 키
NEXT_PUBLIC_API_BASE_URL = localhost의 기본 URL => http://localhost:3000
설치
npm을 사용하여 my-project 설치
npm install
npm run dev (for development server)
npm run build (for Production)
npm run preview (To View Production Server )
스크린샷
관리 대시보드
관리자 제품 추가
관리자 카테고리 추가
관리자 보기 카테고리
관리자 제품 보기
카테고리 이름으로 관리자 검색 제품
카테고리 이름이 있는 관리자 검색 카테고리
보류 주문 목록
완료된 주문 목록
랜딩 페이지
Dynamic Breadcamp로 특정 카테고리의 제품 보기
Dynamic Breadcamp의 세부 제품 보기
장바구니 페이지
재고가 없는 경우 품목 수량에 대해 알림
좋아하는 제품
즐겨찾는 제품 삭제
상품명으로 즐겨찾는 상품 검색
제품 주문
주문 추적
주문 세부정보 확인
