An Ecommerce Application built with React, Fake store api and Flutterwave SDK for payment integration.
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
| 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 |
- Twitter nathan-somto
- Linkedin Mkparu Somtochi Elnathan
- Email [email protected]
Don't forget to leave a ⭐️