Key Features

• 🔐 Google OAuth Authentication with NextAuth.js
• 📅 Calendar Event Management
  • Create, read, update, and delete calendar events
  • Split-view interface for efficient event management
  • Real-time updates using React Query
• ⏰ Automated Call Alerts
  • Twilio integration for phone calls
  • Configurable notification timing
  • Reliable delivery system
  • Phone number verification with OTP
• 🔄 Robust Cron System
  • Concurrent execution prevention
  • Error handling and retries
  • Performance monitoring
• 📊 Admin Dashboard
  • Monitor cron job status
  • View system performance
  • Access error logs
• 🎨 Modern UI Components
  • Built with Tailwind CSS and Shadcn UI
  • Responsive design
  • Accessible components
  • OTP input with auto-focus

A Next.js 13 application that integrates with Google Calendar to manage events and provide automated call alerts through Twilio. Built with modern web technologies and focusing on reliability and performance.

Project Overview

This application provides a comprehensive solution for managing Google Calendar events with automated phone call notifications. It features a modern UI, efficient state management, and a robust background processing system.

Features

• 🔐 Google OAuth Authentication using NextAuth
• 📅 Calendar Event Management (CRUD operations)
• ⏰ Automated Call Alerts using Twilio
• 🔄 Reliable Cron Job System
• 📊 Admin Dashboard for Monitoring
• 🎨 Modern UI with Tailwind CSS

Pages and Routes

Public Pages

• / - Landing page with authentication options
• /login - OAuth login page

Protected Pages

• /calendar - Calendar management with split view
  • Left panel: Create/Edit event form
  • Right panel: Event list with edit/delete options
• /admin - Admin dashboard for monitoring cron jobs and system performance
• /profile - User profile and preferences

API Endpoints

Authentication

• GET/POST /api/auth/[...nextauth] - NextAuth.js authentication endpoints

Calendar Events

• GET /api/calendar-events - List calendar events
• POST /api/calendar-events - Create new event
• PUT /api/calendar-events/[eventId] - Update existing event
• DELETE /api/calendar-events/[eventId] - Delete event

Profile & Phone Verification

• GET /api/profile - Get user profile
• PATCH /api/profile - Update user profile
• POST /api/otp/send - Send OTP to phone number
• POST /api/otp/verify - Verify OTP code

Cron Management For Admin

• GET /api/notification-worker?action=status - Get cron job status
• GET /api/notification-worker?action=trigger - Manually trigger cron job
• GET /api/notification-worker?action=restart - Restart cron job
• GET /api/notification-worker?action=stop - Stop cron job

Project Structure

src/
├── app/                      # Next.js 13 App Router
│   ├── (protected)/         # Protected routes
│   │   ├── admin/          # Admin dashboard
│   │   ├── calendar/       # Calendar management
│   │   └── profile/        # User profile
│   ├── api/                # API routes
│   │   ├── auth/          # Authentication endpoints
│   │   ├── calendar-events/# Calendar CRUD operations
│   │   └── notification-worker/ # Cron job endpoints
├── components/             # React components
│   ├── ui/                # UI components
│   ├── AdminDashboard.tsx # Admin interface
│   ├── CalendarEvents.tsx # Events list
│   └── CreateEvent.tsx    # Event form
├── lib/                   # Core utilities
│   ├── callNotification.ts# Notification logic
│   ├── google.ts         # Google Calendar integration
│   └── twilio.ts         # Twilio integration
├── workers/               # Background workers
│   └── cronWorker.ts     # Cron job implementation
└── types/                 # TypeScript definitions

Cron Worker System

Implementation Details

The cron system uses node-cron with the following features:

// Concurrent execution prevention
let isProcessing = false;

async function runNotificationJob() {
  if (isProcessing) {
    console.log('Previous job still running, skipping...');
    return;
  }

  try {
    isProcessing = true;
    await processAllUsersNotifications();
  } finally {
    isProcessing = false;
  }
}

// Scheduled execution
cron.schedule('*/5 * * * *', runNotificationJob);

Error Handling Strategy

1. Token Management

   • Automatic refresh of expired tokens
   • Graceful handling of auth failures
   • Token caching for performance

2. Job Processing

   • Individual user isolation
   • Batch processing with limits
   • Automatic retries for failed operations

3. Monitoring

   • Detailed error logging
   • Performance metrics collection
   • Alert system for critical failures

Monitoring

The admin dashboard provides:

• Real-time cron job status
• Error logs and statistics
• Performance metrics
• Manual trigger option

Performance Optimization

Data Management

1. React Query Implementation

   • Efficient cache management
   • Automatic background refetching
   • Optimistic updates for better UX

2. API Optimization

   • Pagination for event lists
   • Debounced API calls
   • Proper error boundary implementation

Code Optimization

1. Component Architecture

   • Lazy loading for route components
   • Memoization of expensive computations
   • Efficient re-render prevention

2. Database Queries

   • Indexed fields for faster lookups
   • Optimized MongoDB queries
   • Connection pooling

Environment Setup

Required environment variables:

# Authentication
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
NEXTAUTH_URL=
NEXTAUTH_SECRET=

# Database & Cache
MONGODB_URI=
REDIS_URL=
REDIS_TOKEN=

# Twilio Configuration
TWILIO_PHONE_NUMBER=
TWILIO_SID=
TWILIO_AUTH_TOKEN=

# Application Settings
ADMIN_EMAIL=
OTP_EXPIRY_SECONDS=30

Running the Application

Development:

npm install
npm run dev

Production:

npm run build
npm start

Tech Stack

• Frontend

  • Next.js 13 (App Router)
  • React 18
  • TypeScript
  • Tailwind CSS
  • Shadcn UI
  • Input OTP Component
  • Radix UI Icons & Components

• State Management

  • React Query (TanStack Query)
  • React Hook Form
  • Zod Validation
  • NextAuth Session Management

• Backend & Data

  • Next.js API Routes
  • MongoDB with Mongoose
  • Redis with Upstash
  • Google Calendar API
  • Twilio API
  • node-cron

• Development Tools

  • ESLint
  • Prettier
  • TypeScript
  • Turbopack (Development)
  • Environment Validation (Zod)

Performance Recommendations

1. Caching Strategy

   • Use Edge caching for static assets
   • Enable ISR for semi-static pages

2. Database Optimization

   • Regular index maintenance
   • Implement data archiving strategy
   • Monitor query performance

3. API Enhancement

   • Implement rate limiting
   • Add request caching
   • Use WebSocket for real-time updates

4. Monitoring

   • Set up error tracking (e.g., Sentry)
   • Implement performance monitoring
   • Add automated alerts for system issues