├── src ├── pages │ ├── NotFound.jsx │ ├── Home.jsx │ ├── Products.jsx │ └── Cart.jsx ├── utilites │ └── currencyFormatter.js ├── components │ ├── Footer.jsx │ ├── Slide.jsx │ ├── Navbar.jsx │ ├── Cart.jsx │ └── Slider.jsx ├── app │ └── store.js ├── index.js ├── App.js ├── features │ └── products │ │ ├── productSlice.js │ │ └── cartSlice.js └── index.css ├── tailwind.config.js ├── public └── index.html ├── .gitignore ├── package.json └── README.md /src/pages/NotFound.jsx: -------------------------------------------------------------------------------- 1 | const NotFound = () => { 2 | return
NotFound
; 3 | }; 4 | 5 | export default NotFound; 6 | -------------------------------------------------------------------------------- /src/utilites/currencyFormatter.js: -------------------------------------------------------------------------------- 1 | export const currencyFormatter = (price) => { 2 | if (!price) return; 3 | return price.toLocaleString("en-US", { style: "currency", currency: "USD" }); 4 | }; 5 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./src/**/*.{js,jsx,ts,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /src/pages/Home.jsx: -------------------------------------------------------------------------------- 1 | import Slider from "../components/Slider"; 2 | import Products from "./Products"; 3 | 4 | const Home = () => { 5 | return ( 6 |
7 | 8 | 9 |
10 | ); 11 | }; 12 | 13 | export default Home; 14 | -------------------------------------------------------------------------------- /src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | const Footer = () => { 2 | return ( 3 |
4 |

5 |

© {new Date().getFullYear()} Tech Alpha. All rights reserved

6 |

7 |
8 | ); 9 | }; 10 | 11 | export default Footer; 12 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tech Alpha 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | -------------------------------------------------------------------------------- /src/app/store.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from "@reduxjs/toolkit"; 2 | 3 | import productsReducer, { 4 | productFetching, 5 | } from "../features/products/productSlice"; 6 | 7 | import cartReducer from "../features/products/cartSlice"; 8 | 9 | export const store = configureStore({ 10 | reducer: { 11 | products: productsReducer, 12 | cart: cartReducer, 13 | }, 14 | }); 15 | 16 | store.dispatch(productFetching()); 17 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import { BrowserRouter } from "react-router-dom"; 4 | import App from "./App"; 5 | import "./index.css"; 6 | 7 | import { store } from "./app/store"; 8 | import { Provider } from "react-redux"; 9 | 10 | const root = ReactDOM.createRoot(document.getElementById("root")); 11 | root.render( 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | ); 20 | -------------------------------------------------------------------------------- /src/pages/Products.jsx: -------------------------------------------------------------------------------- 1 | import { useSelector } from "react-redux"; 2 | import Cart from "../components/Cart"; 3 | 4 | const Products = () => { 5 | const { items: data, status } = useSelector((state) => state.products); 6 | console.log("data: ", data); 7 | return ( 8 |
9 |

10 | browse all products 11 |

12 |
13 | {status &&

{status}

} 14 | 15 | {data.map((product) => ( 16 | 17 | ))} 18 |
19 |
20 | ); 21 | }; 22 | 23 | export default Products; 24 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { Route, Routes } from "react-router-dom"; 2 | 3 | import Navbar from "./components/Navbar"; 4 | import Footer from "./components/Footer"; 5 | import Home from "./pages/Home"; 6 | import Products from "./pages/Products"; 7 | import Cart from "./pages/Cart"; 8 | import NotFound from "./pages/NotFound"; 9 | import { ToastContainer } from "react-toastify"; 10 | import "react-toastify/dist/ReactToastify.css"; 11 | 12 | const App = () => { 13 | return ( 14 | <> 15 |
16 | 17 | 18 | 19 | } /> 20 | } /> 21 | } /> 22 | } /> 23 | } /> 24 | 25 |
26 |