DEV Community

Arya Narayan Tiwari
Arya Narayan Tiwari

Posted on

Atlas Store - E Commerce web app with Next.js and TailwindCSS

Overview of My Submission

I created an E-Commerce store using Atlas search and Realm functions to make the web app serverless. Atlas search's fuzzy logic is enabled so that even if search term is not completely correct you can still receive result. You can browse, search for product and add the products to cart. Also localStorage is enabled so that even if you close the browser, the items in your cart stay. The website is responsive for smaller screens.

Submission Category: E-Commerce Creation

Link to Code

Atlas Store

Atlas Store is an E-commerce store project for MongoDB Atlas Hackathon on DEV Community. This project is build using Next.js and TailwindCSS for Frontend and MongoDB Atlas for Backend and is hosted on Vercel.

Live Demo: Atlas Store

It uses MongoDB Realm functions and Atlas Search for browsing and searching of products and react-use-cart npm package to handle cart.

License

Apache 2.0




Live Demo

Additional Resources / Info

I'm still learning Next and TailwindCSS and this project was a great learning experience for me as a beginner. Here are some resources that helped me build this project.

1.MongoDB Jumpstart 2021
2.React Use Cart NPM Package
3.freeCodeCamp's Article on Routing in Next.js
4.MongoDB Crash Course

Landing Page

Landing Page

Product Component

Product Page

Atlas Search Implementation

Atlas Search

Cart Functionality

Cart

Top comments (0)