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 / nextJS-with-mongoDB
Project for MongoDB Atlas Hackathon on DEV
Next.js + MongoDB + Tailwind CSS
Steps to Run the Website
- Run
yarn
ornpm 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
ornpm run dev
to open the website on the browser - Run
localhost:3000/api/seed
to load the sample data in the database
Link to the website:
Additional Resources / Info:
Screenshots of the website
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 (6)
Nice craft, I am still working on mine in this category.
Thank you so much! Waiting for your submission. 🙂
Hey, you can check it here dev.to/valentinesean22/product-cat...
Thank you so much, Rohit! Yours submission is also too good.
Wow, so clean! Loved it! Planning to release mine soon.
Thank you, Apsara. It means a ton! Best of luck with your submission.