TechBowl-japan · 3c1u · Jul 25, 2023 · Jul 25, 2023 · Jul 25, 2023 · Jul 25, 2023
diff --git a/.env.example b/.env.example
@@ -0,0 +1 @@
+VITE_API_URL=""
diff --git a/.env.sample b/.env.sample
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

diff --git a/index.html b/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Hello React</title>
+<div id="root"></div>
+<script type="module" src="/src/index.jsx"></script>
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "allowSyntheticDefaultImports": false,
+    "baseUrl": "./",
+    "paths": {
+      "~/*": ["src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/package.json b/package.json
@@ -2,33 +2,36 @@
   "name": "railway-todo-app",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "dependencies": {
-    "@reduxjs/toolkit": "^1.8.2",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.0",
-    "axios": "^0.27.2",
-    "react": "^17.0.2",
+    "@fontsource/inter": "^5.0.5",
+    "@reduxjs/toolkit": "^1.9.5",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@unocss/reset": "^0.53.6",
+    "axios": "^1.4.0",
+    "react": "^18.2.0",
     "react-cookie": "^4.1.1",
-    "react-dom": "^17.0.2",
-    "react-redux": "^8.0.2",
-    "react-router-dom": "^5.3.0",
-    "web-vitals": "^2.1.4"
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.1.1",
+    "react-router-dom": "^6.14.2"
   },
   "devDependencies": {
-    "react-scripts": "5.0.1"
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "eslint": "^8.45.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "prettier": "^3.0.0",
+    "vite": "^4.4.5"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint ./src --ext js,jsx --report-unused-disable-directives --max-warnings 0"
   },
   "browserslist": {
     "production": [

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,20 @@
+import { useDispatch } from 'react-redux'
+import { Router } from './routes/Router'
+import { useEffect } from 'react'
+import { fetchUser } from '~/store/auth/index'
+
+function App() {
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    void dispatch(fetchUser())
+  }, [])
+
+  return (
+    <div className="App">
+      <Router />
+    </div>
+  )
+}
+
+export default App
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/authSlice.js b/src/authSlice.js
diff --git a/src/components/BackButton.css b/src/components/BackButton.css
@@ -0,0 +1,16 @@
+.back_button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--indigo-600);
+  width: fit-content;
+}
+
+.back_button:hover {
+  cursor: pointer;
+  opacity: 0.8;
+}
+
+.back_button__icon {
+  fill: currentColor;
+}
diff --git a/src/components/BackButton.jsx b/src/components/BackButton.jsx
@@ -0,0 +1,15 @@
+import { ChevronIcon } from '~/icons/ChevronIcon'
+import './BackButton.css'
+
+const handleClick = () => {
+  window.history.back()
+}
+
+export const BackButton = () => {
+  return (
+    <button type="button" onClick={handleClick} className="back_button">
+      <ChevronIcon className="back_button__icon" />
+      Back
+    </button>
+  )
+}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx