FeaturesTemplatesShowcaseTownie
AI
BlogDocsPricing
Log inSign up
Syphrose1990
Syphrose1990Reminder
Public
Like
Reminder
Home
Code
4
backend
2
frontend
3
shared
2
README.md
Branches
1
Pull requests
Remixes
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in miliseconds.
Sign up now
Code
/
Code
/
Search
index.ts
https://Syphrose1990--81169d6c3faa11f0a74176b3cceeab13.web.val.run
README.md

Calendar Assistant

A smart calendar management application that connects to your Google Calendar to:

  • Send 30-minute reminders for all events via email and web notifications
  • Automatically find free time slots during business hours (8 AM - 5 PM)
  • Suggest and schedule meetings during available periods
  • Provide an intuitive interface for calendar management

Features

  • Smart Reminders: 30-minute email and web notifications for all events
  • Business Hours Focus: Only suggests meetings between 8 AM - 5 PM on weekdays
  • Free Time Detection: Automatically identify available slots in your calendar
  • Meeting Scheduler: Schedule meetings during detected free periods
  • Real-time Updates: Live calendar synchronization
  • Responsive Design: Works on desktop and mobile devices

How to Run This Project

Step 1: Set up Google Calendar API

  1. Go to Google Cloud Console

  2. Create a new project or select an existing one

  3. Enable the Google Calendar API:

    • Go to "APIs & Services" > "Library"
    • Search for "Google Calendar API"
    • Click "Enable"
  4. Create OAuth 2.0 credentials:

    • Go to "APIs & Services" > "Credentials"
    • Click "Create Credentials" > "OAuth 2.0 Client ID"
    • Choose "Web application"
    • Add your Val Town URL to "Authorized JavaScript origins"
    • Add postmessage to "Authorized redirect URIs"

Step 2: Configure Environment Variables in Val Town

  1. In your Val Town project, go to Settings
  2. Add these environment variables:
    GOOGLE_CLIENT_ID=your_google_client_id_here
    GOOGLE_CLIENT_SECRET=your_google_client_secret_here
    

Step 3: Run the Application

  1. The backend is already configured as an HTTP val at /backend/index.ts
  2. Visit your Val Town URL to access the application
  3. Click "Connect Google Calendar" to authenticate
  4. Grant permissions for calendar access

Step 4: Using the Application

  1. View Events: See all upcoming events with 30-minute reminder notifications
  2. Check Free Time: View available time slots during business hours
  3. Schedule Meetings: Use the meeting scheduler to automatically find and book available times
  4. Configure Settings: Adjust notification preferences (already set to your requirements)

Project Structure

├── backend/
│   ├── index.ts             # Main HTTP entry point
│   └── services/
│       ├── auth.ts          # Google OAuth authentication
│       ├── calendar.ts      # Calendar operations
│       └── reminder.ts      # Reminder notifications
├── frontend/
│   ├── index.html           # Main HTML template
│   ├── index.tsx            # React entry point
│   └── components/
│       ├── App.tsx          # Main app component
│       ├── Dashboard.tsx    # Main dashboard
│       ├── LoginScreen.tsx  # Authentication screen
│       ├── EventList.tsx    # Event display
│       ├── FreeTimeSlots.tsx # Free time display
│       ├── MeetingScheduler.tsx # Meeting scheduling
│       └── ReminderSettings.tsx # Settings panel
└── shared/
    ├── types.ts             # TypeScript interfaces
    └── utils.ts             # Shared utility functions

Current Configuration

✅ Google Calendar Integration: Connects to your Google Calendar
✅ 30-minute Reminders: Email and web notifications 30 minutes before events
✅ Business Hours: 8 AM - 5 PM weekdays only for meeting suggestions
✅ Email Notifications: Automatic email reminders
✅ Web Notifications: Browser notifications when the app is open

Troubleshooting

  • Authentication Issues: Make sure your Google Client ID is correctly set in environment variables
  • No Notifications: Enable browser notifications when prompted
  • No Free Time: Check that you have gaps in your calendar during business hours
  • API Errors: Verify that Google Calendar API is enabled in your Google Cloud project

Next Steps

  • The app will automatically check for reminders every minute
  • Email notifications are sent via Val Town's email service
  • Web notifications appear in your browser
  • All meeting suggestions respect your business hours (8 AM - 5 PM)
HTTP
  • index.ts
    Syphrose1990--81…13.web.val.run
Code
backendfrontendsharedREADME.md
Go to top
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Product
FeaturesPricing
Developers
DocsStatusAPI ExamplesNPM Package Examples
Explore
ShowcaseTemplatesNewest ValsTrending ValsNewsletter
Company
AboutBlogCareersBrandhi@val.town
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.