Calendar View

A Next.js application that allows users to view their Google Calendar events using Google OAuth 2.0 and Supabase for authentication and data storage.

Features

• Google OAuth 2.0 Authentication via Supabase
• View Google Calendar events in a monthly view
• Navigate between months
• Secure session management
• Responsive design with Tailwind CSS

Tech Stack

• Frontend: Next.js 14 with TypeScript
• Styling: Tailwind CSS
• Authentication: Supabase Auth + Google OAuth
• Database: Supabase (PostgreSQL)
• Calendar UI: React Big Calendar
• Deployment: Render.com

Getting Started

1. Clone the repository

2. Install dependencies:

   npm install

3. Set up environment variables:

   • Copy .env.local.example to .env.local
   • Fill in your Supabase and Google OAuth credentials

4. Run the development server:

   npm run dev

5. Open http://localhost:3000 in your browser

Environment Variables

• NEXT_PUBLIC_SUPABASE_URL: Your Supabase project URL
• NEXT_PUBLIC_SUPABASE_ANON_KEY: Your Supabase anonymous key
• GOOGLE_CLIENT_ID: Your Google OAuth client ID
• GOOGLE_CLIENT_SECRET: Your Google OAuth client secret
• GOOGLE_REDIRECT_URI: OAuth redirect URI

Project Structure

src/
├── app/                 # Next.js app directory
├── components/          # Reusable components
├── lib/                 # Library code, utilities
├── types/              # TypeScript type definitions
└── utils/              # Utility functions

Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a new Pull Request