Calendar System with Google Calendar Integration

Overview

This project implements a basic Tutor Calendar System where users can manage their schedules and integrate events with Google Calendar. This is a web application that allows tutors to track appointments, view their availability, and synchronize events with Google Calendar seamlessly. It includes features such as event creation, CRUD operations for calendar events, and Google Calendar integration.

The system is divided into a backend built with Node.js and frontend built with Next.js. Data is stored in MongoDB, and Google OAuth 2.0 is used to integrate with Google Calendar.

Features

• Calendar Management: Interactive calendar view to manage events.
• Event Creation: Users can create, update, and delete events with details such as title, description, participants, date, time, duration, and notes.
• Google Calendar Integration: Sync events between the user’s Google Calendar and the app. Updates in the app reflect in Google Calendar and vice versa (two-way sync).
• Responsive UI: User-friendly interface to view and manage appointments on any device.

Requirements

• Node.js (Backend)
• Express.js (Backend framework)
• MongoDB (Database)
• Next.js (Frontend)
• Google API Client (For Google Calendar Integration)
• OAuth 2.0 (For authentication)
• Docker (For easy deploy and setup)

Getting Started

Follow these steps to set up and run the project locally.

Prerequisites

• Node.js (>=20.x)
• MongoDB running locally or on a cloud service (e.g., MongoDB Atlas)
• Google Cloud project with Google Calendar API enabled (you will need credentials for OAuth 2.0)
• pnpm (or npm)
• Docker

Step 1: Clone the repository

mkdir ~/Dev/calendar-system -p
cd ~/Dev/calendar-system
git clone https://github.com/arvind-4/calender-system .

Step 2: Set up Environment Varialbles

Create a .env file in the backend directory with the following variables:

MONGODB_URI=mongodb://localhost:27017/tutor-calendar
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
GOOGLE_REDIRECT_URI=http://localhost:5000/auth/google/callback
SESSION_SECRET=your-session-secret

Refer to the backend/.env.sample file for the environment variables to use.

You can obtain your Google Client ID and Secret by setting up a project in the Google Developer Console.

Step 3: Set up using Docker:

Just run the docker compose command in the root of the project to start the application.

docker compose up --build -d

Manual Setup for Development without Docker

Step 4: Set up Backend

1. Install dependencies:

   Navigate to the backend folder and install the required Node.js packages:

cd backend
pnpm install

2. Start the backend server:

pnpm dev

The backend will now run at http://localhost:8000

Step 5: Set up Frontend

1. Install dependencies:

   Navigate to the frontend folder and install the required packages:

cd frontend
pnpm install

2. Start the frontend server:

pnpm dev

The frontend will now run at http://localhost:3000.

Step 6: Google OAuth Authentication

1. Upon first accessing the calendar interface, you will be prompted to authenticate with Google.
2. After successful authentication, the app will store an OAuth token and refresh token to sync calendar events.

Step 7: Usage

• Managing Events:

  • On the calendar, you can click on a date and time slot to create a new event.
  • You can also click on existing events to view or edit them.
  • The event creation form requires the following fields:
    • Event title
    • Description
    • List of participants
    • Date and time (supports multiple formats)
    • Duration in hours
    • Session notes

• Syncing with Google Calendar:

  • Any event created, updated, or deleted from the calendar is reflected in the Google Calendar and vice versa.

Technologies Used

• Backend: Node.js, Express.js, MongoDB, Mongoose, Google Calendar API
• Frontend: React.js, FullCalendar
• Authentication: OAuth 2.0 with Google

Additional Notes

• Ensure that your Google Cloud project has OAuth 2.0 configured properly to allow calendar synchronization.
• Events are stored both in MongoDB and Google Calendar to ensure consistency.
• You can test the integration with any Google account to verify syncing works as expected.