App Boilerplate

A feature-rich, production-ready application boilerplate with multi-auth, i18n, and theming

✨ Features

• 🔒 Multiple Authentication Methods - Traditional, 2FA, or Passwordless
• 🌐 Internationalization - Multi-language support (English, Spanish)
• 🎨 Theming - Light/Dark modes with system preference detection
• 📱 Responsive - Works on mobile, tablet, and desktop
• 📦 State Management - Type-safe Pinia stores
• 📊 Analytics - Ready-to-use tracking infrastructure
• 🚨 Error Handling - Centralized logging and user-friendly messages

🚀 Tech Stack

Ionic

Vue 3

TypeScript

Pinia

Tailwind

Vite

📋 Table of Contents

• Quick Start
• Authentication System
• Project Structure
• Configuration
• Development Commands
• Customization
• License

🏁 Quick Start

Prerequisites

• Node.js (v16+)
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/iguanai/app-boilerplate.git
cd app-boilerplate

# Install dependencies
npm install
# or
yarn install

# Start the development server
npm run dev
# or
ionic serve

🔐 Authentication System

The boilerplate implements a flexible authentication system with three methods:

1. Traditional Email/Password

Username/Password + Remember me option

• Standard authentication flow
• Password reset functionality
• Secure password storage

2. Secure Authentication (with 2FA)

Username/Password + Two-factor verification

• Enhanced security for sensitive applications
• Support for authenticator apps
• Backup recovery codes

3. Easy Login (Passwordless)

Email/SMS + 6-digit verification code

• Simplified login experience
• No passwords to remember
• Support for both email and SMS verification

📁 Project Structure

src/
├── assets/            # Static assets (images, styles)
├── components/        # Reusable components
│   ├── common/        # Business logic components
│   └── ui/            # UI components
├── layouts/           # Layout components
├── locales/           # i18n translation files
├── router/            # Vue Router configuration
├── services/          # Services (API, auth, etc.)
│   └── auth/          # Authentication providers
├── stores/            # Pinia stores
├── theme/             # Theme variables and styles
├── utils/             # Utility functions
├── views/             # Page components
├── App.vue            # Root component
├── main.ts            # App entry point
└── config.ts          # App configuration

⚙️ Configuration

The application is highly configurable through the src/config.ts file:

// Example configuration
const config = {
  app: {
    name: 'Your App Name',
    version: '1.0.0',
    description: 'Your app description',
    baseUrl: 'https://yourapp.com',
  },
  auth: {
    sessionDuration: 60, // Session duration in minutes
    defaultProvider: 'traditional', // Default auth provider
    providers: {
      traditional: { enabled: true },
      secure: { enabled: true, require2FA: false },
      easy: { enabled: true, methods: ['email', 'sms'] }
    }
  },
  // See config.ts for full configuration options
};

Environment Variables

Create an .env file in the root directory:

# App
VITE_APP_NAME=Your App Name

# API
VITE_API_URL=https://api.example.com

# Analytics
VITE_ANALYTICS_ENABLED=true

💻 Development Commands

Command	Description
ionic serve	Start development server
ionic build	Build for production
npm run dev	Start Vite dev server
npm run build	Build with TypeScript check
npm run lint	Run ESLint with auto-fix
npm run lint:check	Run ESLint without auto-fix
npm run test:unit	Run unit tests with Vitest
npm run test:e2e	Run E2E tests with Cypress

🛠️ Customization

Adding New Authentication Providers

1. Create a new provider class implementing the AuthProvider interface:

// src/services/auth/CustomProvider.ts
import { AuthProvider } from './AuthProvider';

export class CustomProvider implements AuthProvider {
  // Implement required methods
}

2. Register the provider in the auth provider registry
3. Add UI components for the new authentication method

Adding New Languages

1. Create a new JSON file in the src/locales directory (e.g., fr.json)
2. Copy the structure from en.json and translate the values
3. Update the language switcher component to include the new language

📱 Progressive Web App Support

This boilerplate includes PWA support out of the box:

• Installable on mobile and desktop
• Offline support
• Native-like experience
• Automatic updates

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

Screenshots

---

Developed with ❤️ by IguanAI Labs Inc.

Report Bug · Request Feature