WB Shop

WB Shop

WB shop is a mock e-commerce store built with Next.js, TypeScript and Redux. Product data is fetched from the 'Fake Store API'

Next.js TypeScript Redux Firebase
Visit Website

Project Background

Users can add products to the cart, delete them and change their quantity. The subtotal will be reflected based on the price of an item and its quantity in the basket.

Users need to authenticate themselves before they can go to a checkout page. If a user is not signed in and clicks on the checkout button, they will be re-directed to the sign-in page instead. Of course, there's no need to be authenticated to add items to the cart.

Products are pulled in from the 'FakeStore API'. Every product has its own 'product page' where users can read the full-length description (the descriptions on the main product cards are truncated).

The state is managed with Redux. In order to avoid the loss of cart items during a refresh, the cart's contents are also stored in the local storage. Lodash's throttle method is used to 'throttle' invoking Storage.setItem().

Firebase is used to authenticate users. Only sign up with e-mail and password is available as for now.

The UI is made presentable with the help of Ant Design library.

Static Previews


Previous Project

Todo App

Next Project

Interested in doing a project together?

Contact Me