DEV Community

Nixon Pang
Nixon Pang

Posted on • Updated on

AtlasHackathon: Ecommerce Store (A Web App using Nuxt.js, Express, MongoDB Atlas)

Overview of My Submission

This project is a e-commerce store built using Nuxt.js as front-end, and Express as backend. This project is created to participate in the MongoDB Atlas Hackathon.

Submission Category:

E-commerce Creation

Link to Code

E-commerce Project for MongoDB Atlas Hackathon

This is an e-commerce store where users can search for products and purchase. It is created in order to participate in the MongoDB Atlas Hackathon.

Category


This project is for the "E-commerce Creation" category for the MongoDB Atlas Hackathon.

Directories


This repo stores both the front-end and back-end of the project.

Front-end files are located inside the ./client directory.

Back-end files are located inside the ./src directory.

Technologies Used

  • Front-end

    • Nuxt.js

    • Tailwind

  • Back-end

    • Node.js

    • Express.js

  • Database

    • MongoDB
  • Deployment

    • Vercel (Front-end)

    • Heroku (Back-end)

License

This project is licensed with the Apache-2 permissive license.

More

Feel free to check out my portfolio here




Demo

Technologies Used

  • Nuxt.js, Tailwind
  • Node.js + Express
  • MongoDB Atlas

Additional Resources / Info

I have implemented MongoDB Atlas Search for the Product Search Bar, Product Catalog, and Order Search Bar.

Image description

The Refine Search Section from the screenshot above uses MongoDB Atlas Text Search to search for products with similar names of the query string, as well as displaying products that are within the price range.

Image description

The Search Bar shown above also uses MongoDB Atlas Text Search to search for both product names and categories. As you can see, when searched for "shoes" category, only products from that category were displayed.

Deployment

  • Vercel for front-end hosting
  • Heroku for back-end hosting

Top comments (0)