{"id":30196322,"url":"https://github.com/kevinthulnith/multi-stage-react-project","last_synced_at":"2026-04-14T05:33:01.156Z","repository":{"id":307017550,"uuid":"1026378736","full_name":"kevinThulnith/multi-stage-react-project","owner":"kevinThulnith","description":"Muti stage Vite | React | Tailwind project with docker and SSR - server side rendering intergrated with Gemini ✨ by Google ","archived":false,"fork":false,"pushed_at":"2025-08-06T17:51:51.000Z","size":383,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-06T19:29:07.907Z","etag":null,"topics":["docker","games-website","gemini","node-js","npm","reactjs","server-side-redering","tailwind","typescript","vercel-deployment","vitejs","webapp"],"latest_commit_sha":null,"homepage":"https://multi-stage-react-project.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kevinThulnith.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-25T19:31:11.000Z","updated_at":"2025-08-03T01:30:42.000Z","dependencies_parsed_at":"2025-07-29T02:30:22.420Z","dependency_job_id":null,"html_url":"https://github.com/kevinThulnith/multi-stage-react-project","commit_stats":null,"previous_names":["kevinthulnith/multi-stage-react-project"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kevinThulnith/multi-stage-react-project","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinThulnith%2Fmulti-stage-react-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinThulnith%2Fmulti-stage-react-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinThulnith%2Fmulti-stage-react-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinThulnith%2Fmulti-stage-react-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kevinThulnith","download_url":"https://codeload.github.com/kevinThulnith/multi-stage-react-project/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinThulnith%2Fmulti-stage-react-project/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270183606,"owners_count":24541341,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-13T02:00:09.904Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["docker","games-website","gemini","node-js","npm","reactjs","server-side-redering","tailwind","typescript","vercel-deployment","vitejs","webapp"],"created_at":"2025-08-13T05:17:57.343Z","updated_at":"2026-04-14T05:33:01.149Z","avatar_url":"https://github.com/kevinThulnith.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![NodeJS](https://img.shields.io/badge/Node.js-6DA55F?logo=node.js\u0026logoColor=white)](#)\n[![Vite](https://img.shields.io/badge/Vite-646CFF?logo=vite\u0026logoColor=fff)](#)\n[![React](https://img.shields.io/badge/React-%2320232a.svg?logo=react\u0026logoColor=%2361DAFB)](#)\n[![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?logo=typescript\u0026logoColor=white)](#)\n[![Tailwind](https://img.shields.io/badge/Tailwind_CSS-38B2AC?logo=tailwind-css\u0026logoColor=white)](#)\n[![Vercel](https://img.shields.io/badge/Vercel-000000?logo=vercel\u0026logoColor=white)](#)\n[![Docker](https://img.shields.io/badge/Docker-2496ED?logo=docker\u0026logoColor=white)](#)\n![Nginx](https://img.shields.io/badge/Nginx-009639?logo=nginx\u0026logoColor=white)\n![Google Gemini](https://img.shields.io/badge/Google%20Gemini-8E75B2?logo=google%20gemini\u0026logoColor=white)\n\n# Game Cave 🎮\n\nA collection of classic game projects developed with **Vite | React | Tailwind CSS and TypeScript** with **Server-Side Rendering (SSR)** and **Google Gemini AI Integration**. 🚀 **[Live Demo on Vercel](https://multi-stage-react-project.vercel.app/)** | 📱 **Mobile Friendly** | ⚡ **Lightning Fast** | 🐳 **Docker Ready** | 🔄 **SSR Enabled** | 🤖 **AI-Powered Features**\n\n\u003cimg src=\"face.png\"\u003e\n\n---\n\n## 🎯 Featured Games\n\n\u003cdiv align=\"center\"\u003e\n\n| 🧱 **Classic Arcade** | 🧩 **Strategy \u0026 Logic** |   🎲 **Casual Fun**    |\n| :-------------------: | :---------------------: | :--------------------: |\n|   🧱 Brick Breaker    |     🔴 Connect Four     |   🎯 Number Guesser    |\n|       🐍 Snake        |     🎯 Tic Tac Toe      | 🪨 Rock Paper Scissors |\n|        🏓 Pong        |     💣 Minesweeper      |    🔤 Word Scramble    |\n|                       |     🧠 Memory Match     |     ⚡ Typing Test     |\n|                       |       🎪 Hangman        |                        |\n\n\u003c/div\u003e\n\n### 🌟 Game Highlights\n\n- **🧱 Brick Breaker** - Classic arcade action with paddle and ball physics\n- **🐍 Snake** - Navigate the snake to collect food and grow longer\n- **🔴 Connect Four** - Strategic gameplay to connect four pieces in a row\n- **💣 Minesweeper** - Clear the minefield using logic and deduction\n- **🧠 Memory Match** - Test your memory with card matching gameplay\n- **🏓 Pong** - The original tennis-style arcade game\n- **🎯 Tic Tac Toe** - Classic 3x3 grid strategy game\n- **🎪 Hangman** - Guess the word before the drawing is complete\n- **🎯 Number Guesser** - Challenge your intuition with number guessing\n- **🪨 Rock Paper Scissors** - The timeless hand game\n- **⚡ Typing Test** - Improve your typing speed and accuracy\n- **🔤 Word Scramble** - Unscramble letters to form words\n\n### 🤖 AI-Enhanced Features\n\nExperience the power of **Google Gemini AI** integrated into select games:\n\n- **🎪 Hangman** - AI generates dynamic word hints and contextual clues\n- **🔤 Word Scramble** - Smart difficulty adjustment and AI-powered word generation\n- **🎯 Tic Tac Toe** - AI opponent with adaptive difficulty levels\n- **🧠 Memory Match** - Intelligent pattern analysis and performance insights\n- **⚡ Typing Test** - AI-curated text content and personalized improvement suggestions\n\n\u003e **💡 Pro Tip:** Set up your Gemini API key to unlock these enhanced AI features! The games work perfectly without it, but AI features add an extra layer of intelligence and personalization.\n\n---\n\n## ✨ Key Features\n\n- 🎮 **12 Classic Games** - A diverse collection of timeless games\n- 🤖 **AI-Powered Features** - Enhanced gameplay with Google Gemini AI integration\n- 📱 **Responsive Design** - Perfect on desktop, tablet, and mobile\n- ⚡ **Lightning Fast** - Built with Vite for optimal performance\n- 🎨 **Modern UI** - Clean, intuitive interface with TailwindCSS\n- 🔧 **Type Safe** - Written in TypeScript for reliability\n- 🔄 **Server-Side Rendering (SSR)** - Faster initial page loads and better SEO\n- 🐳 **Docker Ready** - Containerized deployment for any environment\n- 🌐 **Nginx-Optimized Builds** - Production images served behind Nginx\n- 🌐 **Multi-Platform Deploy** - Vercel, Docker, or cloud platforms\n- 🎯 **PWA Ready** - Can be installed as a Progressive Web App\n- 🔄 **State Management** - Smooth game state handling\n- 🎵 **Sound Effects** - Immersive audio feedback (coming soon)\n- 🏆 **Score Tracking** - Keep track of your best performances\n\n---\n\n## 🚀 Quick Start\n\nChoose your preferred setup method:\n\n### 🏃‍♂️ **Local Development** (Recommended for development)\n\n- Standard npm setup with hot reload\n- Perfect for development and customization\n\n### 🐳 **Docker Deployment** (Recommended for consistency)\n\n- Containerized environment\n- Works identically across all platforms\n- Great for teams and production\n\n### 🌐 **Cloud Deployment** (Recommended for production)\n\n- One-click deploy to Vercel\n- Instant global CDN distribution\n\n---\n\n### 📦 Installation\n\n1. **Clone the repository:**\n\n   ```bash\n   git clone https://github.com/kevinThulnith/multi-stage-react-project.git\n   ```\n\n2. **Navigate to the project directory:**\n\n   ```bash\n   cd multi-stage-react-project\n   ```\n\n3. **Install dependencies:**\n\n   ```bash\n   npm i\n   ```\n\n4. **Set up environment variables (required for AI features):**\n\n   Create a `.env` file in the root directory:\n\n   ```bash\n   # In the root directory\n   touch .env\n   ```\n\n   Add the following environment variables to your `.env` file:\n\n   ```env\n   # Required: Gemini API Key for AI-powered game features\n   VITE_GEMINI_API_KEY=your_gemini_api_key_here\n   ```\n\n   \u003e **Note:** The VITE_GEMINI_API_KEY is now actively used in some games for AI-powered features. You can obtain a free API key from [Google AI Studio](https://aistudio.google.com/app/apikey). While the games will still function without the API key, some AI-enhanced features will be disabled.\n\n \u003cbr\u003e\n\n### 🎮 Running the Games\n\n#### Development Mode\n\n```bash\nnpm run dev\n\n// On local Network\nnpx vite --host {Device Ip Address}\n```\n\n- Starts the development server at `http://localhost:5173/`\\_\n\n#### Production Build\n\n```bash\nnpm run build\n```\n\n- Creates an optimized production build with SSR support\\_\n\n#### Server-Side Rendering (SSR) Mode\n\n```bash\nnpm run serve\n```\n\n- Runs the production build with SSR for better SEO and faster initial loads\\_\n\n#### Preview Build\n\n```bash\nnpm run preview\n```\n\n- Preview the production build locally\\_\n\n#### Network Access - Run on your local network for testing on multiple devices\\_\n\n```bash\nnpm run host\n```\n\n---\n\n## 🌐 Deployment\n\n### Deploy to Vercel\n\nThe easiest way to deploy your Game Cave is using [Vercel](https://vercel.com/):\n\n1. **One-Click Deploy:**\n\n   [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/kevinThulnith/game-cave)\n\n2. **Manual Deployment:**\n\n   ```bash\n   # Install Vercel CLI\n   npm i -g vercel\n\n   # Deploy from the root directory\n   cd multi-stage-react-project\n   vercel\n   ```\n\n3. **GitHub Integration:**\n   - Connect your repository to Vercel\n   - Automatic deployments on every push to main branch\n   - Preview deployments for pull requests\n\n### Build Configuration\n\nFor Vercel deployment, make sure your build settings are:\n\n- **Build Command:** `npm run build`\n- **Output Directory:** `dist`\n- **Install Command:** `npm install`\n- **Root Directory:** `multi-stage-react-project`\n\n### Environment Variables\n\nFor enhanced AI-powered gameplay features, you'll need to set up the Gemini API key. While basic gameplay works without it, some games include AI-enhanced features that require this configuration.\n\n1. **Create a `.env` file in the root directory:**\n\n   ```bash\n   touch .env  # On Windows: type nul \u003e .env\n   ```\n\n2. **Add the following variables:**\n\n   ```env\n   # Required for AI-powered game features\n   VITE_GEMINI_API_KEY=your_gemini_api_key_here\n   ```\n\n3. **Get your Gemini API Key:**\n\n   - Visit [Google AI Studio](https://aistudio.google.com/app/apikey)\n   - Create a new API key\n   - Replace `your_gemini_api_key_here` with your actual key\n\n4. **For Vercel deployment:**\n   - Go to your Vercel project dashboard\n   - Navigate to Settings \u003e Environment Variables\n   - Add `VITE_GEMINI_API_KEY` with your API key value\n\n\u003e **Important:** Never commit your `.env` file to version control. The `.env` file is already included in `.gitignore` for your security.\n\n---\n\n## 🐳 Docker Deployment\n\nContainerize Game Cave with Docker for consistent deployment across any environment! Perfect for development, testing, and production deployments.\n\n### 📋 Prerequisites\n\nEnsure Docker is installed on your system:\n\n```bash\n# Check if Docker is installed\ndocker --version\n\n# Check if Docker Compose is available\ndocker compose version\n```\n\n\u003e **Need Docker?** Download from [docker.com](https://www.docker.com/products/docker-desktop) - Available for Windows, macOS, and Linux\n\n### 🚀 Quick Start with Docker\n\n#### Method 1: Direct Docker Build \u0026 Run\n\n1. **Navigate to the project directory:**\n\n   ```bash\n   cd multi-stage-react-project\n   ```\n\n2. **Build the Docker image:**\n\n   ```bash\n   # Basic build (without AI features)\n   docker build -t game-cave:dev .\n\n   # Build with Gemini API key for AI-powered features\n   docker build --build-arg VITE_GEMINI_API_KEY=your_gemini_api_key_here -t game-cave:dev .\n   ```\n\n   \u003e **Note:** Using `--build-arg VITE_GEMINI_API_KEY` passes the API key as a build argument to enable AI-powered features in games like Hangman, Word Scramble, and Tic Tac Toe. Replace `your_gemini_api_key_here` with your actual Gemini API key from [Google AI Studio](https://aistudio.google.com/app/apikey).\n\n3. **Verify the image was created:**\n\n   ```bash\n   docker images | grep game-cave\n   ```\n\n4. **Run the container:**\n\n   ```bash\n   # Run created docker image\n   docker run -p 5173:5173 game-cave:dev\n\n   # Run created docker image as background process\n   docker run -d -p 5173:5173 game-cave:dev\n\n   # Run created docker image with custome container name\n   docker run -p 5173:5173 --name game-cave-dev game-cave:dev\n   ```\n\n5. **Access your games:**\n   - 🌐 **Local:** http://localhost:5173\n   - 📱 **Network:** http://your-ip-address:5173\n\n#### Method 2: Docker Compose (Recommended)\n\n```bash\n# Navigate to project directory\ncd multi-stage-react-project\n\n# Start the application with Docker Compose\ndocker compose up -d\n\n# View logs\ndocker compose logs -f\n\n# Stop the application\ndocker compose down\n\nOn the `docker` branch, Compose exposes Nginx on port 5173 by default for a static SPA build. On the `docker+ssr` branch, Compose starts both the SSR Node app and Nginx, with Nginx reverse‑proxying traffic to the app (typically on port 3000) and serving static assets directly for optimal performance.\n```\n\n### 🛠️ Docker Commands Cheat Sheet\n\n| Command                                                                    | Description             |\n| -------------------------------------------------------------------------- | ----------------------- |\n| `docker build -t game-cave:dev .`                                          | Build development image |\n| `docker build --build-arg VITE_GEMINI_API_KEY=your_key -t game-cave:dev .` | Build with AI features  |\n| `docker run -p 5173:5173 game-cave:dev`                                    | Run dev container       |\n| `docker run -p 5173:5173 game-cave:prod`                                   | Run prod (Nginx static) |\n| `docker run -p 5173:5173 game-cave:ssr`                                    | Run prod (Nginx + SSR)  |\n| `docker ps`                                                                | List running containers |\n| `docker stop game-cave-dev`                                                | Stop container          |\n| `docker rm game-cave-dev`                                                  | Remove container        |\n| `docker rmi game-cave:dev`                                                 | Remove image            |\n| `docker logs game-cave-dev`                                                | View container logs     |\n\n### 🔧 Advanced Configuration\n\n#### Environment Variables\n\n```bash\n# Run with custom environment variables\ndocker run -p 5173:5173 \\\n  -e NODE_ENV=development \\\n  -e VITE_API_URL=http://localhost:3000 \\\n  --name game-cave-dev \\\n  game-cave:dev\n```\n\n#### Volume Mounting for Development\n\n```bash\n# Mount source code for hot reload during development\ndocker run -p 5173:5173 \\\n  -v \"$(pwd):/app\" \\\n  -v /app/node_modules \\\n  --name game-cave-dev \\\n  game-cave:dev\n```\n\n#### Multi-Stage Production Build\n\n```dockerfile\n# Example production Dockerfile (Dockerfile.prod)\nFROM node:22-alpine AS builder\nWORKDIR /app\nCOPY package*.json ./\nRUN npm ci --only=production\nCOPY . .\nRUN npm run build\n\nFROM nginx:alpine AS production\nCOPY --from=builder /app/dist /usr/share/nginx/html\nCOPY nginx.conf /etc/nginx/nginx.conf\nEXPOSE 80\nCMD [\"nginx\", \"-g\", \"daemon off;\"]\n```\n\nFor SSR, Nginx acts as a reverse proxy to the Node server and may also serve static assets directly. Example (simplified):\n\n```nginx\n# Example nginx.conf (docker+ssr branch)\nworker_processes auto;\nevents { worker_connections 1024; }\nhttp {\n   include       /etc/nginx/mime.types;\n   sendfile      on;\n   gzip          on;\n   gzip_types    text/plain application/javascript text/css application/json image/svg+xml;\n\n   upstream app {\n      server 127.0.0.1:3000; # Node SSR server\n   }\n\n   server {\n      listen 80;\n      server_name _;\n\n      # Serve built assets directly if desired\n      location /assets/ {\n         root /usr/share/nginx/html;\n         access_log off;\n         expires 1y;\n         add_header Cache-Control \"public, max-age=31536000, immutable\";\n      }\n\n      # Proxy everything else to SSR\n      location / {\n         proxy_pass         http://app;\n         proxy_http_version 1.1;\n         proxy_set_header   Upgrade $http_upgrade;\n         proxy_set_header   Connection \"upgrade\";\n         proxy_set_header   Host $host;\n         proxy_set_header   X-Forwarded-Proto $scheme;\n         proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;\n      }\n   }\n}\n```\n\n### 🌐 Network Access \u0026 Mobile Testing\n\n```bash\n# Run on all interfaces for network access\ndocker run -p 0.0.0.0:5173:5173 --name game-cave-dev game-cave:dev\n\n# Find your IP address\n\n# Windows PowerShell:\nipconfig | findstr IPv4\n\n# macOS/Linux:\nifconfig | grep inet\n```\n\nNow you can test on mobile devices using `http://your-ip:5173`\n\nFor Nginx-based production images (docker or docker+ssr branches), map port 5173 and test via `http://your-ip/`.\n\n### 🐛 Troubleshooting\n\n#### Common Issues \u0026 Solutions\n\n| Issue                 | Solution                                                        |\n| --------------------- | --------------------------------------------------------------- |\n| Port already in use   | Use different port: `-p 3000:5173`                              |\n| Permission denied     | Run with `sudo` (Linux/macOS) or check Docker Desktop (Windows) |\n| Image not found       | Rebuild image: `docker build -t game-cave:dev .`                |\n| Container won't start | Check logs: `docker logs game-cave-dev`                         |\n\n#### Clean Slate Reset\n\n```bash\n# Stop and remove all Game Cave containers\ndocker stop $(docker ps -q --filter ancestor=game-cave:dev)\ndocker rm $(docker ps -aq --filter ancestor=game-cave:dev)\n\n# Remove all Game Cave images\ndocker rmi $(docker images game-cave -q)\n\n# Clean up unused Docker resources\ndocker system prune -af\n```\n\n### 🚢 Production Deployment\n\n#### Docker Hub Deployment\n\n```bash\n# Tag your image\ndocker tag game-cave:dev yourusername/game-cave:latest\n\n# Push to Docker Hub\ndocker push yourusername/game-cave:latest\n\n# Deploy anywhere\ndocker run -p 80:80 yourusername/game-cave:latest\n```\n\n#### Cloud Deployment Options\n\n- **🌊 DigitalOcean App Platform** - One-click Docker deployment\n- **☁️ AWS ECS/Fargate** - Scalable container orchestration\n- **🔵 Azure Container Instances** - Serverless containers\n- **🌐 Google Cloud Run** - Pay-per-use container platform\n\n### 📊 Container Health \u0026 Monitoring\n\n```bash\n# Monitor container resources\ndocker stats game-cave-dev\n\n# Health check\ndocker exec game-cave-dev curl -f http://localhost:5173 || exit 1\n\n# Container shell access\ndocker exec -it game-cave-dev sh\n```\n\n### 🎯 Why Docker for Game Cave?\n\n- ✅ **Consistent Environment** - Same setup across all machines\n- ✅ **Quick Setup** - Get running in minutes, not hours\n- ✅ **Isolated Dependencies** - No conflicts with system packages\n- ✅ **Easy Cleanup** - Remove everything with one command\n- ✅ **Production Ready** - Scale from dev to production seamlessly\n- ✅ **Team Collaboration** - Everyone runs the same environment\n\n---\n\n## 🛠️ Tech Stack\n\n### Frontend Technologies\n\n- **⚛️ React 19** - Modern UI library with hooks and functional components\n- **📘 TypeScript** - Type-safe JavaScript for better development experience\n- **⚡ Vite** - Lightning-fast build tool and development server with SSR support\n- **🎨 TailwindCSS** - Utility-first CSS framework for rapid UI development\n- **🔧 ESLint** - Code linting for maintaining code quality\n- **🔄 Express.js** - Server-side rendering and API handling\n\n### AI \u0026 Intelligence\n\n- **🤖 Google Gemini AI** - Advanced AI integration for enhanced gameplay features\n- **🧠 Smart Game Logic** - AI-powered hints, difficulty adjustment, and content generation\n- **📊 Intelligent Analytics** - AI-driven performance insights and personalized recommendations\n\n### Deployment \u0026 DevOps\n\n- **🐳 Docker** - Containerization for consistent deployments\n- **🌐 Vercel** - Serverless deployment platform\n- **☁️ Multi-Cloud Ready** - AWS, Azure, Google Cloud, DigitalOcean\n\n---\n\n## 🌳 Development Branches\n\nThis repository contains multiple branches representing different development stages and feature implementations:\n\n### 📋 Branch Overview\n\n| Branch                             | Description                          | Status    | Features                                                        |\n| ---------------------------------- | ------------------------------------ | --------- | --------------------------------------------------------------- |\n| 🌟 **`main`**                      | Production-ready version             | ✅ Active | Full game collection with modern React setup                    |\n| 🐳 **`docker`**                    | Docker containerization              | ✅ Active | Docker + Nginx static serving for production                    |\n| 🔄 **`SSR-Server-Side-Rendering`** | Server-side rendering implementation | ✅ Active | Enhanced SEO and faster initial loads                           |\n| 🚀 **`docker+ssr`**                | Combined SSR and Docker              | ✅ Active | Nginx reverse proxy + Node SSR, optimized static asset handling |\n\n### 🔄 Branch Development Flow\n\n```mermaid\ngraph LR\n   A[main] --\u003e B[docker]\n   A --\u003e C[SSR-Server-Side-Rendering]\n   B --\u003e D[docker+ssr]\n   C --\u003e D\n```\n\n### 🎯 Choosing the Right Branch\n\n- **For basic development:** Use `main` branch\n- **For containerized deployment:** Check out `docker` branch\n- **For SEO optimization:** Use `SSR-Server-Side-Rendering` branch\n- **For production deployment:** Use `docker+ssr` branch (recommended)\n\n### 🔀 Switching Branches\n\n```bash\n# View all branches\ngit branch -a\n\n# Switch to a specific branch\ngit checkout docker\ngit checkout SSR-Server-Side-Rendering\ngit checkout docker+ssr\n\n# Return to main branch\ngit checkout main\n```\n\n### 🚀 Branch-Specific Features\n\n#### 🐳 Docker Branch (with Nginx)\n\n- Complete Docker containerization\n- Multi-stage build process\n- Development and production Dockerfiles\n- Docker Compose configuration\n- Nginx serves optimized static build on port 80 with sensible cache headers\n\n#### 🔄 SSR Branch\n\n- Server-side rendering with Express.js\n- Enhanced SEO capabilities\n- Faster initial page loads\n- Better Core Web Vitals scores\n\n#### 🚀 docker+ssr Branch (Nginx + SSR)\n\n- Combined benefits of SSR and Docker\n- Production-ready deployment\n- Scalable architecture\n- Cloud deployment optimized\n- Nginx reverse proxies to Node SSR and serves static assets directly when possible\n\n\u003e Note: The Nginx configuration and Dockerfiles referenced above live in the respective branches (`docker` and `docker+ssr`). This main branch README documents how to use them.\n\n---\n\n## 🤝 Contributing\n\nWe welcome contributions! Here's how you can help:\n\n1. 🍴 Fork the repository\n2. 🌿 Create a feature branch (`git checkout -b feature/amazing-game`)\n3. 💝 Commit your changes (`git commit -m 'Add some amazing game'`)\n4. 📤 Push to the branch (`git push origin feature/amazing-game`)\n5. 🎉 Open a Pull Request\n\n---\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\n## 🙏 Acknowledgments\n\n- 🎮 Inspired by classic arcade and casual games\n- ⚡ Built with modern web technologies for the best user experience\n- 🤖 Enhanced with Google Gemini AI for intelligent gameplay features\n- 🌐 Deployed on Vercel for blazing-fast global delivery\n- 🙏 Thanks to all contributors who help make this project better!\n- 💡 Special thanks to the React, TypeScript, Vite, and Google AI communities\n\n---\n\n## 📊 Project Stats\n\n- 🎯 **12 Games** implemented and ready to play\n- 🤖 **AI-Enhanced** - 5 games feature Google Gemini AI integration\n- 📦 **Lightweight Bundle** - Optimized for fast loading\n- 🌍 **Global CDN** - Fast delivery worldwide via Vercel\n- 📱 **Mobile Optimized** - Works perfectly on all devices\n- ⚡ **\u003c 3s Load Time** - Lightning-fast performance\n- 🐳 **Docker Ready** - Container support for all environments\n- ☁️ **Multi-Cloud** - Deploy anywhere with Docker containers\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**⭐ Don't forget to star this repository if you enjoyed the games! ⭐**\n\nMade with ❤️ by [Kevin Thulnith](https://github.com/kevinThulnith)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevinthulnith%2Fmulti-stage-react-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkevinthulnith%2Fmulti-stage-react-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevinthulnith%2Fmulti-stage-react-project/lists"}