├── public ├── F-modified.png └── index.html ├── postcss.config.js ├── src ├── utilities │ └── currencyFormatter.js ├── pages │ ├── Home.js │ ├── NotFound.js │ ├── Products.js │ └── Cart.js ├── components │ ├── Footer.js │ ├── Slide.js │ ├── Navbar.js │ ├── Card.js │ └── Slider.js ├── app │ └── store.js ├── index.js ├── App.js ├── features │ └── products │ │ ├── productSlice.js │ │ └── cartSlice.js └── index.css ├── tailwind.config.js ├── .gitignore ├── package.json └── README.md /public/F-modified.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muntasir-fahii/tech-alpha-fs/HEAD/public/F-modified.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /src/utilities/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.js: -------------------------------------------------------------------------------- 1 | import Slider from "../components/Slider"; 2 | 3 | const Home = () => { 4 | return ( 5 |

6 | 7 |

8 | ); 9 | }; 10 | 11 | export default Home; 12 | -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | const Footer = () => { 2 | return ( 3 |

4 |

5 |

6 | ); 7 | }; 8 | 9 | export default Footer; 10 | -------------------------------------------------------------------------------- /.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 | productsFetching, 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(productsFetching()); 17 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tech Alpha 9 | 10 | 11 |

12 | 13 | 14 | -------------------------------------------------------------------------------- /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/NotFound.js: -------------------------------------------------------------------------------- 1 | import { MdRemoveShoppingCart } from "react-icons/md"; 2 | 3 | const NotFound = () => { 4 | return ( 5 |

6 |

7 | Not found 8 |

9 |

10 | 404 11 |

12 | 13 | 14 |

15 | ); 16 | }; 17 | 18 | export default NotFound; 19 | -------------------------------------------------------------------------------- /src/pages/Products.js: -------------------------------------------------------------------------------- 1 | import { useSelector } from "react-redux"; 2 | import Card from "../components/Card"; 3 | 4 | const Products = () => { 5 | const { items: data, status } = useSelector((state) => state.products); 6 | return ( 7 |

8 |

9 | Browse all Products 10 |

11 |

12 | {status &&

{status}

} 13 | 14 | {data.map((product) => ( 15 | 16 | ))} 17 |

18 |

19 | ); 20 | }; 21 | 22 | export default Products; 23 | -------------------------------------------------------------------------------- /src/components/Slide.js: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | 3 | const Slide = ({ image }) => { 4 | return ( 5 |

6 |

7 |

8 | {image.headline} 9 |

10 |

{image.body}

11 | 15 | 16 | {image.cta} 17 | 18 | 19 |

20 |

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

15 | 16 | 17 | 18 | } /> 19 | } /> 20 | } /> 21 | } /> 22 | } /> 23 | 24 |

25 |