Update README.md for React migration

- Update tech stack information (Vue2 → React 18)
- Add comprehensive project overview
- Include new features list
- Update development commands (yarn → npm)
- Add build instructions
- Document Node.js 20+ recommendation

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

.claude/settings.local.json

@@ -14,7 +14,12 @@
       "Bash(python3:*)",
       "Bash(git add:*)",
       "Bash(open:*)",
-      "WebFetch(domain:api.syui.ai)"
+      "WebFetch(domain:api.syui.ai)",
+      "Bash(git push:*)",
+      "Bash(find:*)",
+      "Bash(rm:*)",
+      "Bash(grep:*)",
+      "Bash(ls:*)"
     ],
     "deny": []
   }

.gitignore

@@ -6,3 +6,4 @@ yarn-error.log
 package-lock.json
 yarn.lock
 **DS_Store
+.claude

readme.md

@@ -1,10 +1,45 @@
 # card
 
-- host : [card.syui.ai](https://card.syuiai)
+A React-based card collection viewer with holographic effects.
+
+## Overview
+
+- Production URL: [card.syui.ai](https://card.syui.ai)
+- API: https://api.syui.ai
+
+## Tech Stack
+
+- React 18
+- TypeScript
+- Vite
+- Tailwind CSS
+- React Query (TanStack Query)
+- React Router v6
+
+## Features
+
+- User card collections display
+- Holographic effects for special status cards
+- Favorite card highlighting
+- Responsive grid layout
+- Fast initial loading with JSON caching
+
+## Development
 
 ```sh
-$ nvm use 16
-$ yarn install
-$ yarn dev
+# Node.js 20+ recommended
+$ npm install
+$ npm run dev
 ```
 
+## Build
+
+```sh
+$ npm run build
+$ npm run preview
+```
+
+## Environment
+
+The app runs on localhost:8080 by default and uses proxy for API calls during development.
+

src/components/pages/UserPage.tsx

@@ -59,7 +59,7 @@ export default function UserPage() {
             {/* Favorite Card Section */}
             {user.fav && user.fav !== '0' && cards?.data && (
               (() => {
-                const favCard = cards.data.find(card => card.id === parseInt(user.fav));
+                const favCard = cards.data.find(card => card.id === parseInt(user.fav || '0'));
                 if (favCard) {
                   return (
                     <div className="mb-8">

src/main.js

@@ -1,9 +0,0 @@
-import Vue from 'vue'
-import App from './App.vue'
-import VueMeta from 'vue-meta'
-Vue.use(VueMeta)
-Vue.config.productionTip = false
-
-new Vue({
-  render: h => h(App)
-}).$mount('#app')

src/utils/constants.ts

@@ -9,7 +9,8 @@ export const SKILL_ICONS = {
   yui: 'icon-ai',
   '3d': '■',
   model: 'fa-solid fa-cube',
-  first: 'icon-moji_a'
+  first: 'icon-moji_a',
+  normal: ''
 } as const;
 
 export const PLANET_THRESHOLDS = {

vue.config.js

@@ -1,23 +0,0 @@
-module.exports = {
-	devServer: {
-		proxy: {
-			"^/api*": {
-				target: "https://api.syui.ai",
-				pathRewrite: { "^/api": "" },
-			}
-		}
-	},
-	publicPath: "/",
-	configureWebpack: {
-		output: {
-			filename: '[name].js',
-			chunkFilename: '[name].js'
-		}
-	},
-	css: {
-		extract: {
-			filename: '[name].css',
-			chunkFilename: '[name].css'
-		},
-	},
-}