OneStopShop

Onestopshop

경고이 앱은 진행중인 작업이며 생산 준비로 간주되어서는 안됩니다. 서버 작업 및 이슬비 ORM과 같이 아직 안정적이지 않은 새로운 기술을 사용합니다.

에 대한

Online Marketplace Next.js 앱 라우터를 사용하여 구축 된 온라인 마켓 플레이스는 사용자가 제품을 구매하고 가입하고 자체 제품을 판매 할 수 있습니다. 사용자는 판매자 프로필을 만들고 제품을 관리하며 결제를 수집 할 수 있습니다.

주요 기능 :

• React Server 구성 요소가 장착 된 Next.js 앱 라우터
• 제품의 퀵 뷰 및 관리자의 신제품 생성을위한 가로 채기 경로 (병렬 라우팅 포함)
• 돌연변이에 대한 서버 작업
• Drizzle ORM이있는 PlanetScale MySQL 데이터베이스
• typeafe 파일 업로드에 대한 업로드 (예 : 제품 이미지)
• 서기와의 사용자 인증
• 마켓 플레이스 지불을위한 Stripe Connect 통합 (플랫폼 수수료 및 판매자 지불금 포함)

데모

결제 경험을 시연하려면 4242 4242 4242 4242 와 같은 테스트 카드 번호로 체크 아웃하고 CVC에 대한 미래 날짜 및 3 자리 숫자를 사용하십시오. 상점에 연결된 스트라이프 계정 (예 : Tim 's Toys)이있는 판매자의 제품으로 만 체크 아웃 할 수 있습니다. 또한 자신의 판매자 계정을 만들어 전체 경험을 위해 스트라이프에 연결할 수 있습니다.

홈페이지

관리자 제품 페이지 편집기

앱 실행

아래 단계를 따라 로컬에서 앱을 실행하십시오.

1. MySQL 데이터베이스를 만듭니다.
2. .env.example 파일에 따라 변수가있는 로컬 .env 파일을 만듭니다.
3. npm install 실행하십시오.
4. npx drizzle-kit generate:mysql 로 마이그레이션을 생성합니다. 이로 인해 데이터베이스 테이블을 생성하기위한 SQL 쿼리가 포함 된 루트에 migrations-folder 라는 새 폴더가 생성됩니다. 마이그레이션은 db.ts 의 마이그레이션 함수를 통해 데이터베이스와 자동으로 동기화됩니다. 또는 PlanetScale 콘솔을 통해 수동으로 마이그레이션에서 생성 된 SQL 쿼리를 실행하고 db.ts 에서 마이그레이션 기능을 제거 할 수 있습니다.
5. npm run dev 실행하여 개발 모드에서 앱을 엽니 다.

그게 다야. 이제 http://localhost:3000 에서 앱에 액세스 할 수 있어야합니다.

메모

• 이슬비로 처음으로 마이그레이션을 생성 할 때 루트의 migrations-folder 비어 있거나 존재하지 않도록하십시오.

스토리 북

그러나이 앱에 스토리 북이 추가되었지만 앱의 초기 생성 이후 적극적으로 작동하지 않았습니다. 그럼에도 불구하고 다음 명령을 사용하여 실행할 수 있습니다.

1. 테일 윈드 빌드 스크립트를 실행하여 테일 윈드 클래스 용 출력 파일을 만듭니다 (실행 및 완료된 후에는 자동으로 중지되지 않으면 프로세스를 중지하려면 터미널 (예 : ctrl + c )을 '킬'해야 할 수도 있습니다).

   명령 : npm run tailwind

2. 실행 스토리 북 (이것은 이전 단계에서 생성 된 테일 윈드 출력 파일을 사용하고 http://localhost:6006 에서 실행됩니다).

   명령 : npm run storybook

문제 해결

PlanetScale에 존재하지 않는 테이블과 관련된 오류가 표시되면 (데이터베이스의 첫 번째 사용이기 때문에 app/(storefront)/(main)/page.tsx 에 던져 질 가능성이 있음)는 데이터베이스가 동기화되지 않기 때문입니다. 위의 '앱 실행'단계를 다시 방문하고 PlanetScale의 'Insights'탭을 확인하여 테이블 생성 쿼리가 실행되었는지 확인하십시오.

기여

새로운 기능/수정에 대한 문제와 PR을 자유롭게 만들 수 있습니다.