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

• Reason for Project
  • Screenshots
  • Tech Stack
• Getting Started
  • Prerequisites
  • Installation
  • Flutterwave-Test-cards
• Contact
• Acknowledgements

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;
      });
    },
  }})

The project was built with React, Typescript,vite.

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.

• 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

• Twitter nathan-somto
• Linkedin Mkparu Somtochi Elnathan
• Email [email protected]

Don't forget to leave a ⭐️