Skip to content

Latest commit

 

History

History
37 lines (25 loc) · 1.91 KB

README.md

File metadata and controls

37 lines (25 loc) · 1.91 KB

Fully functional general e-commerce WebApp

Techs used: Vue3, Nuxt3, Pinia, Supabase, Sanity, Formkit, VueUse, Aos.

  • [Vue3 & Nuxt3] as building blocks.
  • [Pinia] to maintain cart state on client side, to share fetched products & some globally needed boolean values across components.
  • [Supabase] to save cart/user data, and to build auth/oauth.
  • [sanity] as a headless cms to build and maintain products-api by using a user-friendly gui which sanity provides us.
  • [Formkit] to build easily maintainable forms.
  • [VueUse-IntersectionObserver] to implement infinite scroll.
  • [Aos] to build scroll reveal animations.
  • [Prisma] to manage database with ease.

The Sanity Headless Cms:

  • Products api can be maintained from a no-code, user-friendly headless frustructure by the shop owner. A view from the ui of the Sanity CMS:

UI of the Sanity

Shop UI:

UI of the Shop

  • After choosing an item from shop, page will lead the user to that item's page:

UI of the Product

  • If the user is logged in and wants to add an item to the cart, it will be added to his/her cart, and all of this will be happening in an SQL database.
  • The cart UI can be seen at the bottom:

UI of the Cart

What would i do next?

  • I would handle buyouts with Stripe api or using similar on Nuxt server routes if it was a real world e-commerce.
  • Could make "add to fav" button functional.
  • Could add product variant categories (color, size) to the Sanity cms.