{"id":21328334,"url":"https://github.com/nathan-somto/smstore","last_synced_at":"2026-04-09T18:42:20.259Z","repository":{"id":166030804,"uuid":"639116605","full_name":"Nathan-Somto/SmStore","owner":"Nathan-Somto","description":"An ecommerce application frontend built with redux, fake store api and react.","archived":false,"fork":false,"pushed_at":"2023-08-26T13:25:54.000Z","size":23646,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-16T00:16:58.542Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://fake-store-blond-pi.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Nathan-Somto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-05-10T19:49:12.000Z","updated_at":"2024-12-07T21:58:27.000Z","dependencies_parsed_at":"2023-08-26T14:52:30.552Z","dependency_job_id":null,"html_url":"https://github.com/Nathan-Somto/SmStore","commit_stats":null,"previous_names":["nathan-somto/smstore"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Nathan-Somto/SmStore","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nathan-Somto%2FSmStore","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nathan-Somto%2FSmStore/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nathan-Somto%2FSmStore/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nathan-Somto%2FSmStore/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nathan-Somto","download_url":"https://codeload.github.com/Nathan-Somto/SmStore/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nathan-Somto%2FSmStore/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271441845,"owners_count":24760349,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-21T02:00:08.990Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-11-21T21:26:46.647Z","updated_at":"2026-04-09T18:42:15.225Z","avatar_url":"https://github.com/Nathan-Somto.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# SM Store\n\nAn Ecommerce  Application built with React, Fake store api and Flutterwave SDK for payment integration.\n\n\n\n![](https://img.shields.io/github/issues/nathan-somto/fakestore?style=for-the-badge)\n![](https://img.shields.io/badge/Maintained-Yes-lemon?style=for-the-badge)\n![](https://img.shields.io/github/forks/nathan-somto/fakestore?style=for-the-badge)\n![](https://img.shields.io/github/stars/nathan-somto/fakestore?style=for-the-badge)\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://fake-store-blond-pi.vercel.app/\"\u003eView Demo\u003c/a\u003e\n  \u003cspan\u003e · \u003c/span\u003e\n    \u003ca href=\"https://github.com/Nathan-Somto/FakeStore/blob/main/README.md\"\u003eDocumentation\u003c/a\u003e\n  \u003cspan\u003e · \u003c/span\u003e\n    \u003ca href=\"https://github.com/Nathan-Somto/FakeStore/issues\"\u003eReport Bug\u003c/a\u003e\n  \u003cspan\u003e · \u003c/span\u003e\n    \u003ca href=\"https://github.com/Nathan-Somto/FakeStore/pulls\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/div\u003e\n\n\n- [Reason for Project](#reason-for-project)\n  - [Screenshots](#screenshots)\n  - [Tech Stack](#tech-stack)\n- [Getting Started](#getting-started)\n  -  [Prerequisites ](#prerequisites)\n  - [Installation](#installation)\n  - [Flutterwave-Test-cards](#flutterwave-test-cards)\n- [Contact](#contact)\n- [Acknowledgements](#acknowledgements)\n\n## Reason for Project\nI 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.\n\nThe project was a bit challenging. \nConsidering , i had never worked with redux before.\n\nI 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.\n\nsome redux code i worte\n```Javascript\n    export const cartSlice = createSlice({\n  name: \"cart\",\n  initialState,\n  reducers: {\n    addToCart(state, action: addToCartAction) {\n      // gets the new item that is to be added to the cart and increase's it's quantity by 1\n      let { quantity } = action.payload;\n      quantity = quantity \u003c 1 ? 1 : quantity;\n      state.items = [...state.items, { ...action.payload, quantity }];\n      // i could have used a push but i wanted to keep it as close to redux as possible.\n    },\n    emptyCart: (state, _action: emptyCartAction) =\u003e {\n      state.items = [];\n    },\n    increaseItemQuantity(state, action: increaseAction) {\n      state.items = state.items.map((item) =\u003e {\n        // find the cart item\n        if (item.id === action.payload) {\n          return { ...item, quantity: item.quantity + 1 };\n        }\n        // increase the quantity\n        return item;\n      });\n    },\n  }})\n```\n## Screenshots\n### Home Page\n\n![](./screenshots/fakestore_homepage.png)\n\n### Product Details Page\n\n![](./screenshots/fakestore_product_details_page.png)\n\n### Category Page\n\n![](./screenshots/fakestore_categories_page.png)\n\n### Cart Page\n\n![](./screenshots/fakestore_cart_page.png)\n\n### Checkout Page\n\n![](./screenshots/fakestore_checkout_page.png)\n\n### About Page\n\n![](./screenshots/fakestore_about_page.png)\n\n### Contact Page\n\n![](./screenshots/fakestore_contact_page.png)\n\n### Success Page\n![](./screenshots/fakestore_success.png)\n\n### Cart\n![](./screenshots/fakestore_cart.png)\n## Tech Stack\n\n### Front End\n\n![](https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB)\n![](https://img.shields.io/badge/Redux-593D88?style=for-the-badge\u0026logo=redux\u0026logoColor=white)\n![](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white)\n![](https://img.shields.io/badge/Vite-B73BFE?style=for-the-badge\u0026logo=vite\u0026logoColor=FFD62E)\n![](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge\u0026logo=react-router\u0026logoColor=white)\n![](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)\n\n### Backend\n\n![](https://img.shields.io/badge/FlutterWave-d5d549?style=for-the-badge\u0026logo=flutterwave\u0026logoColor=yellow)\n\n\n### Deployment\n![](https://img.shields.io/badge/Vercel-000000?style=for-the-badge\u0026logo=vercel\u0026logoColor=white)\n\n## Getting Started\n The project was built with React, Typescript,vite.\n\n### Prerequisites \n you will need to ensure that you have node js installed\n\nTo check if you have node installed run:\n\n```git \n    $ node -v\n```\n\nif you don't have node js installed get it here.\n\n### Installation\n\n- [ ] Clone the Repository  \n\n```\n    $ git clone https://github.com/nathan-somto/smstore.git\n```\n\n- [ ] Enter into the directory\n\n```\n    $ cd Smstore\n```\n\n- [ ] Install all dependencies\n\n```\n   $ npm install\n```\n\n- [ ]  Start the Development Server\n\n```\n    $ npm run dev\n```\n## Flutterwave Test Cards\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eCard number\u003c/th\u003e\n    \u003cth\u003eCVV\u003c/th\u003e\n    \u003cth\u003ePIN\u003c/th\u003e\n    \u003cth\u003eExpiry\u003c/th\u003e\n    \u003cth\u003eOTP\u003c/th\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003eMasterCard PIN authentication\u003c/td\u003e\n    \u003ctd\u003e5531886652142950\u003c/td\u003e\n    \u003ctd\u003e564\u003c/td\u003e\n    \u003ctd\u003e3310\u003c/td\u003e\n    \u003ctd\u003e09/32\u003c/td\u003e\n    \u003ctd\u003e12345\u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003eVisa Card 3DS authentication\u003c/td\u003e\n    \u003ctd\u003e4187427415564246\u003c/td\u003e\n    \u003ctd\u003e828\u003c/td\u003e\n    \u003ctd\u003e3310\u003c/td\u003e\n    \u003ctd\u003e09/32\u003c/td\u003e\n    \u003ctd\u003e12345\u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \n\u003c/table\u003e\n\n## Contact\n- Twitter  [nathan-somto](https://www.twitter.com/nathan-somto)\n- Linkedin [Mkparu Somtochi Elnathan]()\n- Email [mkparusomtochi26@gmail.com]()\n\n\n ***Don't forget to leave a ⭐️***\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathan-somto%2Fsmstore","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnathan-somto%2Fsmstore","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathan-somto%2Fsmstore/lists"}