gulshancodes · danrfletcher · Jan 18, 2024 · Jan 18, 2024 · Jan 18, 2024 · Jan 18, 2024
diff --git a/README.md b/README.md
@@ -39,9 +39,9 @@ State management using Context API.
 
 ## Available Scripts:
 
-#### `npm start`
+#### `npm run dev`
 
-#### `npm test`
+#### `npm run test`
 
 #### `npm run build`
 

diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -3,22 +3,22 @@
 
 <head>
   <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <link rel="icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Web site created using create-react-app" />
-  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <link rel="apple-touch-icon" href="/logo192.png" />
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <link rel="manifest" href="/manifest.json" />
   <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
+      Notice the use of  in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
@@ -43,6 +43,7 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script type="module" src="/src/index.jsx"></script>
 </body>
 
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,20 +6,24 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.4.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "sass": "^1.53.0",
     "swiper": "^8.3.1",
+    "vite": "^5.0.11",
+    "vite-plugin-svgr": "^4.2.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "vite build",
+    "test": "vite test",
+    "eject": "vite eject",
+    "serve": "vite preview"
   },
   "eslintConfig": {
     "extends": [

diff --git a/src/App.js → src/App.jsx b/src/App.js → src/App.jsx
diff --git a/src/components/cart/CartItem.js → src/components/cart/CartItem.jsx b/src/components/cart/CartItem.js → src/components/cart/CartItem.jsx
@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import { TbTrash } from 'react-icons/tb';
 import { Link } from 'react-router-dom';
 import { displayMoney } from '../../helpers/utils';
-import cartContext from '../../contexts/cart/cartContext';
+import cartContext from '../../contexts/cart/cartContext.jsx';
 import QuantityBox from '../common/QuantityBox';
 
 

diff --git a/src/components/common/BackTop.js → src/components/common/BackTop.jsx b/src/components/common/BackTop.js → src/components/common/BackTop.jsx
diff --git a/src/components/common/EmptyView.js → src/components/common/EmptyView.jsx b/src/components/common/EmptyView.js → src/components/common/EmptyView.jsx
diff --git a/src/components/common/Footer.js → src/components/common/Footer.jsx b/src/components/common/Footer.js → src/components/common/Footer.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
-import { footMenu, footSocial } from '../../data/footerData';
+import { footMenu, footSocial } from '../../data/footerData.jsx';
 
 
 const Footer = () => {

diff --git a/src/components/common/Header.js → src/components/common/Header.jsx b/src/components/common/Header.js → src/components/common/Header.jsx
@@ -2,8 +2,8 @@ import React, { useContext, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { AiOutlineSearch, AiOutlineShoppingCart, AiOutlineUser } from 'react-icons/ai';
 import { dropdownMenu } from '../../data/headerData';
-import commonContext from '../../contexts/common/commonContext';
-import cartContext from '../../contexts/cart/cartContext';
+import commonContext from '../../contexts/common/commonContext.jsx';
+import cartContext from '../../contexts/cart/cartContext.jsx';
 import AccountForm from '../form/AccountForm';
 import SearchBar from './SearchBar';
 

diff --git a/src/components/common/Preloader.js → src/components/common/Preloader.jsx b/src/components/common/Preloader.js → src/components/common/Preloader.jsx
diff --git a/src/components/common/QuantityBox.js → src/components/common/QuantityBox.jsx b/src/components/common/QuantityBox.js → src/components/common/QuantityBox.jsx
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { FaPlus, FaMinus } from 'react-icons/fa';
-import cartContext from '../../contexts/cart/cartContext';
+import cartContext from '../../contexts/cart/cartContext.jsx';
 
 
 const QuantityBox = (props) => {

diff --git a/src/components/common/SearchBar.js → src/components/common/SearchBar.jsx b/src/components/common/SearchBar.js → src/components/common/SearchBar.jsx
@@ -1,6 +1,6 @@
 import React, { useContext, useRef } from 'react';
 import { Link } from 'react-router-dom';
-import commonContext from '../../contexts/common/commonContext';
+import commonContext from '../../contexts/common/commonContext.jsx';
 import productsData from '../../data/productsData';
 import useOutsideClose from '../../hooks/useOutsideClose';
 import useScrollDisable from '../../hooks/useScrollDisable';

diff --git a/src/components/common/SectionsHead.js → src/components/common/SectionsHead.jsx b/src/components/common/SectionsHead.js → src/components/common/SectionsHead.jsx
diff --git a/src/components/common/Services.js → src/components/common/Services.jsx b/src/components/common/Services.js → src/components/common/Services.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import servicesData from '../../data/servicesData';
+import servicesData from '../../data/servicesData.jsx';
 import SectionsHead from './SectionsHead';
 
 

diff --git a/src/components/filters/FilterBar.js → src/components/filters/FilterBar.jsx b/src/components/filters/FilterBar.js → src/components/filters/FilterBar.jsx
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { BiSort, BiFilterAlt } from 'react-icons/bi';
-import filtersContext from '../../contexts/filters/filtersContext';
+import filtersContext from '../../contexts/filters/filtersContext.jsx';
 import FilterBarOptions from './FilterBarOptions';
 
 

diff --git a/src/components/filters/FilterBarOptions.js → src/components/filters/FilterBarOptions.jsx b/src/components/filters/FilterBarOptions.js → src/components/filters/FilterBarOptions.jsx
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import filtersContext from '../../contexts/filters/filtersContext';
+import filtersContext from '../../contexts/filters/filtersContext.jsx';
 import { sortMenu } from '../../data/filterBarData';
 import { displayMoney } from '../../helpers/utils';
 

diff --git a/src/components/form/AccountForm.js → src/components/form/AccountForm.jsx b/src/components/form/AccountForm.js → src/components/form/AccountForm.jsx
@@ -1,6 +1,6 @@
 import React, { useContext, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
-import commonContext from '../../contexts/common/commonContext';
+import commonContext from '../../contexts/common/commonContext.jsx';
 import useForm from '../../hooks/useForm';
 import useOutsideClose from '../../hooks/useOutsideClose';
 import useScrollDisable from '../../hooks/useScrollDisable';

diff --git a/src/components/product/ProductCard.js → src/components/product/ProductCard.jsx b/src/components/product/ProductCard.js → src/components/product/ProductCard.jsx
@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import { IoMdStar } from 'react-icons/io';
 import { Link } from 'react-router-dom';
 import { displayMoney } from '../../helpers/utils';
-import cartContext from '../../contexts/cart/cartContext';
+import cartContext from '../../contexts/cart/cartContext.jsx';
 import useActive from '../../hooks/useActive';
 
 

diff --git a/src/components/product/ProductReviews.js → src/components/product/ProductReviews.jsx b/src/components/product/ProductReviews.js → src/components/product/ProductReviews.jsx
diff --git a/src/components/product/ProductSummary.js → src/components/product/ProductSummary.jsx b/src/components/product/ProductSummary.js → src/components/product/ProductSummary.jsx
diff --git a/src/components/product/TopProducts.js → src/components/product/TopProducts.jsx b/src/components/product/TopProducts.js → src/components/product/TopProducts.jsx
diff --git a/src/components/sliders/FeaturedSlider.js → src/components/sliders/FeaturedSlider.jsx b/src/components/sliders/FeaturedSlider.js → src/components/sliders/FeaturedSlider.jsx
diff --git a/src/components/sliders/HeroSlider.js → src/components/sliders/HeroSlider.jsx b/src/components/sliders/HeroSlider.js → src/components/sliders/HeroSlider.jsx
diff --git a/src/components/sliders/RelatedSlider.js → src/components/sliders/RelatedSlider.jsx b/src/components/sliders/RelatedSlider.js → src/components/sliders/RelatedSlider.jsx
diff --git a/src/contexts/cart/cartContext.js → src/contexts/cart/cartContext.jsx b/src/contexts/cart/cartContext.js → src/contexts/cart/cartContext.jsx
diff --git a/src/contexts/common/commonContext.js → src/contexts/common/commonContext.jsx b/src/contexts/common/commonContext.js → src/contexts/common/commonContext.jsx
diff --git a/src/contexts/filters/filtersContext.js → src/contexts/filters/filtersContext.jsx b/src/contexts/filters/filtersContext.js → src/contexts/filters/filtersContext.jsx
diff --git a/src/data/footerData.js → src/data/footerData.jsx b/src/data/footerData.js → src/data/footerData.jsx
diff --git a/src/data/servicesData.js → src/data/servicesData.jsx b/src/data/servicesData.js → src/data/servicesData.jsx
diff --git a/src/index.js → src/index.jsx b/src/index.js → src/index.jsx
diff --git a/src/pages/AllProducts.js → src/pages/AllProducts.jsx b/src/pages/AllProducts.js → src/pages/AllProducts.jsx
@@ -4,7 +4,7 @@ import useDocTitle from '../hooks/useDocTitle';
 import FilterBar from '../components/filters/FilterBar';
 import ProductCard from '../components/product/ProductCard';
 import Services from '../components/common/Services';
-import filtersContext from '../contexts/filters/filtersContext';
+import filtersContext from '../contexts/filters/filtersContext.jsx';
 import EmptyView from '../components/common/EmptyView';
 
 

diff --git a/src/pages/Cart.js → src/pages/Cart.jsx b/src/pages/Cart.js → src/pages/Cart.jsx
@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import { BsCartX } from 'react-icons/bs';
 import { calculateTotal, displayMoney } from '../helpers/utils';
 import useDocTitle from '../hooks/useDocTitle';
-import cartContext from '../contexts/cart/cartContext';
+import cartContext from '../contexts/cart/cartContext.jsx';
 import CartItem from '../components/cart/CartItem';
 import EmptyView from '../components/common/EmptyView';
 

diff --git a/src/pages/ErrorPage.js → src/pages/ErrorPage.jsx b/src/pages/ErrorPage.js → src/pages/ErrorPage.jsx
diff --git a/src/pages/Home.js → src/pages/Home.jsx b/src/pages/Home.js → src/pages/Home.jsx
diff --git a/src/pages/ProductDetails.js → src/pages/ProductDetails.jsx b/src/pages/ProductDetails.js → src/pages/ProductDetails.jsx
@@ -4,7 +4,7 @@ import { IoMdStar, IoMdCheckmark } from 'react-icons/io';
 import { calculateDiscount, displayMoney } from '../helpers/utils';
 import useDocTitle from '../hooks/useDocTitle';
 import useActive from '../hooks/useActive';
-import cartContext from '../contexts/cart/cartContext';
+import cartContext from '../contexts/cart/cartContext.jsx';
 import productsData from '../data/productsData';
 import SectionsHead from '../components/common/SectionsHead';
 import RelatedSlider from '../components/sliders/RelatedSlider';

diff --git a/src/routes/RouterRoutes.js → src/routes/RouterRoutes.jsx b/src/routes/RouterRoutes.js → src/routes/RouterRoutes.jsx
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+  ],
+  server: {
+    host: true
+  }
+})