🎨 Simple Frontend Test

Modern React application demonstrating ball animation with dynamic color changes.

🚀 Technologies

• React 19 - Latest React version with new features
• Vite - Fast build tool for modern development
• Stitches - CSS-in-JS library for styling
• React Query (TanStack Query) - Server state management
• Zustand - Lightweight state management with persistence
• ky - Modern HTTP client library
• pnpm - Fast and efficient package manager

✨ Features

• 400x200px container with centered positioning
• Responsive design for mobile devices
• Smooth ball animation moving around container corners
• Dynamic random color fetching via API
• Fallback colors when API is unavailable
• Preloading next color for optimization
• Current step indicator
• Particle effects and modern animations
• Beautiful hover effects and transitions
• State persistence across page reloads
• Reset functionality

🎯 Requirements

• Node.js 18+
• pnpm

🛠 Installation and Setup

# Install dependencies
pnpm install

# Run in development mode
pnpm run dev

# Build for production
pnpm run build

# Preview production build
pnpm run preview

📱 Usage

1. Open the application in your browser
2. Click on the container to start the animation
3. The ball will move around corners clockwise
4. Each click changes the ball color to a random one
5. After 4 clicks, the animation returns to the initial state

🏗 Architecture

• src/components/BallContainer.jsx - Main component with animation logic
• src/services/api.js - API service using ky
• src/hooks/useColorQuery.js - Custom React Query hooks
• src/store/ballStore.js - Zustand store with persistence
• src/styles/ - Organized styling files
  • animations.js - Modern CSS animations
  • components.js - Component styles
  • layout.js - Layout and global styles
• src/stitches.config.js - Stitches configuration

🎨 Implementation Highlights

• Modern React patterns
• Performance optimization with React Query
• Beautiful animations with CSS keyframes
• Error handling and fallback mechanisms
• Responsive design
• Modern tech stack
• Smooth transitions and hover effects
• State persistence with Zustand
• Clean architecture and separation of concerns