- First update : 2026-01-08
- Last update : 2026-01-15
- Last code update : 2026-01-08
(한글 문서는 곧 업로드 예정입니다!)
If you have any questions or feedback, please open an issue in the Issues tab.
A mobile arcade game built with React, Vite, and Capacitor, featuring AdMob integration for rewarded ads. Capture stars, avoid bombs, and clear the galaxy!
The goal was to build a robust mobile arcade game while exploring modern build tools. This project specifically focuses on navigating technical hurdles during environment setup, transitioning from a standalone CSS configuration to a Vite-based development workflow for better performance and reliability.
- Total Duration: 2026.01.06 ~ 2026.01.08
- Setup Phase: Explored various build environments; successfully migrated to Vite for optimized React development.
- Development Phase: Implemented core game mechanics, life/time systems, and dynamic star/bomb spawning.
- Optimization Phase: Fixed iOS SafeArea issues and integrated AdMob for rewarded video ads.
This project was developed using the "Vibe Coding" approach—leveraging high-level interaction with AI (Claude, Google AI Studio, Gemini) to rapidly prototype, debug, and iterate.
- Intuitive Iteration: Focused on natural language communication to bridge the gap between creative ideas and complex code.
- Rapid Problem Solving: Navigated technical hurdles (like migrating to Vite and fixing iOS SafeArea issues) through real-time AI partnership.
- Human-AI Collaboration: Demonstrated how AI can accelerate the development lifecycle from initial setup to App Store readiness.
iOS Native Support: Fully optimized for iOS with SafeArea (Notch/Dynamic Island) support.
Level System: Progress through multiple worlds and sectors.
Rewarded Ads: Use gems to revive or extend time by watching ads.
Game Mechanics: Life and time management systems optimized for mobile play.
Frontend: React (TypeScript), Vite, Tailwind CSS
Mobile Bridge: Capacitor
Monetization: Google AdMob
Prerequisites Node.js: v18 or higher
Xcode: v15 or higher (for iOS builds)
CocoaPods: Required for iOS dependency management
Clone the repository:
git clone https://github.com/your-username/star-clear.git
cd star-clearInstall dependencies:
npm installFor security reasons, AdMob IDs are not included in the repository. You must create a .env file in the root directory and add your own IDs.
Create a .env file:
touch .envAdd the following variables (replace with your actual AdMob IDs):
VITE_IOS_BANNER_ID=your_ios_banner_id
VITE_IOS_INTERSTITIAL_ID=your_ios_interstitial_id
VITE_IOS_REWARDED_ID=your_ios_rewarded_id
VITE_ANDROID_BANNER_ID=your_android_banner_id
VITE_ANDROID_INTERSTITIAL_ID=your_android_interstitial_id
VITE_ANDROID_REWARDED_ID=your_android_reward_id
Build the React project:
npm run buildSync the web code to the native iOS project:
npx cap copy iosOpen the project in Xcode:
npx cap open iosImportant: Select your development team in the Signing & Capabilities tab before building to a physical device.
Signing: Requires an Apple Developer Account for physical device testing.
SafeArea: The app uses viewport-fit=cover and env(safe-area-inset-top) to ensure the UI is not hidden by the device notch.
The objective is to clear each level by collecting stars while surviving the galaxy's hazards.
Objective: Collect the required number of Stars to complete the sector.
Controls: Tap or drag on the screen to move your character.
Avoid Obstacles: Do not touch the Bombs! Hitting a bomb will cost you a life.
Game Over: The game ends if you run out of Lives or if the Timer reaches zero.
Revive System:
Out of Lives? Watch a rewarded ad to gain +1 Life.
Out of Time? Watch a rewarded ad to add +10 Seconds to the clock.
Progress: Clear sectors to unlock new Worlds. Each world features unique themes and increased difficulty.
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])