내 제출물 개요:

NextJS, Tailwind CSS 및 MongoDB를 사용하여 전자 상거래 웹 사이트를 구축했습니다.

이전에 MongoDB의 기본 기능을 사용한 적이 있지만 MongoDB Atlas Search로 작업하는 것은 이번이 처음입니다. 나는 그것을 배우는 것이 매우 즐거웠고 다른 프로젝트에서도 그것을 사용하기를 희망합니다.

제품을 보고, 주문하고, 추적하고, 삭제할 수 있습니다. /admin 경로에서 관리자 페이지에 접속하여 상품을 배송완료로 표시할 수도 있습니다.

이 데모의 모든 사람에게 /admin 페이지에 대한 액세스 권한을 부여했지만 프로덕션 프로젝트에서는 getSession 의 next-auth 후크에서 이메일을 확인합니다. 그런 다음 내 이메일인 경우 해당 페이지에 대한 액세스 권한을 부여하고, 그렇지 않은 경우 다음과 같이 로그인 페이지로 리디렉션합니다.

export async function getServerSideProps(context) {

  const session = await getSession(context)

  if (session?.user) {
    const { email } = session?.user
    if (
      email !== "myemail"
    ) {
      return { redirect: { destination: '/auth/signin', permanent: false } }
    }
  } else {
    return { redirect: { destination: '/auth/signin', permanent: false } }
  }
  ...
}

제출 카테고리:

전자상거래 사이트입니다.

코드 링크:

디바스다우리야 / 디엠스토어

DEV에서 MongoDB Atlas Hackathon을 위한 프로젝트

Next.js + MongoDB + Tailwind CSS

Hosted on Vercel

웹 사이트를 실행하는 단계

getServerSideProps 또는 yarn를 실행하여 모든 종속성을 설치하십시오

.

npm install를 .env.local.example에 복사하고 자격 증명

을 채우십시오.

MongoDB 데이터베이스 설정

MongoDB Atlas Search의 경우 데이터베이스 컬렉션에 검색 인덱스를 생성해야 합니다

.

.env.local 또는 yarn dev를 실행하여 브라우저에서 웹사이트를 엽니다

.

실행npm run dev하여 데이터베이스에 샘플 데이터를 로드합니다

.

#


View on GitHub

웹사이트 링크:

http://dm-store.vercel.app/

추가 리소스/정보:

웹사이트의 스크린샷

유튜브 비디오

말하는 연습을 더 해야겠어요. 😂

업데이트: localhost:3000/api/seed 을 사용하여 로그인/로그아웃 기능도 추가했습니다.

정말 고마워!