├── public ├── favicon.ico └── index.html ├── postcss.config.js ├── src ├── pages │ ├── NotFound.js │ ├── Home.js │ ├── Checkout.js │ ├── Products.js │ └── Cart.js ├── utilities │ └── CurrencyFormatter.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/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nasimhelal/techalpha/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /src/pages/NotFound.js: -------------------------------------------------------------------------------- 1 | const NotFound = () => { 2 | return

NotFound

; 3 | }; 4 | 5 | export default NotFound; 6 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./src/**/*.{js,jsx,ts,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | const Footer = () => { 2 | return ( 3 |

4 |

5 |

6 | ); 7 | }; 8 | 9 | export default Footer; 10 | -------------------------------------------------------------------------------- /src/pages/Home.js: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /.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 | # production 12 | 13 | # misc 14 | .DS_Store 15 | .env.local 16 | .env.development.local 17 | .env.test.local 18 | .env.production.local 19 | 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | techalpha | get the best gadgets form here 9 | 10 | 11 |

12 | 13 | -------------------------------------------------------------------------------- /src/app/store.js: -------------------------------------------------------------------------------- 1 | import cartReducer from "../features/products/cartSlice"; 2 | import productReducer, { 3 | fetchedProduct, 4 | } from "../features/products/productSlice"; 5 | 6 | const { configureStore } = require("@reduxjs/toolkit"); 7 | 8 | export const store = configureStore({ 9 | reducer: { 10 | products: productReducer, 11 | cart: cartReducer, 12 | }, 13 | }); 14 | 15 | store.dispatch(fetchedProduct()); 16 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import { Provider } from "react-redux"; 4 | import { BrowserRouter } from "react-router-dom"; 5 | import App from "./App"; 6 | import { store } from "./app/store"; 7 | import "./index.css"; 8 | 9 | const root = ReactDOM.createRoot(document.getElementById("root")); 10 | root.render( 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | -------------------------------------------------------------------------------- /src/pages/Checkout.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import { BsArrowLeft } from "react-icons/bs"; 4 | const Checkout = () => { 5 | return ( 6 |

7 |

8 | I will develop this page when we learn firebase authetication 9 |

10 | 14 | 15 |

Continue shopping

16 | 17 |

18 | ); 19 | }; 20 | 21 | export default Checkout; 22 | -------------------------------------------------------------------------------- /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 | 7 | return ( 8 |

9 |

10 | Browse all products 11 |

12 |

13 | {status &&

{status}

} 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 |

10 |

11 |

12 | {image.headline} 13 |

14 |

{image.body}

15 | 19 | {image.cta} 20 | 21 |

22 |

23 | ); 24 | }; 25 | 26 | export default Slide; 27 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { Route, Routes } from "react-router-dom"; 2 | import Footer from "./components/Footer"; 3 | import Navbar from "./components/Navbar"; 4 | import Cart from "./pages/Cart"; 5 | import Home from "./pages/Home"; 6 | import Products from "./pages/Products"; 7 | import NotFound from "./pages/NotFound"; 8 | import Checkout from "./pages/Checkout"; 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 |

{" "} 27 |