Full Stack E-Commerce Clothing Website
This project is a full stack e-commerce website built with Next js. I created this project as an exercise to develop my web development skills, especially to learn about Next js.
- Build out the project to the designs provided
- Implementing cart functionality
- Connecting to Sanity as back end database for e-commerce
- Connecting Stripe APIs to power online payment processing for e-commerce
The live site is deployed in vercel, but it seems that vercel can’t render swiper js. In the meantime i’m still trying to find a solution
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- Next JS – React Framework for Production
- Sanity – Sanity is a customizable solution that treats content as data to power digital business.
- Stripe – APIs to power online payment processing for e-commerce
- react-hot-toast – react library that adds beautiful notifications to our react application.
- react icons – JS library to add icons
- swiper js – JS library to add slider component
- canvas-confetti – Lightweight JS plugin to create a confetti celebration explosion effect. It draws confetti graphics on the HTML canvas element.
What I learned
The development of this project can be continued by adding a search filter functionality, an e-commerce newsletter, activate the slider function for product section in homepage. In the near future, I’m going to explore react js search filters and maybe add that functionality myself.
- UI/UX Design Resources – This website provide many UI/UX design, some are even free.
- Swiper React Components
- Customize Prev/Next Button of Swiper Arrows
- Github – Shabrina Putri
To run the development server:
npm run dev