DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for NextJS Ecommerce Website with MongoDB and Tailwind CSS
Dibas Dauliya
Dibas Dauliya

Posted on • Updated on

NextJS Ecommerce Website with MongoDB and Tailwind CSS

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 } }
  }
  ...
}
Enter fullscreen mode Exit fullscreen mode

Submission Category:

This is an e-commerce website.

Link to Code:

GitHub logo 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

#AronSwartz❀️

Link to the website:

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

Additional Resources / Info:

Screenshots of the website

Home Page

User and Admin Page

Search and Product Page

YouTube Video

I need to practice speaking more. πŸ˜…

Update: I have also added log in/log out functionality using next-auth.

Thank you so very much!

Top comments (7)

Collapse
 
valentinesean22 profile image
valentinesean

Nice craft, I am still working on mine in this category.

Collapse
 
dibasdauliya profile image
Dibas Dauliya Author

Thank you so much! Waiting for your submission. πŸ™‚

Collapse
 
valentinesean22 profile image
valentinesean

Hey, you can check it here dev.to/valentinesean22/product-cat...

Collapse
 
rohitdhas profile image
Rohit Dhas

Your submission is too good! Keep it up❀

Collapse
 
dibasdauliya profile image
Dibas Dauliya Author

Thank you so much, Rohit! Yours submission is also too good.

Collapse
 
apsara profile image
Apsara Godar

Wow, so clean! Loved it! Planning to release mine soon.

Collapse
 
dibasdauliya profile image
Dibas Dauliya Author

Thank you, Apsara. It means a ton! Best of luck with your submission.

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.