Skip to content

An ecommerce application frontend built with redux, fake store api and react.

Notifications You must be signed in to change notification settings

Nathan-Somto/SmStore

Repository files navigation

SM Store

An Ecommerce Application built with React, Fake store api and Flutterwave SDK for payment integration.

Reason for Project

I wanted to learn about managing state in a react application using redux, So i took code with mosh's redux course and finished the redux essentials in the redux docs which introduced me to Redux Toolkit a modern way to write redux logic.

The project was a bit challenging. Considering , i had never worked with redux before.

I also wanted to learn about integrating a payment platform into a react application, initially i tried stripe but for some reason Nigeria is not under the listed countries for stripe, so i decided to use the Flutterwave SDK for React and it turned out good.

some redux code i worte

    export const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    addToCart(state, action: addToCartAction) {
      // gets the new item that is to be added to the cart and increase's it's quantity by 1
      let { quantity } = action.payload;
      quantity = quantity < 1 ? 1 : quantity;
      state.items = [...state.items, { ...action.payload, quantity }];
      // i could have used a push but i wanted to keep it as close to redux as possible.
    },
    emptyCart: (state, _action: emptyCartAction) => {
      state.items = [];
    },
    increaseItemQuantity(state, action: increaseAction) {
      state.items = state.items.map((item) => {
        // find the cart item
        if (item.id === action.payload) {
          return { ...item, quantity: item.quantity + 1 };
        }
        // increase the quantity
        return item;
      });
    },
  }})

Screenshots

Home Page

Product Details Page

Category Page

Cart Page

Checkout Page

About Page

Contact Page

Success Page

Cart

Tech Stack

Front End

Backend

Deployment

Getting Started

The project was built with React, Typescript,vite.

Prerequisites

you will need to ensure that you have node js installed

To check if you have node installed run:

    $ node -v

if you don't have node js installed get it here.

Installation

  • Clone the Repository
    $ git clone https://github.com/nathan-somto/smstore.git
  • Enter into the directory
    $ cd Smstore
  • Install all dependencies
   $ npm install
  • Start the Development Server
    $ npm run dev

Flutterwave Test Cards

Type Card number CVV PIN Expiry OTP
MasterCard PIN authentication 5531886652142950 564 3310 09/32 12345
Visa Card 3DS authentication 4187427415564246 828 3310 09/32 12345

Contact

Don't forget to leave a ⭐️