initialize Vite + React + TypeScript project with Tailwind CSS and API service setup

2025-02-01 00:33:24 -03:00 · 2025-02-01 00:33:24 -03:00 · f133e18302
commit f133e18302
31 changed files with 5317 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/eslint.config.js
+++ b/eslint.config.js
@ -0,0 +1,28 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  }
+);
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,34 @@
+{
+  "name": "vite-react-typescript-starter",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.6.7",
+    "lucide-react": "^0.344.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.1",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^9.9.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.11",
+    "globals": "^15.9.0",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.3.0",
+    "vite": "^5.4.2"
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/src/App.tsx
+++ b/src/App.tsx
@ -0,0 +1,203 @@
+import React, { useState, useEffect } from 'react';
+import ClassSelection from './components/ClassSelection';
+import PetDisplay from './components/PetDisplay';
+import InteractionMenu from './components/InteractionMenu';
+import { Pet, PetClassInfo } from './types/Pet';
+import { fetchPets, createPet } from './services/api/api';
+
+export default function App() {
+  const [pet, setPet] = useState<Pet | null>(null);
+  const [showConfirmation, setShowConfirmation] = useState(false);
+  const [showNameModal, setShowNameModal] = useState(false);
+  const [petName, setPetName] = useState('');
+  const [selectedClass, setSelectedClass] = useState<{ key: string; info: PetClassInfo } | null>(null);
+
+  useEffect(() => {
+    const loadPets = async () => {
+      try {
+        const pets = await fetchPets();
+        if (pets.length > 0) {
+          setPet(pets[0]);
+        }
+      } catch (error) {
+        console.error('Error loading pets:', error);
+      }
+    };
+
+    loadPets();
+  }, []);
+
+  const handleClassSelect = (classKey: string, classInfo: PetClassInfo) => {
+    setSelectedClass({ key: classKey, info: classInfo });
+    setShowConfirmation(true);
+  };
+
+  const handleConfirm = () => {
+    if (!selectedClass) return;
+    setShowConfirmation(false);
+    setShowNameModal(true);
+    setPetName('');
+  };
+
+  const handleNameSubmit = async () => {
+    if (!selectedClass || !petName.trim()) return;
+
+    try {
+      const newPet = await createPet({
+        name: petName.trim(),
+        class: selectedClass.key,
+      });
+      setPet(newPet);
+      setShowNameModal(false);
+    } catch (error) {
+      console.error('Error creating pet:', error);
+    }
+  };
+
+  const handleFeed = () => {
+    if (!pet) return;
+    setPet({
+      ...pet,
+      stats: {
+        ...pet.stats,
+        strength: Math.min(100, pet.stats.strength + 5)
+      },
+      resources: {
+        ...pet.resources,
+        food: Math.max(0, pet.resources.food - 10)
+      }
+    });
+  };
+
+  const handlePlay = () => {
+    if (!pet) return;
+    setPet({
+      ...pet,
+      stats: {
+        ...pet.stats,
+        charisma: Math.min(100, pet.stats.charisma + 5)
+      },
+      resources: {
+        ...pet.resources,
+        wisdom: pet.resources.wisdom + 5
+      }
+    });
+  };
+
+  const handleSleep = () => {
+    if (!pet) return;
+    setPet({
+      ...pet,
+      stats: {
+        intelligence: Math.min(100, pet.stats.intelligence + 5),
+        strength: Math.min(100, pet.stats.strength + 2),
+        charisma: Math.min(100, pet.stats.charisma + 2)
+      }
+    });
+  };
+
+  const handleCustomize = () => {
+    console.log('Customize pet');
+  };
+
+  if (!pet) {
+    return (
+      <div className="min-h-screen bg-gray-900 text-white">
+        {showNameModal && selectedClass ? (
+          <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
+            <div className="bg-gray-800 p-6 rounded-xl max-w-md w-full">
+              <h2 className="text-2xl font-bold mb-2">Name Your Pet</h2>
+              <p className="text-gray-400 mb-6">
+                Creating a new {selectedClass.info.name.toLowerCase()} pet
+              </p>
+              <div className="space-y-4">
+                <div>
+                  <label htmlFor="petName" className="block text-sm font-medium text-gray-300 mb-2">
+                    Pet Name
+                  </label>
+                  <input
+                    type="text"
+                    id="petName"
+                    value={petName}
+                    onChange={(e) => setPetName(e.target.value)}
+                    className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    placeholder="Enter a name for your pet"
+                    autoFocus
+                  />
+                </div>
+                <div className="flex space-x-4">
+                  <button
+                    onClick={handleNameSubmit}
+                    disabled={!petName.trim()}
+                    className={`flex-1 px-4 py-2 rounded-lg ${
+                      petName.trim()
+                        ? 'bg-blue-600 hover:bg-blue-700'
+                        : 'bg-blue-600/50 cursor-not-allowed'
+                    }`}
+                  >
+                    Create Pet
+                  </button>
+                  <button
+                    onClick={() => {
+                      setShowNameModal(false);
+                      setSelectedClass(null);
+                    }}
+                    className="flex-1 px-4 py-2 bg-gray-600 hover:bg-gray-700 rounded-lg"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : showConfirmation && selectedClass ? (
+          <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4">
+            <div className="bg-gray-800 p-6 rounded-xl max-w-md w-full">
+              <h2 className="text-2xl font-bold mb-4">Confirm Selection</h2>
+              <p className="mb-4">Are you sure you want to choose {selectedClass.info.name}?</p>
+              <div className="space-y-2 mb-6">
+                {selectedClass.info.modifiers.map((modifier, index) => (
+                  <div key={index} className="text-sm text-gray-300">• {modifier}</div>
+                ))}
+              </div>
+              <div className="flex space-x-4">
+                <button
+                  onClick={handleConfirm}
+                  className="flex-1 bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded"
+                >
+                  Confirm
+                </button>
+                <button
+                  onClick={() => {
+                    setShowConfirmation(false);
+                    setSelectedClass(null);
+                  }}
+                  className="flex-1 bg-gray-600 hover:bg-gray-700 px-4 py-2 rounded"
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <ClassSelection onSelect={handleClassSelect} />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-white p-4">
+      <div className="max-w-4xl mx-auto grid gap-8">
+        <PetDisplay pet={pet} />
+        <InteractionMenu
+          pet={pet}
+          onFeed={handleFeed}
+          onPlay={handlePlay}
+          onSleep={handleSleep}
+          onCustomize={handleCustomize}
+        />
+      </div>
+    </div>
+  );
+}
--- a/src/components/ClassSelection.tsx
+++ b/src/components/ClassSelection.tsx
@ -0,0 +1,40 @@
+import React from 'react';
+import { PET_CLASSES } from '../data/petClasses';
+import { PetClassInfo } from '../types/Pet';
+
+interface ClassSelectionProps {
+  onSelect: (classKey: string, classInfo: PetClassInfo) => void;
+}
+
+export default function ClassSelection({ onSelect }: ClassSelectionProps) {
+  return (
+    <div className="min-h-screen bg-gray-900 text-white p-8">
+      <h1 className="text-4xl font-bold text-center mb-12">Choose Your Virtual Companion</h1>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
+        {Object.entries(PET_CLASSES).map(([key, classInfo]) => (
+          <button
+            key={key}
+            onClick={() => onSelect(key, classInfo)}
+            className={`bg-${classInfo.color}-900/30 hover:bg-${classInfo.color}-800/50
+              border-2 border-${classInfo.color}-500/50 rounded-lg p-6
+              transition-all duration-300 transform hover:scale-105`}
+          >
+            <div className="text-4xl mb-4">{classInfo.emoji}</div>
+            <h3 className={`text-2xl font-bold text-${classInfo.color}-400 mb-2`}>
+              {classInfo.name}
+            </h3>
+            <p className="text-gray-300 mb-4">{classInfo.description}</p>
+            <div className="space-y-2">
+              {classInfo.modifiers.map((modifier, index) => (
+                <div key={index} className="text-sm text-gray-400 flex items-center">
+                  <span className="mr-2">•</span>
+                  {modifier}
+                </div>
+              ))}
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/src/components/GatherResourcesButton.tsx
+++ b/src/components/GatherResourcesButton.tsx
@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { FeatherIcon as GatherIcon } from 'lucide-react';
+import ResourceSelectionModal from './ResourceSelectionModal';
+import { Pet } from '../types/Pet';
+import { updatePetAction } from '../services/api/api';
+import { PetAction } from '../types/PetUpdateActionRequest';
+
+interface GatherResourcesButtonProps {
+  pet: Pet;
+  onGatherStart: () => void;
+  onGatherComplete: () => void;
+}
+
+const resourceToActionMap: Record<string, PetAction> = {
+  wisdom: 'GATHERING_WISDOM',
+  gold: 'GATHERING_GOLD',
+  food: 'GATHERING_FOOD'
+};
+
+export default function GatherResourcesButton({ pet, onGatherStart, onGatherComplete }: GatherResourcesButtonProps) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isGathering, setIsGathering] = useState(false);
+
+  const handleGatherStart = async (resourceType: string) => {
+    setIsGathering(true);
+    onGatherStart();
+
+    try {
+      const petAction = resourceToActionMap[resourceType];
+      await updatePetAction(pet.id, { petAction });
+      onGatherComplete();
+    } catch (error) {
+      console.error('Failed to gather resources:', error);
+    } finally {
+      setIsGathering(false);
+      setIsModalOpen(false);
+    }
+  };
+
+  return (
+    <>
+      <button
+        onClick={() => setIsModalOpen(true)}
+        disabled={isGathering}
+        className={`flex items-center justify-center space-x-2
+          bg-amber-900/30 hover:bg-amber-800/50
+          border-2 border-amber-500/50 rounded-lg p-4
+          transition-all duration-300 transform hover:scale-105 w-full
+          ${isGathering ? 'opacity-50 cursor-not-allowed' : ''}`}
+      >
+        <GatherIcon className="w-6 h-6" />
+        <span>{isGathering ? 'Gathering...' : 'Gather Resources'}</span>
+      </button>
+
+      <ResourceSelectionModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onGather={handleGatherStart}
+        pet={pet}
+        isGathering={isGathering}
+      />
+    </>
+  );
+}
--- a/src/components/InteractionMenu.tsx
+++ b/src/components/InteractionMenu.tsx
@ -0,0 +1,42 @@
+import React from 'react';
+import { Pizza, PlayCircle, Moon, Paintbrush } from 'lucide-react';
+import GatherResourcesButton from './GatherResourcesButton';
+import { Pet } from '../types/Pet';
+
+interface InteractionMenuProps {
+  pet: Pet;
+  onFeed: () => void;
+  onPlay: () => void;
+  onSleep: () => void;
+  onCustomize: () => void;
+}
+
+export default function InteractionMenu({ pet, onFeed, onPlay, onSleep, onCustomize }: InteractionMenuProps) {
+  const ActionButton = ({ icon: Icon, label, onClick, color }: { icon: any; label: string; onClick: () => void; color: string }) => (
+    <button
+      onClick={onClick}
+      className={`flex items-center justify-center space-x-2 bg-${color}-900/30
+        hover:bg-${color}-800/50 border-2 border-${color}-500/50 rounded-lg p-4
+        transition-all duration-300 transform hover:scale-105 w-full`}
+    >
+      <Icon className="w-6 h-6" />
+      <span>{label}</span>
+    </button>
+  );
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+      <ActionButton icon={Pizza} label="Feed" onClick={onFeed} color="green" />
+      <ActionButton icon={PlayCircle} label="Play" onClick={onPlay} color="blue" />
+      <ActionButton icon={Moon} label="Sleep" onClick={onSleep} color="purple" />
+      <ActionButton icon={Paintbrush} label="Customize" onClick={onCustomize} color="pink" />
+      <div className="col-span-2 md:col-span-3">
+        <GatherResourcesButton
+          pet={pet}
+          onGatherStart={() => console.log('Gathering started')}
+          onGatherComplete={() => console.log('Gathering completed')}
+        />
+      </div>
+    </div>
+  );
+}
--- a/src/components/PetDisplay.tsx
+++ b/src/components/PetDisplay.tsx
@ -0,0 +1,56 @@
+import React from 'react';
+import { Pet } from '../types/Pet';
+import { Brain, Dumbbell, Heart, Sparkles, Coins, Pizza, Trash2 } from 'lucide-react';
+import { PET_CLASSES } from '../data/petClasses';
+
+interface PetDisplayProps {
+  pet: Pet;
+}
+
+export default function PetDisplay({ pet }: PetDisplayProps) {
+  const StatBar = ({ value, label, icon: Icon }: { value: number; label: string; icon: any }) => (
+    <div className="flex items-center space-x-2">
+      <Icon className="w-5 h-5" />
+      <div className="flex-1 bg-gray-700 rounded-full h-4">
+        <div
+          className="bg-blue-500 rounded-full h-4"
+          style={{ width: `${value}%` }}
+        />
+      </div>
+      <span className="text-sm">{value}%</span>
+    </div>
+  );
+
+  const ResourceCounter = ({ value, label, icon: Icon }: { value: number; label: string; icon: any }) => (
+    <div className="flex items-center space-x-2 bg-gray-800 rounded-lg p-2">
+      <Icon className="w-5 h-5" />
+      <span>{label}:</span>
+      <span className="font-bold">{value}</span>
+    </div>
+  );
+
+  return (
+    <div className="bg-gray-900 p-6 rounded-xl">
+      <div className="text-center mb-8">
+        <div className="text-8xl mb-4">{PET_CLASSES[pet.class].emoji}</div>
+        <h2 className="text-2xl font-bold">{pet.name}</h2>
+        <p className={`text-${PET_CLASSES[pet.class].color}-400`}>
+          {PET_CLASSES[pet.class].name}
+        </p>
+      </div>
+
+      <div className="space-y-4 mb-6">
+        <StatBar value={pet.stats.intelligence} label="Intelligence" icon={Brain} />
+        <StatBar value={pet.stats.strength} label="Strength" icon={Dumbbell} />
+        <StatBar value={pet.stats.charisma} label="Charisma" icon={Heart} />
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <ResourceCounter value={pet.resources.wisdom} label="Wisdom" icon={Sparkles} />
+        <ResourceCounter value={pet.resources.gold} label="Gold" icon={Coins} />
+        <ResourceCounter value={pet.resources.food} label="Food" icon={Pizza} />
+        <ResourceCounter value={pet.resources.junk} label="Junk" icon={Trash2} />
+      </div>
+    </div>
+  );
+}
--- a/src/components/ResourceSelectionModal.tsx
+++ b/src/components/ResourceSelectionModal.tsx
@ -0,0 +1,121 @@
+import React from 'react';
+import { Brain, Coins, Pizza, X, Loader2 } from 'lucide-react';
+import { Pet } from '../types/Pet';
+
+interface ResourceSelectionModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onGather: (resourceType: string) => void;
+  pet: Pet;
+  isGathering: boolean;
+}
+
+interface ResourceOption {
+  type: string;
+  name: string;
+  icon: React.ElementType;
+  formula: string;
+  stat: keyof typeof statMultipliers;
+  color: string;
+}
+
+const statMultipliers = {
+  intelligence: 2,
+  strength: 3,
+  charisma: 1.5,
+};
+
+const resourceOptions: ResourceOption[] = [
+  {
+    type: 'wisdom',
+    name: 'Wisdom',
+    icon: Brain,
+    formula: 'Intelligence × 2',
+    stat: 'intelligence',
+    color: 'purple',
+  },
+  {
+    type: 'gold',
+    name: 'Gold',
+    icon: Coins,
+    formula: 'Strength × 3',
+    stat: 'strength',
+    color: 'yellow',
+  },
+  {
+    type: 'food',
+    name: 'Food',
+    icon: Pizza,
+    formula: 'Charisma × 1.5',
+    stat: 'charisma',
+    color: 'green',
+  },
+];
+
+export default function ResourceSelectionModal({
+  isOpen,
+  onClose,
+  onGather,
+  pet,
+  isGathering,
+}: ResourceSelectionModalProps) {
+  if (!isOpen) return null;
+
+  const calculateEstimatedYield = (option: ResourceOption) => {
+    const baseStat = pet.stats[option.stat];
+    const multiplier = statMultipliers[option.stat];
+    return Math.floor(baseStat * multiplier);
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
+      <div className="bg-gray-800 rounded-xl max-w-2xl w-full p-6 relative">
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 text-gray-400 hover:text-white"
+          disabled={isGathering}
+        >
+          <X className="w-6 h-6" />
+        </button>
+
+        <h2 className="text-2xl font-bold mb-6 text-white">Gather Resources</h2>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {resourceOptions.map((option) => (
+            <button
+              key={option.type}
+              onClick={() => onGather(option.type)}
+              disabled={isGathering}
+              className={`bg-gray-700/50 hover:bg-gray-700
+                border-2 border-${option.color}-500/30
+                rounded-lg p-4 transition-all duration-300
+                transform hover:scale-105 text-left
+                ${isGathering ? 'opacity-50 cursor-not-allowed' : ''}`}
+            >
+              <div className="flex items-center space-x-2 mb-2">
+                <option.icon className={`w-6 h-6 text-${option.color}-400`} />
+                <span className="font-semibold text-white">{option.name}</span>
+              </div>
+              <div className="text-sm text-gray-400 mb-2">
+                Formula: {option.formula}
+              </div>
+              <div className="text-sm">
+                Estimated yield per hour:
+                <span className={`ml-2 font-bold text-${option.color}-400`}>
+                  {calculateEstimatedYield(option)}
+                </span>
+              </div>
+            </button>
+          ))}
+        </div>
+
+        {isGathering && (
+          <div className="mt-4 flex items-center justify-center text-blue-400">
+            <Loader2 className="w-6 h-6 animate-spin mr-2" />
+            <span>Gathering resources...</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/src/data/petClasses.ts
+++ b/src/data/petClasses.ts
@ -0,0 +1,81 @@
+import { PetClassInfo } from '../types/Pet';
+
+export const PET_CLASSES: Record<string, PetClassInfo> = {
+  FOREST_SPIRIT: {
+    name: 'Forest Spirit',
+    description: 'A mystical guardian of nature, attuned to the forest\'s wisdom.',
+    modifiers: [
+      '-20% food consumption',
+      '+15% wisdom generation',
+      'Natural healing ability'
+    ],
+    color: 'emerald',
+    emoji: '🌿'
+  },
+  OCEAN_GUARDIAN: {
+    name: 'Ocean Guardian',
+    description: 'A majestic creature of the deep, master of the seas.',
+    modifiers: [
+      '+20% resource gathering',
+      'Water breathing',
+      'Enhanced mobility'
+    ],
+    color: 'cyan',
+    emoji: '🌊'
+  },
+  FIRE_ELEMENTAL: {
+    name: 'Fire Elemental',
+    description: 'A passionate spirit of flame, burning with inner strength.',
+    modifiers: [
+      '+25% strength gains',
+      'Fire resistance',
+      'Heat generation'
+    ],
+    color: 'red',
+    emoji: '🔥'
+  },
+  MYTHICAL_BEAST: {
+    name: 'Mythical Beast',
+    description: 'A legendary creature of ancient lore.',
+    modifiers: [
+      '+30% charisma',
+      'Rare item finding',
+      'Enhanced abilities at night'
+    ],
+    color: 'purple',
+    emoji: '🦄'
+  },
+  SHADOW_WALKER: {
+    name: 'Shadow Walker',
+    description: 'A mysterious being that moves between light and darkness.',
+    modifiers: [
+      'Stealth abilities',
+      '+25% junk value',
+      'Night vision'
+    ],
+    color: 'violet',
+    emoji: '👻'
+  },
+  CYBER_PET: {
+    name: 'Cyber Pet',
+    description: 'A digital companion from the future.',
+    modifiers: [
+      '+30% intelligence growth',
+      'Digital interface',
+      'Quick processing'
+    ],
+    color: 'blue',
+    emoji: '🤖'
+  },
+  BIO_MECHANICAL: {
+    name: 'Bio-Mechanical Hybrid',
+    description: 'A perfect fusion of organic life and advanced technology.',
+    modifiers: [
+      'Self-repair capability',
+      '+20% all stats',
+      'Resource optimization'
+    ],
+    color: 'teal',
+    emoji: '🦾'
+  }
+};
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/src/main.tsx
+++ b/src/main.tsx
@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
--- a/src/services/api/api.ts
+++ b/src/services/api/api.ts
@ -0,0 +1,37 @@
+import { ApiService } from './index';
+import { Pet } from '../../types/Pet';
+import { PetCreationRequest } from '../../types/PetCreationRequest';
+import { PetUpdateActionRequest } from '../../types/PetUpdateActionRequest';
+
+// Get API service instance
+const api = ApiService.getInstance();
+
+export async function fetchPets(): Promise<Pet[]> {
+  try {
+    const response = await api.get<Pet[]>('/api/v1/pet');
+    return response.data;
+  } catch (error: any) {
+    console.error('Failed to fetch pets:', error.message);
+    throw error;
+  }
+}
+
+export async function createPet(data: PetCreationRequest): Promise<Pet> {
+  try {
+    const response = await api.post<Pet>('/api/v1/pet', data);
+    return response.data;
+  } catch (error: any) {
+    console.error('Failed to create pet:', error.message);
+    throw error;
+  }
+}
+
+export async function updatePetAction(petId: string, data: PetUpdateActionRequest): Promise<Pet> {
+  try {
+    const response = await api.put<Pet>(`/api/v1/pet/${petId}/action`, data);
+    return response.data;
+  } catch (error: any) {
+    console.error('Failed to update pet action:', error.message);
+    throw error;
+  }
+}
--- a/src/services/api/config.ts
+++ b/src/services/api/config.ts
@ -0,0 +1,14 @@
+import { ApiConfig } from './types';
+
+// API configuration
+export const apiConfig: ApiConfig = {
+  baseURL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:5278',
+  timeout: 10000, // 10 seconds
+  headers: {
+    'Content-Type': 'application/json',
+    'Accept': 'application/json',
+    'Access-Control-Allow-Origin': '*',
+    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+    'Access-Control-Allow-Headers': 'Content-Type, Authorization'
+  },
+};
--- a/src/services/api/error.ts
+++ b/src/services/api/error.ts
@ -0,0 +1,52 @@
+import { AxiosError } from 'axios';
+import { ApiError } from './types';
+
+export class ApiErrorHandler {
+  static handle(error: AxiosError): ApiError {
+    if (error.response) {
+      // Server responded with a status code outside of 2xx range
+      return {
+        message: error.response.data?.message || 'Server error occurred',
+        code: 'SERVER_ERROR',
+        status: error.response.status,
+        details: error.response.data,
+      };
+    } else if (error.request) {
+      // Request was made but no response received
+      return {
+        message: 'No response received from server',
+        code: 'NETWORK_ERROR',
+        status: 0,
+        details: {
+          request: error.request,
+        },
+      };
+    } else {
+      // Error occurred while setting up the request
+      return {
+        message: error.message || 'An error occurred while making the request',
+        code: 'REQUEST_SETUP_ERROR',
+        status: 0,
+        details: {
+          config: error.config,
+        },
+      };
+    }
+  }
+
+  static isNetworkError(error: ApiError): boolean {
+    return error.code === 'NETWORK_ERROR';
+  }
+
+  static isTimeoutError(error: ApiError): boolean {
+    return error.message.toLowerCase().includes('timeout');
+  }
+
+  static isServerError(error: ApiError): boolean {
+    return error.status >= 500;
+  }
+
+  static isClientError(error: ApiError): boolean {
+    return error.status >= 400 && error.status < 500;
+  }
+}
--- a/src/services/api/examples.ts
+++ b/src/services/api/examples.ts
@ -0,0 +1,45 @@
+// Example usage of the API service
+import { ApiService } from './index';
+import { Pet } from '../../types/Pet';
+
+// Get API service instance
+const api = ApiService.getInstance();
+
+// Example functions using the API service
+export async function getPet(id: string) {
+  try {
+    const response = await api.get<Pet>(`/pets/${id}`);
+    return response.data;
+  } catch (error: any) {
+    if (api.isNetworkError(error)) {
+      console.error('Network error occurred');
+    } else if (api.isTimeoutError(error)) {
+      console.error('Request timed out');
+    } else if (api.isServerError(error)) {
+      console.error('Server error occurred');
+    }
+    throw error;
+  }
+}
+
+export async function updatePet(id: string, data: Partial<Pet>) {
+  try {
+    const response = await api.put<Pet>(`/pets/${id}`, data);
+    return response.data;
+  } catch (error: any) {
+    console.error('Failed to update pet:', error.message);
+    throw error;
+  }
+}
+
+export async function gatherResources(id: string, resourceType: string) {
+  try {
+    const response = await api.post<{ success: boolean }>(`/pets/${id}/gather`, {
+      resourceType,
+    });
+    return response.data;
+  } catch (error: any) {
+    console.error('Failed to gather resources:', error.message);
+    throw error;
+  }
+}
--- a/src/services/api/index.ts
+++ b/src/services/api/index.ts
@ -0,0 +1,90 @@
+import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';
+import { apiConfig } from './config';
+import { setupInterceptors } from './interceptors';
+import { ApiErrorHandler } from './error';
+import { ApiResponse, RequestOptions, ApiError } from './types';
+
+class ApiService {
+  private static instance: ApiService;
+  private axios: AxiosInstance;
+
+  private constructor() {
+    // Create axios instance with base configuration
+    this.axios = axios.create(apiConfig);
+    
+    // Setup interceptors
+    setupInterceptors(this.axios);
+  }
+
+  public static getInstance(): ApiService {
+    if (!ApiService.instance) {
+      ApiService.instance = new ApiService();
+    }
+    return ApiService.instance;
+  }
+
+  private async request<T>(
+    method: string,
+    url: string,
+    data?: any,
+    options: RequestOptions = {}
+  ): Promise<ApiResponse<T>> {
+    try {
+      const config: AxiosRequestConfig = {
+        method,
+        url,
+        ...options,
+      };
+
+      if (data) {
+        config.data = data;
+      }
+
+      const response = await this.axios.request<T>(config);
+
+      return {
+        data: response.data,
+        status: response.status,
+        statusText: response.statusText,
+        headers: response.headers as Record<string, string>,
+      };
+    } catch (error) {
+      throw ApiErrorHandler.handle(error as any);
+    }
+  }
+
+  public async get<T>(url: string, options?: RequestOptions): Promise<ApiResponse<T>> {
+    return this.request<T>('GET', url, undefined, options);
+  }
+
+  public async post<T>(url: string, data?: any, options?: RequestOptions): Promise<ApiResponse<T>> {
+    return this.request<T>('POST', url, data, options);
+  }
+
+  public async put<T>(url: string, data?: any, options?: RequestOptions): Promise<ApiResponse<T>> {
+    return this.request<T>('PUT', url, data, options);
+  }
+
+  public async delete<T>(url: string, options?: RequestOptions): Promise<ApiResponse<T>> {
+    return this.request<T>('DELETE', url, undefined, options);
+  }
+
+  // Utility method to check if an error is a specific type
+  public isNetworkError(error: ApiError): boolean {
+    return ApiErrorHandler.isNetworkError(error);
+  }
+
+  public isTimeoutError(error: ApiError): boolean {
+    return ApiErrorHandler.isTimeoutError(error);
+  }
+
+  public isServerError(error: ApiError): boolean {
+    return ApiErrorHandler.isServerError(error);
+  }
+
+  public isClientError(error: ApiError): boolean {
+    return ApiErrorHandler.isClientError(error);
+  }
+}
+
+export { ApiService }
--- a/src/services/api/interceptors.ts
+++ b/src/services/api/interceptors.ts
@ -0,0 +1,66 @@
+import { AxiosInstance } from 'axios';
+import { ApiError } from './types';
+
+export function setupInterceptors(axiosInstance: AxiosInstance) {
+  // Request interceptor
+  axiosInstance.interceptors.request.use(
+    (config) => {
+      // Get token from storage
+      const token = localStorage.getItem('auth_token');
+      
+      // Add authorization header if token exists
+      if (token) {
+        config.headers.Authorization = `Bearer ${token}`;
+      }
+
+      // Log request (development only)
+      if (import.meta.env.DEV) {
+        console.log(`🚀 [API] ${config.method?.toUpperCase()} ${config.url}`, {
+          data: config.data,
+          params: config.params,
+        });
+      }
+
+      return config;
+    },
+    (error) => {
+      // Log request error (development only)
+      if (import.meta.env.DEV) {
+        console.error('❌ [API] Request Error:', error);
+      }
+      return Promise.reject(error);
+    }
+  );
+
+  // Response interceptor
+  axiosInstance.interceptors.response.use(
+    (response) => {
+      // Log response (development only)
+      if (import.meta.env.DEV) {
+        console.log(`✅ [API] Response:`, {
+          status: response.status,
+          data: response.data,
+        });
+      }
+
+      return response;
+    },
+    (error) => {
+      // Log response error (development only)
+      if (import.meta.env.DEV) {
+        console.error('❌ [API] Response Error:', error.response || error);
+      }
+
+      // Handle authentication errors
+      if (error.response?.status === 401) {
+        // Clear token and redirect to login
+        localStorage.removeItem('auth_token');
+        window.location.href = '/login';
+      }
+
+      return Promise.reject(error);
+    }
+  );
+
+  return axiosInstance;
+}
--- a/src/services/api/types.ts
+++ b/src/services/api/types.ts
@ -0,0 +1,32 @@
+// HTTP Methods supported by the API
+export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
+
+// Standard API Response interface
+export interface ApiResponse<T = any> {
+  data: T;
+  status: number;
+  statusText: string;
+  headers: Record<string, string>;
+}
+
+// Standard API Error interface
+export interface ApiError {
+  message: string;
+  code: string;
+  status: number;
+  details?: Record<string, any>;
+}
+
+// API Configuration interface
+export interface ApiConfig {
+  baseURL: string;
+  timeout: number;
+  headers?: Record<string, string>;
+}
+
+// Request options interface
+export interface RequestOptions {
+  headers?: Record<string, string>;
+  params?: Record<string, any>;
+  timeout?: number;
+}
--- a/src/types/Pet.ts
+++ b/src/types/Pet.ts
@ -0,0 +1,31 @@
+export type PetClass = 'FOREST_SPIRIT' | 'OCEAN_GUARDIAN' | 'FIRE_ELEMENTAL' | 'MYTHICAL_BEAST' | 'SHADOW_WALKER' | 'CYBER_PET' | 'BIO_MECHANICAL';
+
+export interface PetStats {
+  intelligence: number;
+  strength: number;
+  charisma: number;
+}
+
+export interface Resources {
+  wisdom: number;
+  gold: number;
+  food: number;
+  junk: number;
+}
+
+export interface Pet {
+  id: string;
+  name: string;
+  class: PetClass;
+  stats: PetStats;
+  resources: Resources;
+  level: number;
+}
+
+export interface PetClassInfo {
+  name: string;
+  description: string;
+  modifiers: string[];
+  color: string;
+  emoji: string;
+}
--- a/src/types/PetCreationRequest.ts
+++ b/src/types/PetCreationRequest.ts
@ -0,0 +1,6 @@
+import { PetClass } from "./Pet";
+
+export interface PetCrationRequest {
+  name: string;
+  class: PetClass;
+}
--- a/src/types/PetUpdateActionRequest.ts
+++ b/src/types/PetUpdateActionRequest.ts
@ -0,0 +1,5 @@
+export type PetAction = 'IDLE' | 'GATHERING_WISDOM' | 'GATHERING_GOLD' | 'GATHERING_FOOD';
+
+export interface PetUpdateActionRequest {
+    petAction: PetAction;
+}
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
--- a/tsconfig.app.json
+++ b/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"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/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"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  optimizeDeps: {
+    exclude: ['lucide-react'],
+  },
+});