Create account

DEV Community

Dibas Dauliya

Posted on Jan 11, 2022 • Updated on Jan 13, 2022

NextJS Ecommerce Website with MongoDB and Tailwind CSS

#atlashackathon #nextjs #tailwindcss #mongodb

Overview of My Submission:

I have built an e-commerce website using NextJS, Tailwind CSS, and MongoDB.

I'd used MongoDB's fundamental functionalities before, but this is my first time working with MongoDB Atlas Search. I had a lot of fun learning it and hope to use it in other projects as well.

You can view, order, track, and delete your products. You can also access the admin page from /admin route and mark the product as a delivered or not.

I have given access of the /admin page to everyone in this demo, but in the production project I would check the email from the getSession hook of next-auth in getServerSideProps. Then, if it is my email, I would give access to the page, otherwise I would redirect to the login page as follows:

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 } }
  }
  ...
}

Submission Category:

This is an e-commerce website.

Link to Code:

dibasdauliya / dm-store

Project for MongoDB Atlas Hackathon on DEV

Next.js + MongoDB + Tailwind CSS

Steps to Run the Website

Run yarn or npm install to install all the dependencies
Copy .env.local.example into .env.local and fill the credentials
Setup MongoDB database
- For the MongoDB Atlas Search, you should create search index in the collection of the database
Run yarn dev or npm run dev to open the website on the browser
Run localhost:3000/api/seed to load the sample data in the database