calendar.io

Purpose

calendar.io is designed to help you organize all your Google Calendar events in one place, providing a seamless and efficient way to manage your schedules and appointments.

---

Technologies Used

• Frontend: ReactJS, TailwindCSS
• Backend: NodeJS, ExpressJS
• Database: MongoDB
• Authentication: Google OAuth2.0
• API: Google Calendar API, Google Maps API, Google Gemini API

---

Installation Instructions

Prerequisites

• npm (Node Package Manager)
• git
• MongoDB
• As my google OAuth is not verified,on the deployed link it only lets test users log in, so if you want to use the deployed version of this app, then mail me your email at [email protected], I will add that in the test users.

Steps

1. Clone this repository:

   git clone https://github.com/syedali237/calendar.io

2. Navigate to the backend directory and install dependencies:

   cd backend
   npm install

3. Navigate to the frontend directory and install dependencies:

   cd ../frontend
   npm install

4. Go to Google Cloud Console.

5. Enable the Google Calendar API on your account and set up a Google OAuth2.0 Client ID.

6. Add Test User Emails through which you want to access the app.

   

7. Obtain the JSON credentials.

8. Obtain the Google Maps API Key and Google Gemini API Key.

9. If you want to test the Contact Us service then setup the EmailJS & obtain the credentials necessary. (optional)

10. Since running locally, go to frontend/src/api.ts and comment out the other baseUrl line as :

const api = axios.create({
    baseURL: "http://localhost:8000/",
    // baseURL: "https://test-repo-umuy.onrender.com/",
});

Backend .env File Setup

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

PORT=8000
GOOGLE_CLIENT_ID='YOUR_GOOGLE_CLIENT_ID'
GOOGLE_CLIENT_SECRET='YOUR_GOOGLE_CLIENT_SECRET'
JWT_SECRET=secret
JWT_TIMEOUT=2h
MONGO_URI=mongodb://127.0.0.1:27017/google-login
REDIRECT_URI=http://localhost:8000/auth/google/callback

Frontend .env File Setup

Create a .env file in the frontend directory with the following content:

VITE_GOOGLE_CLIENT_ID=YOUR_GOOGLE_CLIENT_ID
VITE_SERVICE_EMAILJS=YOUR_SERVICE_ID_EMAILJS
VITE_TEMPLATE_EMAILJS=YOUR_TEMPLATE_ID_EMAILJS
VITE_PUBLIC_KEY=YOUR_PUBLIC_KEY_EMAILJS
VITE_GEMINI_API_KEY=YOUR_GOOGLE_GEMINI_API_KEY
VITE_GOOGLE_MAPS_API_KEY=YOUR_GOOGLE_MAPS_API_KEY

---

Usage

After completing the setup, follow these steps to start the application:

1. Navigate to the frontend directory and start the client:

   cd frontend
   npm run dev

2. Navigate to the backend directory and start the server:

   cd ../backend
   npm start

---

Preview

Screen.Recording.2025-01-23.at.8.47.06.PM.mov

Screen.Recording.2025-01-23.at.8.49.29.PM.mov

---

Note:

The Google SSO functionality may not work on the deployed site as the OAuth, Calendar API Verification Process was not completed due to time constraints. Instead, I am using test users to run it locally.

---

License

This project is licensed under the MIT License. See the LICENSE file for details.

---

Enjoy using calendar.io to streamline your Google Calendar events!