E-Commerce- A dummy e-commerce site to checkout products and buy them.

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• Select a product from the site
• Navigate through the site to view different products
• Add products to cart
• Checkout products and enter billing details to validate form
• Save cart products so as to remain upon reloading of page
• Make the site responsive

Links

• Solution URL: GitHub Page
• Live Site URL: Otiwerk e-commerce

My process

Built with

• TailwindCSS
• SpinKit Library - Loading animations
• Mobile-first workflow
• React Library
• Redux Toolkit
• Redux Persist
• React Router
• Firebase

What I learned

Managing state using redux toolkit and redux persist to make data persist after reloading. Using react router to collect data forms then sending it as a post request to firebase

Continued development

Build up on my existing knowledge with building more projects.

Useful resources

• SpinKit Library - An amazing resource for a whole lot of loading animations which us very easy to use.
• Nerdcave - A tailwind css cheatsheet that has all available tailwind css property and it's very easy to navigate.
• Redux Toolkit docs
• React Router docs

Author

• Website - Saleem's GitHub
• Twitter - @TheSaleem_

Acknowledgments

Thankful for all the online tutors, docs, Ayush Shakya and Behzad Pashaei figma designs.