Mobile Starter App (React + Vite + Capacitor)

Last updated: 2026-01-28

Build iOS and Android apps using 100% Web technologies (React, Vite).

A professional, plain skeleton for building hybrid web and mobile applications with a single codebase.

English

Technical Highlights

• Performance: High-efficiency development environment powered by Vite 7 and React 19.
• Styling: Integrated Tailwind CSS v4 (configuration-less setup) for modern, rapid UI development.
• Architecture: Unified Capacitor 7 structure for Web, iOS, and Android platforms from a single src directory.
• UI Design: Mobile-optimized CSS featuring safe-area-inset support and a responsive layout for cross-platform consistency.
• Aesthetics: Clean implementation using glassmorphism and lean CSS.

Automation & Tasks

• CI/CD Ready: Core maintenance scripts are organized in scripts/base/ for automated build number and version management.
• Asset Automation: Generate all native icons and splash screens from source images using @capacitor/assets.
• VSCode Integration: Dedicated tasks for build, sync, asset generation, and opening native IDEs.

Getting Started

1. Install dependencies: npm install
2. Web Development: npm run dev

Multi-platform Build

1. Build Web: npm run build
2. Sync Native: npm run cap:sync
3. Open Native IDEs: npx cap open android | npx cap open ios

Optional: Supabase Integration

This starter is kept "plain" by default. To add Supabase:

1. npm install @supabase/supabase-js
2. Create src/lib/supabase.ts and initialize the client.
3. Use the client for authentication and database operations.

---

日本語

Web技術（React, Vite）だけで iOS/Android アプリを構築するスターターキット。

技術仕様

• パフォーマンス: Vite 7 および React 19 による高効率な開発環境。
• スタイリング: 最新の Tailwind CSS v4 を統合。設定ファイル不要のシンプルな構成で迅速なUI開発を実現。
• アーキテクチャ: Capacitor 7 を採用し、単一の src ディレクトリから Web, iOS, Android を構成。
• UI設計: セーフエリア対応およびレスポンシブデザインの実装により、クロスプラットフォームでの整合性を維持。
• デザイン仕様: グラスモーフィズムを採用した簡潔な CSS 構成。

自動化・タスク

• CI/CD 対応: scripts/base/ フォルダに管理スクリプトを整理し、ビルド番号やバージョンの自動更新に対応。
• アセット自動生成: @capacitor/assets を活用し、1枚のソース画像から全機種用のアイコン・スプラッシュ画面を自動生成。
• VSCode 連携: ビルド、同期、アセット生成、ネイティブIDEの起動を VSCode から直接実行可能。

セットアップ

1. 依存関係のインストール: npm install
2. Webでの開発: npm run dev

マルチプラットフォームビルド

1. Web ビルド: npm run build
2. ネイティブ同期: npm run cap:sync
3. ネイティブプロジェクト: npx cap open android | npx cap open ios

オプション: Supabase の導入

本スターターは「プレーン」な状態を維持しています。Supabase を導入する場合：

1. npm install @supabase/supabase-js
2. src/lib/supabase.ts を作成し、クライアントを初期化。
3. 認証やデータベース操作にクライアントを使用。

ライセンス / License

MIT License - Copyright (c) 2026 IdeaGarage