kscalelabs · codekansas · Aug 7, 2024 · Aug 6, 2024 · Aug 6, 2024 · Aug 6, 2024
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -44,8 +44,8 @@ jobs:
       - name: Write .env.production
         working-directory: frontend
         run: |
-          echo "REACT_APP_GOOGLE_CLIENT_ID=${{ secrets.GOOGLE_CLIENT_ID }}" >> .env.production
-          echo "REACT_APP_BACKEND_URL=${{ secrets.BACKEND_URL }}" >> .env.production
+          echo "VITE_APP_GOOGLE_CLIENT_ID=${{ secrets.GOOGLE_CLIENT_ID }}" >> .env.production
+          echo "VITE_APP_BACKEND_URL=${{ secrets.BACKEND_URL }}" >> .env.production
 
       - name: Build frontend
         run: |

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -113,7 +113,7 @@ export AWS_SECRET_ACCESS_KEY=test
 export AWS_ENDPOINT_URL_S3='http://127.0.0.1:4566'
 
 # For letting the frontend know the backend URL.
-export REACT_APP_BACKEND_URL='http://127.0.0.1:8080'
+export VITE_APP_BACKEND_URL='http://127.0.0.1:8080'
 
 # For SMTP
 export SMTP_HOST='smtp.gmail.com'
@@ -152,7 +152,7 @@ npm install
 To serve the React frontend in development mode:
 
 ```bash
-npm start
+npm run dev
 ```
 
 To build the React frontend for production:
@@ -169,13 +169,13 @@ npm run format
 
 ### Google Client ID
 
-You will need to set `REACT_APP_GOOGLE_CLIENT_ID`. To do this, first create a Google client id (see [this LogRocket post](https://blog.logrocket.com/guide-adding-google-login-react-app/)). Then create a `.env.local` file in the `frontend` directory and add the following line:
+You will need to set `VITE_APP_GOOGLE_CLIENT_ID`. To do this, first create a Google client id (see [this LogRocket post](https://blog.logrocket.com/guide-adding-google-login-react-app/)). Then create a `.env.local` file in the `frontend` directory and add the following line:
 
 ```
-REACT_APP_GOOGLE_CLIENT_ID=your-client-id
+VITE_APP_GOOGLE_CLIENT_ID=your-client-id
 ```
 
-Additionally, you should set `REACT_APP_BACKEND_URL` to the URL of the FastAPI backend. This should be `http://127.0.0.1:8080` when developing locally.
+Additionally, you should set `VITE_APP_BACKEND_URL` to the URL of the FastAPI backend. This should be `http://127.0.0.1:8080` when developing locally.
 
 ## Testing
 

diff --git a/Makefile b/Makefile
@@ -30,7 +30,7 @@ start-backend:
 	@fastapi dev 'store/app/main.py' --port 8080
 
 start-frontend:
-	@cd frontend && npm start
+	@cd frontend && npm run dev
 
 start-docker-dynamodb:
 	@docker kill store-db || true

diff --git a/env.sh.example b/env.sh.example
@@ -8,7 +8,7 @@ export AWS_SECRET_ACCESS_KEY=test
 export AWS_ENDPOINT_URL_S3='http://127.0.0.1:4566'
 
 # For letting the frontend know the backend URL.
-export REACT_APP_BACKEND_URL='http://127.0.0.1:8080'
+export VITE_APP_BACKEND_URL='http://127.0.0.1:8080'
 
 # For SMTP
 export SMTP_HOST='smtp.gmail.com'

diff --git a/frontend/.prettierrc b/frontend/.prettierrc
diff --git a/frontend/README.md b/frontend/README.md
@@ -8,14 +8,14 @@ Install requirements:
 
 ```bash
 cd frontend # This directory
-nvm use 20.10.0
+nvm use v22.6.0
 npm install
 ```
 
 Start server:
 
 ```bash
-npm start
+npm run dev
 ```
 
 Build static files:

diff --git a/frontend/public/favicon.ico → frontend/assets/favicon.ico b/frontend/public/favicon.ico → frontend/assets/favicon.ico
diff --git a/frontend/public/logo192.png → frontend/assets/logo192.png b/frontend/public/logo192.png → frontend/assets/logo192.png
diff --git a/frontend/public/manifest.json → frontend/assets/manifest.json b/frontend/public/manifest.json → frontend/assets/manifest.json
diff --git a/frontend/eslint.config.js → frontend/eslint.config.mjs b/frontend/eslint.config.js → frontend/eslint.config.mjs
@@ -1,7 +1,6 @@
 import { fixupConfigRules } from "@eslint/compat";
 import pluginJs from "@eslint/js";
 import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
-import globals from "globals";
 import tseslint from "typescript-eslint";
 
 const reactSettings = {
@@ -13,7 +12,14 @@ const reactSettings = {
 };
 
 export default [
-  { languageOptions: { globals: globals.browser } },
+  {
+    ignores: [
+      "node_modules/**/*",
+      "**/__tests__/**/*",
+      "*.config.ts",
+      "*.config.js",
+    ],
+  },
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
   reactSettings,

diff --git a/frontend/index.html b/frontend/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+
+  <!-- SEO -->
+  <meta name="description" content="Buy and sell humanoid robots and robot parts online" />
+  <meta name="keywords" content="K-Scale Labs, Robot, Robots, Humanoid Robots, " />
+
+  <!-- View options -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="theme-color" content="#000000" />
+
+  <!-- Third-party stylesheets -->
+  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" />
+
+  <!-- Manifest -->
+  <link rel="icon" href="assets/favicon.ico" type="image/x-icon" />
+  <link rel="apple-touch-icon" href="assets/logo192.png" />
+  <link rel="manifest" href="assets/manifest.json" />
+
+  <title>Robolist</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="src/index.tsx"></script>
+</body>
+
+</html>