shehza-d · shehza-d · Aug 28, 2024 · Aug 28, 2024 · Aug 28, 2024
diff --git a/frontend/index.html b/frontend/index.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#f79311" />
+    <meta name="description" content="Shehzad's Youtube Clone" />
+    <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="/manifest.json" />
+
+    <title>Youtube Clone by Shehzad</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script src="/src/index.tsx" type="module"></script>
+  </body>
+</html>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -2,57 +2,34 @@
   "name": "youtube-clone-frontend",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "deploy": "surge ./build --domain youtube-by-shehzad.surge.sh",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "deploy": "surge ./build --domain youtube-by-shehzad.surge.sh"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.4",
     "@reduxjs/toolkit": "^2.0.1",
     "@tanstack/react-query": "^5.18.0",
     "axios": "^1.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-hook-form": "^7.49.3",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.11.0",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.15.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^3.4.0",
     "zod": "^3.22.2"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.48",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "@types/react-stars": "^2.2.1",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "tailwindcss": "^3.3.3",
-    "typescript": "^4.9.5"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "typescript": "^4.9.5",
+    "vite-tsconfig-paths": "^5.0.1",
+    "vite": "^5.4.2"
   }
 }
diff --git a/frontend/public/index.html b/frontend/public/index.html
diff --git a/frontend/src/App.test.tsx b/frontend/src/App.test.tsx
diff --git a/frontend/src/README.md b/frontend/src/README.md
diff --git a/frontend/src/helpers/index.ts b/frontend/src/helpers/index.ts
@@ -1,7 +1,9 @@
 export const getUrl = () => {
   const isProduction = window.location.href.includes("https");
 
-  const baseUrl = isProduction ? "hkikik" : "http://localhost:3003";
+  const baseUrl = isProduction
+    ? import.meta.env.VITE_APP_API_BASE
+    : "http://localhost:3003";
   return baseUrl;
 };
 

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -1,9 +1,9 @@
+@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;700;800;900&display=swap");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;700;800;900&display=swap");
-
 * {
   font-family: "Outfit", sans-serif;
 }

diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
-import reportWebVitals from "./reportWebVitals";
 import { BrowserRouter } from "react-router-dom";
 import { Provider } from "react-redux";
 import { store } from "./store/store";
@@ -26,11 +25,6 @@ root.render(
   </React.StrictMode>,
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
-
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA

diff --git a/frontend/src/react-app-env.d.ts b/frontend/src/react-app-env.d.ts
diff --git a/frontend/src/reportWebVitals.ts b/frontend/src/reportWebVitals.ts
diff --git a/frontend/src/setupTests.ts b/frontend/src/setupTests.ts
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -1,20 +1,13 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
+    "paths": {
+      // "@": ["src"],
+      // "@/*": ["src/*"]
+    }
   },
-  "include": ["src"]
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
 }
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/frontend/vite-env.d.ts b/frontend/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -0,0 +1,33 @@
+// https://medium.com/@mun1013/guide-to-migrating-from-create-react-app-cra-to-vite-5516f55aa410
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import viteTsconfigPaths from "vite-tsconfig-paths"; // for easy importing
+import tailwindcss from "tailwindcss";
+// import path from "path";
+
+// const __dirname = path.resolve();
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: "./",
+
+  plugins: [react(), viteTsconfigPaths()],
+
+  server: {
+    open: true, // this ensures that the browser opens upon server start
+    port: 3000, // this sets a default port to 3000
+  },
+  resolve: {
+    alias: {
+      // "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  build: {
+    outDir: "build",
+  },
+  css: {
+    postcss: {
+      plugins: [tailwindcss()],
+    },
+  },
+});