Simple E-Commerce

├── postcss.config.js ├── vite.config.js ├── tailwind.config.js ├── src ├── Layout.jsx ├── index.css ├── component │ ├── Footer.jsx │ ├── Card.jsx │ ├── Section.jsx │ └── Navbar.jsx ├── page │ ├── About.jsx │ ├── Products.jsx │ ├── SingleProduct.jsx │ ├── Contact.jsx │ └── Home.jsx └── main.jsx ├── .gitignore ├── README.md ├── index.html ├── package.json ├── eslint.config.js └── public └── vite.svg /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{js,jsx,ts,tsx}" 6 | ], 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | } 12 | 13 | -------------------------------------------------------------------------------- /src/Layout.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Outlet } from 'react-router-dom'; 3 | import Navbar from './component/Navbar'; 4 | 5 | const Layout = () => { 6 | return ( 7 | <> 8 | 9 | 10 | 11 | ) 12 | } 13 | 14 | export default Layout; 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .truncate-title { 6 | overflow: hidden; 7 | text-overflow: ellipsis; 8 | white-space: nowrap; 9 | } 10 | 11 | .truncate-description { 12 | display: -webkit-box; 13 | -webkit-line-clamp: 2; 14 | /* Show two lines */ 15 | -webkit-box-orient: vertical; 16 | overflow: hidden; 17 | text-overflow: ellipsis; 18 | } -------------------------------------------------------------------------------- /src/component/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Footer = () => { 4 | return ( 5 | 12 | ); 13 | }; 14 | 15 | export default Footer; 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Simple E-Commerce 8 | 9 | 10 |

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "router", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-router-dom": "^6.26.2" 16 | }, 17 | "devDependencies": { 18 | "@eslint/js": "^9.9.0", 19 | "@types/react": "^18.3.3", 20 | "@types/react-dom": "^18.3.0", 21 | "@vitejs/plugin-react": "^4.3.1", 22 | "autoprefixer": "^10.4.20", 23 | "eslint": "^9.9.0", 24 | "eslint-plugin-react": "^7.35.0", 25 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 26 | "eslint-plugin-react-refresh": "^0.4.9", 27 | "globals": "^15.9.0", 28 | "postcss": "^8.4.45", 29 | "tailwindcss": "^3.4.11", 30 | "vite": "^5.4.1" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/page/About.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Section from '../component/Section' 3 | import Footer from '../component/Footer' 4 | 5 | const About = () => { 6 | return ( 7 | <> 8 |

16 |

17 |

19 | 20 | ) 21 | } 22 | 23 | export default About 24 | -------------------------------------------------------------------------------- /src/page/Products.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import { useNavigate } from 'react-router-dom'; 3 | import CardList from '../component/Card'; 4 | import Footer from '../component/Footer'; 5 | 6 | const Products = () => { 7 | const [data, setData] = useState(null); 8 | const navigate = useNavigate(); 9 | 10 | useEffect(() => { 11 | fetch('https://fakestoreapi.com/products') 12 | .then(res => res.json()) 13 | .then(res => { 14 | setData(res); 15 | }) 16 | .catch(err => { 17 | console.log(err); 18 | }); 19 | }, []); 20 | 21 | const singleUser = (item) => { 22 | navigate(`/singleProduct/${item.id}`); 23 | }; 24 | return ( 25 | <> 26 |

27 |

28 | 29 |

30 |

31 |