GitHub - yungjurick/kalendar: Kalendar - A clone version of Google Calendar using Next.js

<aside> 🚨 Some of the features in Kalendar are still work-in-progress. Please refer to the above GitHub link for supported features.

</aside>

<aside> 💬 Kalendar is a clone version of Google Calendar with selected primary features that Google Calendar provides.

This documentation gives a general overview of the project architecture to portray the thought process behind the creation. Some parts of the explanation are done through code snapshots to aid in understanding the logic. However, the code may not completely reflect the production code and may contain syntax errors. For details on the code for the logics, please take a look at the github.

</aside>

<aside> 📅 date-fns is mainly used for parsing and querying dates in Kalendar

</aside>

General overview of the basic UX flow

Redux (Functioning as Local Database) Architecture

/*
	For the prototype version, original data are stored in a separate state in
	redux, performing like that of a normal database.

	Types are referenced from 'Redux State Architecture'
*/

interface UserDB {
	[key: UserUid]: User;
}

// Dictionary to track events that are created by each users
interface UserEventDB {
	[key: UserUid]: EventUid[];
}

interface User {
	uid: uid();
	displayName: string;
	email: string;
	photoUrl: string;
	timezone: string;
	defaultThemeColor: ThemeColorType;
	friendsUidList: uid()[];
}

/* - - - - - - - - - - - - - - - - */

interface EventDB {
	[key: EventUid]: Event;
}

interface EventGroupDB {
	[key: EventGroupUid]: EventGroupDetails
}

/*
	Events that belong in invitedDB are events that are created by
	other users. Events are placed in the recepient's invitedDB
	when a user invites another user.

	Since recepients can mutate the properties of invited events,
	invited events are separately stored from EventDB
*/

interface InvitedDB {
	[key: UserUid]: Event[];
}

interface Event {
	eventUid: uid();
	eventCreatorUid: uid(); // User Uid;
	eventGroupUid: uid() | null;
	startDate: Date();
	endDate: Date();
	title: string;
	description: string;
	themeColor: string;
	location: string;
	invites: EventInvite[] | [];
	isAllDay: boolean;
	createdAt: Date();
}

interface EventGroupDetails {
	groupUid: uid();
	repeatType: EventRepeatType;
	repeatChanges: {
		[key: string]: { // key - date in string format
			type: RepeatChangesType,
			payload: {
				[key: string]: string | number; { // key - event block property
			} | null;
		}
	}
}

// Payload type for repeatChanges

interface RepeatChangePayload {
	[key: string]: string | number | Date();
}

interface RepeatDeletePayload {
	from: Date();
	to: Date();
	isDeleteOnwards: boolean;
}

enum RepeatChangesType {
	CHANGE: 'change';
	DELETE: 'delete';
}

enum ThemeColorType {
	RED: 0;
	GREEN: 1;
	YELLOW: 2;
	BLUE: 3;
	SKYBLUE: 4;
	PURPLE: 5;
	BROWN: 6;
}

enum EventRepeatType {
	DAILY: 0;
	WEEKLY: 1;
	BI_WEEKLY: 2;
	MONTHLY: 3;
	WEEK_DAYS: 4;
}

/* - - - - - - - - - - - - - - - - */

interface EventInviteDB {
	[key: EventUid]: EventInvite[];
}

interface EventInvite {
	userUid: uid();
	status: EventInviteStatus;
}

enum EventInviteStatus {
	PENDING: 0;
	ACCEPTED: 1;
	DECLINED: 2;
}

Redux (Functioning as States for View) Architecture

interface CalendarSetting {
	targetDate: {
		start: Date();
		end: Date();
	};
	calendarViewType: CalendarViewType;
}

enum CalendarViewType {
	DAY_VIEW: 0;
	WEEK_VIEW: 1;
	MONTH_VIEW: 2;
	YEAR_VIEW: 3;
}

interface Calendar {
	dayView: DayViewEvents | {};
	weekView: WeekViewEvents | {};
	monthView: MonthViewEvents | {};
	yearView: YearViewEvents | {};
}

/*
	Event View Object is differentiated based on calendar view type.
	- DayViewEvents
	- WeekViewEvents
	- MonthViewEvents
	- YearViewEvents

	Further details in extract methods for the above objects are explained separately below.
*/

// Event blocks for view - partial copy of the original event objects in EventDB
interface EventBlock {
	eventUid: uid();
	eventCreatorUid: uid();
	eventGroupUid: uid() | null;
	eventBlockStart: Date();
	eventBlockEnd: Date();
	title: Date();
	themeColor: ThemeColorType;
	duration: -1 // duration = 0: whole day | duration > 0: multi-day
	createdAt: Date();
}

Calendar Event Object Formats

The pivotal part of Kalendar lies in correctly formulating the events depending on the given calendar view category. According to the features given in Google Calendar, these are the main view types that will be covered in Kalendar:

1. DayViewEvents
2. WeekViewEvents