J

The challenge

  • 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

Screenshot

Design overview for Dine Market e-commerce For now the search bar is only for styling purposes and doesn't work properly yet

Credit

Figma Web Design & UI kit i used for this project is design by Weird Design Studio

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • 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

I learned how to connect stripe as payment gate for e-commerce. Full code for connecting to stripe in /pages/api/stripe.js payment with stripe

The confetti effect is implemented on the payment success page after the user successfully checkouts their cart payment success

Continued development

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.

Useful resources

Acknowledgments

A HUGE Thanks to Javascript Mastery youtube channel which really helps me in learning about web development. I recommend this channel to everyone who wants to learn about web development and javascript

Getting Started

To run the development server:

Copied!
npm run dev

 



M. Mudassar
M. Mudassar
Sr. Software Engineer

As a software engineer, I take great pride in my ability to innovate and create efficient solutions. The satisfaction of seeing my code come to life and delivering products that exceed expectations is what drives me. I'm constantly learning and expanding my skill set to stay up-to-date with the latest trends and technologies. Collaboration is key in the software development process, and I thrive in diverse teams. Whether it's debugging existing code or developing new applications, I approach each project with enthusiasm and dedication, always striving to learn and improve.