A flexible Google Calendar alternative interface that syncs two-way with Google Calendar via OAuth. This application allows for creating and using different views and interfaces for Google Calendar data.

• OAuth integration with Google Calendar
• Two-way sync with Google Calendar
• Vertical-scrolling year view with week-grid layout
• Custom event formatting and colorization based on rules
• Secondary calendar for metadata storage
• Extensible architecture for future interfaces

├── backend/
│   ├── index.ts                 # Main entry point and API routes
│   ├── auth/
│   │   └── google-oauth.ts      # Google OAuth implementation
│   ├── calendar/
│   │   ├── api.ts               # Google Calendar API integration
│   │   ├── events.ts            # Event handling functions
│   │   └── metadata.ts          # Metadata calendar management
│   └── utils/
│       └── formatting.ts        # Event formatting utilities
├── frontend/
│   ├── index.html               # Main HTML template
│   ├── index.tsx                # Frontend entry point
│   ├── components/
│   │   ├── App.tsx              # Main application component
│   │   ├── Auth.tsx             # Authentication component
│   │   ├── views/
│   │   │   ├── ViewSelector.tsx # Interface for selecting views
│   │   │   ├── YearView/        # Year view implementation
│   │   │   │   ├── index.tsx    # Year view component
│   │   │   │   ├── Day.tsx      # Day cell component
│   │   │   │   └── Week.tsx     # Week row component
│   │   │   └── [Future Views]/  # Placeholder for future views
│   │   └── settings/
│   │       ├── FormatRules.tsx  # UI for managing formatting rules
│   │       └── Settings.tsx     # General settings component
│   └── utils/
│       ├── date.ts              # Date manipulation utilities
│       └── formatting.ts        # Event formatting utilities
└── shared/
    ├── types.ts                 # Shared TypeScript types
    └── constants.ts             # Shared constants

1. Authenticate with your Google account
2. The app will create a secondary calendar for metadata if it doesn't exist
3. View your calendar in the vertical-scrolling year view
4. Create formatting rules for events

Events can be formatted based on various criteria:

• Event title contains specific text
• Event is in a specific calendar
• Event has specific properties (all-day, recurring, etc.)
• Custom rules using simple expressions

Formatting options include:

• Background color
• Text color
• Custom display format (e.g., "XYZ✈ABC" for flights)
• Visibility options

The architecture is designed to easily add new views and interfaces in the future.