ecommerce admin nextjs

전자상거래-관리자-nextjs

PlanetScale의 무료 플랜 종료로 인해 데모 웹사이트가 더 이상 작동하지 않습니다.

시작일: 2023년 7월 26 ^일 .

설명

Stripe 통합이 포함된 전자 상거래 관리 대시보드는 전자 상거래 웹사이트의 관리를 간소화하고 향상하도록 설계된 강력한 웹 애플리케이션입니다. Next JS, TypeScript, Tailwind CSS, Shadcn UI, Planet Scale, Prisma, zustand, clerk auth, Cloudinary 및 Stripe과 같은 최첨단 기술을 사용하여 개발된 이 포괄적인 대시보드는 관리자에게 다양한 측면을 감독하고 최적화할 수 있는 강력한 툴킷을 제공합니다. 온라인 상점.

주요 특징

• 관리 대시보드를 통해 웹사이트 관리자는 매장 정보를 생성, 업데이트, 삭제할 수 있습니다.
• 관리자는 웹사이트 홈페이지에 나타나는 광고판이나 배너를 효율적으로 관리할 수 있습니다. 홍보 배너를 업로드, 업데이트 및 제거하여 고객을 유치하고 진행 중인 제안이나 판매를 강조할 수 있습니다.
• 관리 대시보드를 사용하면 제품 카테고리, 크기, 색상을 쉽게 관리할 수 있습니다. 관리자는 카테고리, 사이즈, 색상을 추가, 편집, 삭제할 수 있어 웹사이트에서 제품을 효율적으로 구성하고 표시할 수 있습니다.
• 프런트엔드 웹 애플리케이션과 백엔드 간의 원활한 통신을 가능하게 하기 위해 대시보드에는 API 경로가 통합되어 있습니다. 이를 통해 제품 정보를 원활하게 가져와 고객이 보는 웹사이트에 표시할 수 있습니다.
• 관리 대시보드는 보안 인증을 위해 Clerk 인증을 활용하여 승인된 직원만 민감한 정보에 접근하고 관리할 수 있도록 보장합니다.
• Planet Scale과 Prisma 통합을 통해 애플리케이션은 증가하는 제품 재고를 처리하고 증가하는 웹 사이트 트래픽을 처리할 수 있는 강력하고 확장 가능한 데이터베이스의 이점을 누릴 수 있습니다.
• 모든 전자상거래 웹사이트의 핵심은 제품 관리 기능에 있습니다. 관리 대시보드를 통해 관리자는 새 제품을 추가하고, 기존 제품을 업데이트하고, 품절된 제품을 보관하고, 제품을 추천 제품으로 표시하고, 더 이상 사용할 수 없는 제품을 제거할 수 있습니다. 이름, 카테고리, 가격, 이미지 및 기타 제품별 속성과 같은 제품 세부정보를 설정할 수 있습니다.
• 효율적인 주문 관리는 모든 전자상거래 웹사이트에서 매우 중요합니다. 대시보드는 들어오는 주문을 보고, 처리하고, 관리할 수 있는 포괄적인 도구를 제공합니다.
• Stripe를 결제 게이트웨이로 원활하게 통합하여 고객이 안전하고 편리한 온라인 결제를 할 수 있도록 합니다. 관리자는 거래 내역을 확인하고 쇼핑객을 위한 원활한 결제 환경을 보장할 수 있습니다.

프로젝트 테스트

프로젝트를 테스트하려면 zip 파일을 다운로드하고 원하는 편집기에서 엽니다. 그런 다음 터미널에서 npm install 실행하여 종속성을 설치합니다.

npm install

필수 종속성을 설치한 후 프로젝트 폴더 루트에 .env 파일을 생성해야 합니다. 필수 환경변수는 다음과 같습니다.

 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
DATABASE_URL=
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
STRIPE_API_KEY=
FRONTEND_STORE_URL=
STRIPE_WEBHOOK_SECRET=

Clerk, Planet Scale, Cloudinary 및 Stripe에 대한 공식 문서의 단계에 따라 환경 변수 값을 가져옵니다. 위 단계를 완료한 후 npm run dev 실행하여 프로젝트를 테스트합니다.

npm run dev

모든 문제를 겪고 싶지 않다면 언제든지 이 프로젝트의 데모 웹사이트를 테스트할 수 있습니다.