https://github.com/nathan-somto/smstore
An ecommerce application frontend built with redux, fake store api and react.
https://github.com/nathan-somto/smstore
ecommerce fake-store-api flutterwave-react-v3 fluttterwave framer-motion frontend leafletjs localstorage react react-leaflet react-responsive-carousel react-router-dom redux redux-toolkit tailwindcss typescript vite
Last synced: 3 months ago
JSON representation
An ecommerce application frontend built with redux, fake store api and react.
- Host: GitHub
- URL: https://github.com/nathan-somto/smstore
- Owner: Nathan-Somto
- Created: 2023-05-10T19:49:12.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-26T13:25:54.000Z (almost 2 years ago)
- Last Synced: 2025-01-22T12:48:37.082Z (5 months ago)
- Topics: ecommerce, fake-store-api, flutterwave-react-v3, fluttterwave, framer-motion, frontend, leafletjs, localstorage, react, react-leaflet, react-responsive-carousel, react-router-dom, redux, redux-toolkit, tailwindcss, typescript, vite
- Language: TypeScript
- Homepage: https://fake-store-blond-pi.vercel.app
- Size: 22.6 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SM Store
An Ecommerce Application built with React, Fake store api and Flutterwave SDK for payment integration.
- [Reason for Project](#reason-for-project)
- [Screenshots](#screenshots)
- [Tech Stack](#tech-stack)
- [Getting Started](#getting-started)
- [Prerequisites ](#prerequisites)
- [Installation](#installation)
- [Flutterwave-Test-cards](#flutterwave-test-cards)
- [Contact](#contact)
- [Acknowledgements](#acknowledgements)
## 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
```Javascript
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:
```git
$ 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
- Twitter [nathan-somto](https://www.twitter.com/nathan-somto)
- Linkedin [Mkparu Somtochi Elnathan]()
- Email [[email protected]]()
***Don't forget to leave a ⭐️***