Google Calendar Clone

Written in TypeScript.

Available Features

• Calendars
• Mini Calendar
• Schedules: Event and Task
• Calendar View Selection: Day, Week, and last 4 days
• Draggable dialog w/ readjustable position
• Time Indicator (fully displayed in the current day column)
• External Holiday Events
• User Settings
• User Authentication with Firebase (Google account)
• Firebase Firestore

Required configuration for .env Variables

Client-side Configuration

1. Create the following env files under /client: .env and .env.development
2. Define this variable REACT_APP_HOLIDAY_API_URL in each file accordingly.

For example:

REACT_APP_HOLIDAY_API_URL=https://your-holiday-api-url.com

3. Create the following .env variables under /server:

• API_KEY: Generate your API key here
• CALENDAR_ID: By default, the value should be always holiday@group.v.calendar.google.com
• CALENDAR_REGION (optional): If you're unsure about the value to initialize, use the following value: en.usa. To find the available options, refer to the list of supported regions on this file.

For example

API_KEY=your-api-key
CALENDAR_REGION=en.usa
CALENDAR_ID=holiday@group.v.calendar.google.com

Tools/Technologies/Libraries used

• React (Main UI Library)
• React Draggable
• React Select (UI library)
• Firebase (BaaS)
• Dayjs (Date and time API)
• Typescript (A superset language of JS)
• Sass (Stylesheet Lanuage)

Credits

• Thanks to drewbot for the sass flexbox grid stylesheet
• Thanks to mattn for the available set of holiday events list by region
• Thanks to icons8 for their assets

Screenshots