ecommerce website shopfinity

Shopfinity

최신 기술로 구축된 고급 전자상거래 애플리케이션인 Shopfinity 에 오신 것을 환영합니다. Shopfinity는 사용자 인증, 제품 관리, 결제 처리 및 직관적인 관리 대시보드를 포함하여 온라인 쇼핑을 위한 포괄적인 솔루션을 제공합니다.

특징

• Next.js 14 : 빠르고 SEO 친화적이며 서버 측 렌더링 웹 애플리케이션을 위해 Next.js의 최신 앱 라우터와 기능을 활용합니다.
• MongoDB : 효율적인 데이터 저장 및 검색을 위한 NoSQL 데이터베이스입니다.
• Auth.js(Next-Auth) : 안전하고 확장 가능한 인증 솔루션입니다.
• Stripe : 거래 처리를 위한 통합 결제 게이트웨이입니다.
• 관리 대시보드 : 제품, 주문, 사용자를 원활하게 관리합니다.
• 반응형 디자인 : 모든 기기에서 뛰어난 사용자 경험을 보장합니다.
• 배송주소 수집 : 배송정보를 간편하게 수집하고 관리하세요.
• Tailwind CSS : 효율적이고 사용자 정의 가능한 스타일을 위한 것입니다.

시작하기

전제 조건

• Node.js(v14.x 이상)
• npm(v6.x 이상) 또는 Yarn(v1.x 이상)
• 몽고DB 인스턴스
• 스트라이프 계정 및 API 키

설치

1. 저장소 복제

   git clone https://github.com/yourusername/shopfinity.git
   cd shopfinity

2. 종속성 설치

   npm install
   # or
   yarn install

3. 환경 변수

   루트 디렉터리에 .env.local 파일을 만들고 다음 환경 변수를 추가합니다.

    MONGODB_URI=your_mongodb_connection_string
   AUTH_SECRET=your_auth_secret
   AUTH_GITHUB_ID=your_github_client_id
   AUTH_GITHUB_SECRET=your_github_client_secret
   AUTH_GOOGLE_ID=your_google_client_id
   AUTH_GOOGLE_SECRET=your_google_client_secret
   NEXT_STRIPE_SECRET_KEY=your_stripe_secret_key
   NEXT_STRIPE_PUBLIC_KEY=your_stripe_public_key
   STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret
   RESEND_API_KEY=your_resend_api_key
   NEXT_ADMIN_EMAIL=your_admin_email
   AUTH_TRUST_HOST=true
   

4. 개발 서버 실행

   npm run dev
   # or
   yarn dev

   브라우저에서 http://localhost:3000을 열어 결과를 확인하세요.

프로젝트 구조

• /app : 모든 경로가 포함되어 있습니다.
• /comComponents : 재사용 가능한 React 구성 요소.
• /lib : MongoDB, Stripe 및 인증을 위한 구성입니다.
• /lib/models : MongoDB용 몽구스 모델.
• /utils : 유틸리티 기능.

용법

입증

• 사용자는 이메일이나 제3자 제공업체(Google, GitHub 등)를 사용하여 가입하고 로그인할 수 있습니다.
• 인증된 사용자는 자신의 프로필, 주문 내역 등에 액세스할 수 있습니다.

관리 대시보드

• 관리자 권한이 있는 사용자만 액세스할 수 있습니다.
• 제품 관리: 제품을 추가, 편집, 삭제합니다.
• 주문 관리: 주문 세부정보를 확인하고 주문 상태를 업데이트합니다.
• 사용자 관리: 사용자 정보를 보고 관리자 역할을 할당합니다.

결제

• 안전한 결제 처리를 위해 Stripe과 통합되었습니다.
• 사용자는 장바구니에 상품을 추가하고 결제를 진행할 수 있습니다.
• 결제 시 배송 주소를 수집합니다.

순풍 CSS

• Tailwind CSS는 스타일 지정에 사용됩니다. tailwind.config.js 파일을 편집하고 styles/globals.css 파일에 사용자 정의 CSS 클래스를 추가하여 스타일을 사용자 정의할 수 있습니다.

기여

우리는 기여를 환영합니다! 기여하려면 다음 단계를 따르세요.

1. 저장소를 포크하십시오.
2. 새 분기를 만듭니다( git checkout -b feature/your-feature ).
3. 원하는 대로 변경하세요.
4. 변경 사항을 커밋합니다( git commit -am 'Add new feature' ).
5. 브랜치로 푸시합니다( git push origin feature/your-feature ).
6. 새로운 Pull Request를 생성하세요.

특허

이 프로젝트는 MIT 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.

감사의 말

• Next.js
• 몽고DB
• Auth.js(다음 인증)
• 줄무늬
• 순풍 CSS

---

라이브 데모

여기에서 Shopfinity의 라이브 데모를 확인하세요.

프로젝트의 특정 요구 사항에 따라 이 README.md 파일을 자유롭게 사용자 정의하세요. Shopfinity로 건물을 즐겨보세요!