Fully operational

2025-04-19 13:39:52 +03:00 · 2024-01-11 12:52:41 +02:00 · 2024-01-11 12:52:41 +02:00 · fe035c3dc3
commit fe035c3dc3
parent 988431d004
22 changed files with 798 additions and 281 deletions
--- a/Cargo.toml
+++ b/Cargo.toml
@ -6,7 +6,7 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

 [dependencies]
-axum = { version = "0.7.3", features = ["macros"] }
+axum = { version = "0.7.3", features = ["macros", "tokio"] }
 chrono = { version = "0.4.31", features = ["serde"] }
 dotenv = "0.15.0"
 futures = "0.3.30"
--- a/frontend/index.html
+++ b/frontend/index.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>findtheti.me</title>
+    <link rel="icon" type="image/png" href="/src/assets/calendar-color-icon.png"/>
  </head>
  <body>
    <div id="root"></div>
--- a/frontend/package.json
+++ b/frontend/package.json
@ -1,5 +1,5 @@
 {
-  "name": "frontend",
+  "name": "findtheti.me",
  "private": true,
  "version": "0.0.0",
  "type": "module",
@ -21,6 +21,7 @@
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-github-corner": "^2.5.0",
+    "react-hot-toast": "^2.4.1",
    "react-router-dom": "^6.21.1"
  },
  "devDependencies": {
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@ -3,6 +3,7 @@ import './App.css'
 import RootLayout from './pages/RootLayout'
 import NewEventPage from './pages/NewEventPage'
 import ExistingEventPage from './pages/ExistingEventPage'
+import ThankYouPage from './pages/ThankYouPage'

 function App() {
  return (
@ -10,6 +11,7 @@ function App() {
      <Routes>
        <Route path="/" element={<NewEventPage />} />
        <Route path="/:eventId" element={<ExistingEventPage />} />
+        <Route path="/thank-you" element={<ThankYouPage />} />
      </Routes>
    </RootLayout>
  )
--- a/frontend/src/assets/calendar-color-icon.png
+++ b/frontend/src/assets/calendar-color-icon.png
--- a/frontend/src/components/AvailabilityPicker.tsx
+++ b/frontend/src/components/AvailabilityPicker.tsx
@ -1,28 +1,19 @@
-import { Box, Card, Divider, Stack, Typography } from "@mui/material";
-import dayjs, { Dayjs } from "dayjs";
-import { MouseEvent, useEffect, useState } from "react";
-import * as utc from 'dayjs/plugin/utc';
-import * as timezone from 'dayjs/plugin/timezone';
-import * as localizedFormat from 'dayjs/plugin/localizedFormat';
-import utils from "../utils";
-import { EventTypes } from "../types/Event";
+import { Box, Stack } from "@mui/material";
+import { MouseEvent, useState } from "react";
 import "./css/AvailabilityPicker.css";
-import classNames from 'classnames';
-// import { alpha } from '@material-ui/core/styles/colorManipulator';
+import { AvailabilityDay, OthersDay, OthersDays } from "../types/Availabilities";
+import utils from "../utils";
+import AvailabilityPickerDay from "./AvailabilityPickerDay";
+import dayjs, { Dayjs } from "dayjs";
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import localizedFormat from 'dayjs/plugin/localizedFormat';

 dayjs.extend(utc)
 dayjs.extend(timezone)
 dayjs.extend(localizedFormat)

-type AvailabilityTime = {
-    fromTime: Dayjs,
-    toTime: Dayjs
-}
-
-type AvailabilityDay = {
-    forDate: Dayjs,
-    availableTimes: AvailabilityTime[]
-}
+const HALFHOUR_DISPLAY_HEIGHT: number = 15;

 type GhostPreviewProps = {
    top: number,
@ -31,173 +22,19 @@ type GhostPreviewProps = {
    height: number
 }

-const HALFHOUR_DISPLAY_HEIGHT: number = 15;
-
-const Hour = (props: {
-    dateTime: Dayjs,
-    isFullHourSelected: boolean,
-    isHalfHourSelected: boolean,
-    onMouseEnterHalfhour: (e: MouseEvent<HTMLDivElement, globalThis.MouseEvent>, time: Dayjs) => void,
-    onMouseClickOnHalfhour: (time: Dayjs) => void
-}) => {
-    let isEvenHour = props.dateTime.hour() % 2 == 0;
-
-    return (
-        <Box 
-            className={classNames({ "hour-light": isEvenHour, "hour-dark": !isEvenHour })}
-        >
-            <Box
-                className={classNames("full-hour", { "selected-availability": props.isFullHourSelected })}
-                height={HALFHOUR_DISPLAY_HEIGHT}
-                onMouseEnter={(e) => props.onMouseEnterHalfhour(e, props.dateTime)}
-                onClick={(_) => props.onMouseClickOnHalfhour(props.dateTime)}
-            >
-                <Typography className={"noselect time-text"}>
-                    { utils.formatTimeFromHourOfDay(props.dateTime.hour(), 0) }
-                </Typography>
-            </Box>
-            <Box
-                className={classNames("half-hour", { "selected-availability": props.isHalfHourSelected })}
-                height={HALFHOUR_DISPLAY_HEIGHT}
-                onMouseEnter={(e) => props.onMouseEnterHalfhour(e, props.dateTime.add(30, "minutes"))}
-                onClick={(_) => props.onMouseClickOnHalfhour(props.dateTime.add(30, "minutes"))}
-            />
-        </Box>
-    );
-}
-
-const isSelectedAvailability = (day: AvailabilityDay, time: Dayjs): boolean => {
-    return day.availableTimes.some(t => t.fromTime.unix() <= time.unix() && time.unix() <= t.toTime.unix());
-}
-
-const Day = (props: {
-    day: AvailabilityDay,
-    eventType: String,
-    onMouseEnterHalfhour: (e: MouseEvent<HTMLDivElement, globalThis.MouseEvent>, time: dayjs.Dayjs) => void,
-    onMouseClickHalfhour: (day: AvailabilityDay, time: dayjs.Dayjs) => void
-}) => {
-
-    const generateHours = (): JSX.Element[] => {
-        let hours: JSX.Element[] = [];
-
-        for (var i = 0; i < 24; i++) {
-            let time = props.day.forDate.set("hour", i);
-            hours.push(
-                <Hour 
-                    key={time.unix()}
-                    dateTime={time}
-                    isFullHourSelected={isSelectedAvailability(props.day, time)}
-                    isHalfHourSelected={isSelectedAvailability(props.day, time.set("minutes", 30))}  
-                    onMouseEnterHalfhour={(e: MouseEvent<HTMLDivElement, globalThis.MouseEvent>, time: dayjs.Dayjs): void => {
-                        props.onMouseEnterHalfhour(e, time);
-                    }} 
-                    onMouseClickOnHalfhour={(time: dayjs.Dayjs): void => {
-                        props.onMouseClickHalfhour(props.day, time);
-                    }}            
-                />
-            );
-        }
-
-        return hours;
-    }
-
-    return (
-        <Card
-            
-            key={props.day.forDate.format()} 
-            className={"day-card"}
-            variant="outlined"
-        >
-            <Box
-                sx={{ width: "100%" }}
-                padding={1}
-            >
-                {
-                    (props.eventType === EventTypes.WEEK) &&
-                    <Typography>
-                        { props.day.forDate.format("dddd") }
-                    </Typography>
-                }
-                {
-                    (props.eventType === EventTypes.DAY) &&
-                    <Typography>
-                        Any Day
-                    </Typography>
-                }
-                {
-                    (props.eventType === EventTypes.DATE_RANGE || props.eventType === EventTypes.SPECIFIC_DATE) &&
-                    <Typography>                            
-                        { props.day.forDate.format("LL") }
-                    </Typography>
-                }
-            </Box>
-
-            <Divider></Divider>
-
-            {generateHours()}
-
-        </Card>
-    );
-}
-
 const AvailabilityPicker = (props: { 
-    fromDate: Dayjs, 
-    toDate: Dayjs, 
+    days: AvailabilityDay[], 
+    setDays: (days: AvailabilityDay[]) => void, 
+    othersAvailabilities: OthersDays[],
    eventType: String,
-    availabilityDurationInMinutes: number
+    availabilityDurationInMinutes: number,
 }) => {
    
-    const [days, setDays] = useState<AvailabilityDay[]>([]);
    const [ghostPreviewProps, setGhostPreviewProps] = useState<GhostPreviewProps | null>();

-    useEffect(() => {
-        let localTimezone = dayjs.tz.guess();
-
-        let localFromDate = props.fromDate.tz(localTimezone);
-        let localToDate = props.toDate.tz(localTimezone);
-
-        switch (props.eventType) {
-            case EventTypes.SPECIFIC_DATE: {
-                createAvailabilitiesBasedOnInitialDate(localFromDate, 1);
-                break;
-            }
-            case EventTypes.DATE_RANGE: {
-                createAvailabilitiesBasedOnInitialDate(localFromDate, Math.abs(localFromDate.diff(localToDate, "day", false)));
-                break;
-            }
-            case EventTypes.DAY: {
-                createAvailabilitiesBasedOnUnspecifiedInitialDate(1, localTimezone);
-                break;
-            }
-            case EventTypes.WEEK: {
-                createAvailabilitiesBasedOnUnspecifiedInitialDate(7, localTimezone);
-                break;
-            }
-        }
-    }, [props]);
-
-    const createAvailabilitiesBasedOnUnspecifiedInitialDate = (numberOfDays: number, tz: string) => {
-        createAvailabilitiesBasedOnInitialDate(dayjs.tz("1970-01-05 00:00:00", tz), numberOfDays);
-    }
-
-    const createAvailabilitiesBasedOnInitialDate = (date: Dayjs, numberOfDays: number) => {
-        let availabilities: AvailabilityDay[] = [];
-
-        for (var i: number = 0; i < numberOfDays; i++) {
-            let availability: AvailabilityDay = {
-                forDate: date.add(i, "day").startOf("day"),
-                availableTimes: []
-            }
-
-            availabilities.push(availability);
-        }
-
-        setDays(availabilities);
-    }
-
    const displayGhostPeriod = (e: MouseEvent<HTMLDivElement, globalThis.MouseEvent>, time: Dayjs) => {
-        let timeInMinutes = (time.hour() * 60) + time.minute();
-        let timeLeftInDayLessThanDuration = (timeInMinutes + props.availabilityDurationInMinutes) > 24 * 60;
+        let timeInMinutes = (time.hour() * 60.0) + time.minute();
+        let timeLeftInDayLessThanDuration = (timeInMinutes + props.availabilityDurationInMinutes) > 24.0 * 60.0;

        if (timeLeftInDayLessThanDuration) {
            return;
@ -215,16 +52,34 @@ const AvailabilityPicker = (props: {
            // @ts-ignore
            left: e.target?.offsetLeft - scrollLeft,
            width: element.width,
-            height: (props.availabilityDurationInMinutes/60) * 2 * HALFHOUR_DISPLAY_HEIGHT
+            height: (props.availabilityDurationInMinutes/60.0) * 2 * HALFHOUR_DISPLAY_HEIGHT
        })
    }

-    const createAvailability = (day: AvailabilityDay, time: Dayjs) => {
+    const deleteAvailability = (day: AvailabilityDay, time: Dayjs) => {
+        let existingTime = day.availableTimes.findIndex(t => utils.dayjsIsBetweenUnixExclusive(t.fromTime, time, t.toTime));
+
+        if (existingTime >= 0) {
+            console.log(`delete ${existingTime} from`, day)
+
+            day.availableTimes.splice(existingTime, 1);
+
+            props.setDays([...props.days]);
+        }
+    }
+
+    const changeAvailability = (day: AvailabilityDay, time: Dayjs, isDelete: boolean) => {
+        if (isDelete) {
+            deleteAvailability(day, time);
+
+            return;
+        }
+
        let fromTime = time;
        let toTime = time.add(props.availabilityDurationInMinutes, "minutes");

-        let existingTimeContainingFrom = day.availableTimes.findIndex(t => (t.fromTime.isBefore(fromTime) || t.fromTime.isSame(fromTime)) && (t.toTime.isAfter(fromTime) || t.toTime.isSame(fromTime)));
-        let existingTimeContainingTo = day.availableTimes.findIndex(t => (t.fromTime.isBefore(toTime) || t.fromTime.isSame(toTime)) && (t.toTime.isAfter(toTime) || t.toTime.isSame(toTime)));
+        let existingTimeContainingFrom = day.availableTimes.findIndex(t => utils.dayjsIsBetweenUnixInclusive(t.fromTime, fromTime, t.toTime));
+        let existingTimeContainingTo = day.availableTimes.findIndex(t => utils.dayjsIsBetweenUnixInclusive(t.fromTime, toTime, t.toTime));

        // the newly created availability crosses another single one. Both have the same from and to. Do nothing.
        if (existingTimeContainingFrom >= 0 && existingTimeContainingTo >= 0 && existingTimeContainingFrom === existingTimeContainingTo) {
@ -234,16 +89,18 @@ const AvailabilityPicker = (props: {
        // the newly created availability crosses 2 existing ones. Combine all of them into a single one.
        if (existingTimeContainingFrom >= 0 && existingTimeContainingTo >= 0 && existingTimeContainingFrom !== existingTimeContainingTo) {
            let newFrom = day.availableTimes[existingTimeContainingFrom].fromTime;
-            let newTo = day.availableTimes[existingTimeContainingFrom].toTime;
+            let newTo = day.availableTimes[existingTimeContainingTo].toTime;

-            day.availableTimes.splice(existingTimeContainingFrom);
-            day.availableTimes.splice(existingTimeContainingTo);
+            day.availableTimes.splice(existingTimeContainingFrom, 1);
+            day.availableTimes.splice(existingTimeContainingTo, 1);

            day.availableTimes.push({
                fromTime: newFrom,
                toTime: newTo
            });

+            props.setDays([...props.days]);
+
            return;
        }

@ -251,27 +108,31 @@ const AvailabilityPicker = (props: {
        if (existingTimeContainingFrom >= 0 && existingTimeContainingTo < 0) {
            let newFrom = day.availableTimes[existingTimeContainingFrom].fromTime;

-            day.availableTimes.splice(existingTimeContainingFrom);
+            day.availableTimes.splice(existingTimeContainingFrom, 1);

            day.availableTimes.push({
                fromTime: newFrom,
                toTime: toTime
            });

+            props.setDays([...props.days]);
+
            return;
        }

        // The newly created availability to is within an existing one. Combine the 2 into one.
-        if (existingTimeContainingFrom >= 0 && existingTimeContainingTo < 0) {
-            let newTo = day.availableTimes[existingTimeContainingFrom].toTime;
+        if (existingTimeContainingFrom < 0 && existingTimeContainingTo >= 0) {
+            let newTo = day.availableTimes[existingTimeContainingTo].toTime;

-            day.availableTimes.splice(existingTimeContainingFrom);
+            day.availableTimes.splice(existingTimeContainingTo, 1);

            day.availableTimes.push({
                fromTime: fromTime,
                toTime: newTo
            });

+            props.setDays([...props.days]);
+
            return;
        }

@ -280,12 +141,13 @@ const AvailabilityPicker = (props: {
            toTime: toTime
        });

-        setDays([...days])
+        props.setDays([...props.days]);
    }

    return (
        <Box
            className={"availability-parent-box"}
+            onContextMenu={(e) => e.preventDefault()}
        >
            <Stack
                id="availability-picker" 
@ -296,16 +158,23 @@ const AvailabilityPicker = (props: {
                onScroll={(_) => setGhostPreviewProps(null)}
            >
                {
-                    days.map(day => 
-                        <Day 
+                    props.days.map(day => 
+                        <AvailabilityPickerDay 
                            key={day.forDate.unix()}
                            day={day} 
                            eventType={props.eventType} 
+                            halfHourDisplayHeight={HALFHOUR_DISPLAY_HEIGHT}
+                            othersAvailabilityDay={props.othersAvailabilities.map(a => {
+                                return {
+                                    userName: a.userName,
+                                    availableTimes: a.days.find(d => d.forDate.unix() === day.forDate.unix())?.availableTimes ?? []
+                                } as OthersDay;
+                            })}
                            onMouseEnterHalfhour={(e: MouseEvent<HTMLDivElement, globalThis.MouseEvent>, time: dayjs.Dayjs) => {
                                displayGhostPeriod(e, time);
                            }} 
-                            onMouseClickHalfhour={(day: AvailabilityDay, time: dayjs.Dayjs) => {
-                                createAvailability(day, time);
+                            onMouseClickHalfhour={(day: AvailabilityDay, time: dayjs.Dayjs, isDelete: boolean) => {
+                                changeAvailability(day, time, isDelete);
                            }} 
                        />
                    )
--- a/frontend/src/components/AvailabilityPickerDay.tsx
+++ b/frontend/src/components/AvailabilityPickerDay.tsx
@ -0,0 +1,93 @@
+import { AvailabilityDay, OthersDay } from "../types/Availabilities";
+import utils from "../utils";
+import { Box, Card, Divider, Typography } from "@mui/material";
+import { EventTypes } from "../types/Event";
+import AvailabilityPickerHour from "./AvailabilityPickerHour";
+import "./css/AvailabilityPicker.css";
+import dayjs from "dayjs";
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+
+dayjs.extend(utc)
+dayjs.extend(timezone)
+dayjs.extend(localizedFormat)
+
+const AvailabilityPickerDay = (props: {
+    day: AvailabilityDay,
+    eventType: String,
+    halfHourDisplayHeight: number,
+    othersAvailabilityDay: OthersDay[],
+    onMouseEnterHalfhour: (e: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>, time: dayjs.Dayjs) => void,
+    onMouseClickHalfhour: (day: AvailabilityDay, time: dayjs.Dayjs, isDelete: boolean) => void
+}) => {
+
+    const generateHours = (): JSX.Element[] => {
+        let hours: JSX.Element[] = [];
+
+        for (var i = 0; i < 24; i++) {
+            let fullHourTime = props.day.forDate.set("hour", i);
+            let halfHourTime = fullHourTime.add(30, "minutes");
+
+            hours.push(
+                <AvailabilityPickerHour 
+                    key={fullHourTime.unix()}
+                    dateTime={fullHourTime}
+                    halfHourDisplayHeight={props.halfHourDisplayHeight}
+                    namesMarkedFullHourAsAvailable={props.othersAvailabilityDay.filter(d => d.availableTimes.some(t => utils.dayjsIsBetweenUnixExclusive(t.fromTime, fullHourTime, t.toTime))).map(d => d.userName)}
+                    namesMarkedHalfHourAsAvailable={props.othersAvailabilityDay.filter(d => d.availableTimes.some(t => utils.dayjsIsBetweenUnixExclusive(t.fromTime, halfHourTime, t.toTime))).map(d => d.userName)}
+                    isFullHourSelected={props.day.availableTimes.some(a => utils.dayjsIsBetweenUnixExclusive(a.fromTime, fullHourTime, a.toTime))}
+                    isHalfHourSelected={props.day.availableTimes.some(a => utils.dayjsIsBetweenUnixExclusive(a.fromTime, halfHourTime, a.toTime))}  
+                    onMouseEnterHalfhour={(e: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>, time: dayjs.Dayjs): void => {
+                        props.onMouseEnterHalfhour(e, time);
+                    }} 
+                    onMouseClickOnHalfhour={(time: dayjs.Dayjs, isDelete: boolean): void => {
+                        props.onMouseClickHalfhour(props.day, time, isDelete);
+                    }}            
+                />
+            );
+        }
+
+        return hours;
+    }
+
+    return (
+        <Card
+            
+            key={props.day.forDate.format()} 
+            className={"day-card"}
+            variant="outlined"
+        >
+            <Box
+                sx={{ width: "100%" }}
+                padding={1}
+            >
+                {
+                    (props.eventType === EventTypes.WEEK) &&
+                    <Typography>
+                        { props.day.forDate.format("dddd") }
+                    </Typography>
+                }
+                {
+                    (props.eventType === EventTypes.DAY) &&
+                    <Typography>
+                        Any Day
+                    </Typography>
+                }
+                {
+                    (props.eventType === EventTypes.DATE_RANGE || props.eventType === EventTypes.SPECIFIC_DATE) &&
+                    <Typography>                            
+                        { props.day.forDate.format("LL") }
+                    </Typography>
+                }
+            </Box>
+
+            <Divider></Divider>
+
+            {generateHours()}
+
+        </Card>
+    );
+}
+
+export default AvailabilityPickerDay;
--- a/frontend/src/components/AvailabilityPickerHour.tsx
+++ b/frontend/src/components/AvailabilityPickerHour.tsx
@ -0,0 +1,86 @@
+import { Box, Typography } from "@mui/material";
+import classNames from "classnames";
+import utils from "../utils";
+import "./css/AvailabilityPicker.css";
+import dayjs, { Dayjs } from "dayjs";
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import DisableableTooltip from "./DisableableTooltip";
+
+dayjs.extend(utc)
+dayjs.extend(timezone)
+dayjs.extend(localizedFormat)
+
+const AvailabilityPickerHour = (props: {
+    dateTime: Dayjs,
+    isFullHourSelected: boolean,
+    isHalfHourSelected: boolean,
+    halfHourDisplayHeight: number,
+    namesMarkedFullHourAsAvailable: String[],
+    namesMarkedHalfHourAsAvailable: String[],
+    onMouseEnterHalfhour: (e: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>, time: Dayjs) => void,
+    onMouseClickOnHalfhour: (time: Dayjs, isDelete: boolean) => void
+}) => {
+    const generateTooltipText = (names: String[]): String => {
+        return `${names.length} ${names.length > 1 ? "people have" : "person has"} marked this time as available: ${names.join(", ")}`;
+    }
+
+    return (
+        <Box 
+            //className={classNames({ "hour-light": isEvenHour, "hour-dark": !isEvenHour })}
+            className={"hour-light"}
+        >
+            <DisableableTooltip 
+                disabled={props.namesMarkedFullHourAsAvailable.length < 1} 
+                title={generateTooltipText(props.namesMarkedFullHourAsAvailable)} 
+                placement="top" 
+                disableInteractive 
+                followCursor={true} 
+                arrow
+                enterDelay={500}
+            >
+                <Box
+                    className={classNames("full-hour", `hour-available-${props.namesMarkedFullHourAsAvailable.length}`, { "selected-availability": props.isFullHourSelected })}
+                    height={props.halfHourDisplayHeight}
+                    onMouseEnter={(e) => props.onMouseEnterHalfhour(e, props.dateTime)}
+                    onMouseDown={(e) => {
+                        if (e.button !== 0 && e.button !== 2) {
+                            return;
+                        }
+
+                        props.onMouseClickOnHalfhour(props.dateTime, e.button === 2);
+                    }}
+                >
+                    <Typography className={"noselect time-text"}>
+                        { utils.formatTimeFromHourOfDay(props.dateTime.hour(), 0) }
+                    </Typography>
+                </Box>
+            </DisableableTooltip>
+            <DisableableTooltip 
+                disabled={props.namesMarkedHalfHourAsAvailable.length < 1} 
+                title={generateTooltipText(props.namesMarkedHalfHourAsAvailable)} 
+                placement="top" 
+                disableInteractive 
+                followCursor={true} 
+                arrow
+                enterDelay={500}
+            >
+                <Box
+                    className={classNames("half-hour", `hour-available-${props.namesMarkedHalfHourAsAvailable.length}`, { "selected-availability": props.isHalfHourSelected })}
+                    height={props.halfHourDisplayHeight}
+                    onMouseEnter={(e) => props.onMouseEnterHalfhour(e, props.dateTime.add(30, "minutes"))}
+                    onMouseDown={(e) => {
+                        if (e.button !== 0 && e.button !== 2) {
+                            return;
+                        }
+
+                        props.onMouseClickOnHalfhour(props.dateTime.add(30, "minutes"), e.button === 2);
+                    }}
+                />
+            </DisableableTooltip>
+        </Box>
+    );
+}
+
+export default AvailabilityPickerHour;
--- a/frontend/src/components/DisableableTooltip.tsx
+++ b/frontend/src/components/DisableableTooltip.tsx
@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react'
+
+import { Tooltip, TooltipProps } from '@mui/material'
+
+const DisableableTooltip = ({
+  disabled,
+  children,
+  ...tooltipProps
+}: TooltipProps & { disabled: boolean }) => {
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    if (disabled) setOpen(false)
+  }, [disabled])
+
+  return (
+    <Tooltip
+      {...tooltipProps}
+      open={open}
+      onOpen={() => !disabled && setOpen(true)}
+      onClose={() => setOpen(false)}
+    >
+      {children}
+    </Tooltip>
+  )
+}
+
+export default DisableableTooltip;
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@ -7,7 +7,7 @@ export default function Footer() {
            direction="column"
            justifyContent="center"
        >
-            <Typography align="center">
+            <Typography align="center" fontSize={"0.75em"}>
                Created by <a href="https://mvvasilev.dev">mvvasilev</a> | <a href="https://github.com/mvvasilev/findtheti.me">Github</a>
            </Typography>
        </Stack>
--- a/frontend/src/components/css/AvailabilityPicker.css
+++ b/frontend/src/components/css/AvailabilityPicker.css
@ -1,24 +1,74 @@
 :root {
-    --hover-color: #004455;
-    --hour-light-color: #003344;
-    --hour-dark-color: #002233;
+    --hover-color: #555555;
+    --hour-light-color: #333333;
+    --hour-dark-color: #222222;
    --hour-border-bolor: #777;
    --hour-text-color: #ddd;
    --active-color: #223300;
-    --currently-selected-color: #112200;
+    --currently-selected-color: #336622;
+    --currently-selected-color-hover: #338822;
    --halfhour-border-color: #333;
+    --halfhour-border-color-light: #777;
+    --ghost-box-color: #118811;
+    --time-text-color: #ddd;
+    --hour-marked-available: #330033;
+
+}
+
+div[class*=" hour-available-"]{
+    background-color: #bb00bb;
+}
+
+div.hour-available-0 {
+    background-color: inherit;
+}
+
+div.hour-available-1 {
+    background-color: #330033;
+}
+
+div.hour-available-2 {
+    background-color: #440044;
+}
+
+div.hour-available-3 {
+    background-color: #550055;
+}
+
+div.hour-available-4 {
+    background-color: #660066;
+}
+
+div.hour-available-5 {
+    background-color: #770077;
+}
+
+div.hour-available-6 {
+    background-color: #880088;
+}
+
+div.hour-available-7 {
+    background-color: #990099;
+}
+
+div.hour-available-8 {
+    background-color: #aa00aa;
+}
+
+div.hour-available-9 {
+    background-color: #bb00bb;
 }

 div.hour-light {
    width: 100%;
-    border-bottom: solid 1px;
+    border-top: solid 1px;
    border-color: var(--hour-border-bolor);
    background-color: var(--hour-light-color);
 }

 div.hour-dark {
    width: 100%;
-    border-bottom: solid 1px;
+    border-top: solid 1px;
    border-color: var(--hour-border-bolor);
    background-color: var(--hour-dark-color);
 }
@ -26,7 +76,7 @@ div.hour-dark {
 div.full-hour {
    width: 100%;
    border-bottom: dashed 1px;
-    border-color: var(--halfhour-border-color)
+    border-color: var(--halfhour-border-color-light)
 }

 div.half-hour {
@ -45,12 +95,16 @@ div.full-hour:active, div.half-hour:active {
    background-color: var(--active-color);
 }

+div.selected-availability:hover {
+    background-color: var(--currently-selected-color-hover);
+}
+
 div.ghost-box {
    position: absolute;
-    background-color: rgba(0, 255, 0, 0.1);
+    background-color: rgba(0, 255, 0, 0.2);
    border: solid 1px;
-    border-color: #227722;
-    border-radius: 1;
+    border-color: var(--ghost-box-color);
+    border-radius: 4%;
    margin: 0;
    padding: 0;
    pointer-events: none;
@ -59,7 +113,7 @@ div.ghost-box {
 p.time-text {
    text-align: left;
    font-size: 0.65em;
-    color: #ddd;
+    color: var(--time-text-color);
 }

 div.day-card {
--- a/frontend/src/pages/ExistingEventPage.tsx
+++ b/frontend/src/pages/ExistingEventPage.tsx
@ -1,31 +1,180 @@
 import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
-import { Event, createEvent } from '../types/Event';
+import { useNavigate, useParams } from "react-router-dom";
+import { Event, EventTypes, createEvent } from '../types/Event';
 import Grid from '@mui/material/Unstable_Grid2'
 import { Button, TextField, Typography } from "@mui/material";
 import AvailabilityPicker from "../components/AvailabilityPicker";
-import dayjs from "dayjs";
+import dayjs, { Dayjs } from "dayjs";
 import utils from "../utils";
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import duration from 'dayjs/plugin/duration';
+import { AvailabilityDay, AvailabilityTime, OthersDays } from "../types/Availabilities";
+import toast from "react-hot-toast";
+
+dayjs.extend(utc)
+dayjs.extend(timezone)
+dayjs.extend(localizedFormat)
+dayjs.extend(duration);

 export default function ExistingEventPage() {
+    const navigate = useNavigate(); 
+
    let { eventId } = useParams();

+    const [canSubmit, setCanSubmit] = useState<boolean>(false);
    const [event, setEvent] = useState<Event>(createEvent());
+    const [days, setDays] = useState<AvailabilityDay[]>([]);
+    const [othersDays, setOthersDays] = useState<OthersDays[]>([]);
+    const [userName, setUserName] = useState<String | undefined>(undefined);

    useEffect(() => {
-        fetch(`/api/events/${eventId}`)
-            .then(resp => resp.json())
-            .then(resp => setEvent({
-                name: resp.result?.name,
-                description: resp.result?.description,
-                fromDate: dayjs.utc(resp.result?.from_date),
-                toDate: dayjs.utc(resp.result?.to_date),
-                eventType: resp.result?.event_type,
-                snowflakeId: resp.result?.snowflake_id,
-                duration: resp.result?.duration
-            }));
+        utils.showSpinner();
+        
+        Promise.all([
+            utils.performRequest(`/api/events/${eventId}`)
+                .then(result => setEvent({
+                    name: result?.name,
+                    description: result?.description,
+                    fromDate: dayjs.utc(result?.from_date),
+                    toDate: dayjs.utc(result?.to_date),
+                    eventType: result?.event_type,
+                    snowflakeId: result?.snowflake_id,
+                    duration: result?.duration
+                }))
+                .catch(e => toast.error(e)),
+        
+            utils.performRequest(`/api/events/${eventId}/availabilities`)
+                .then((result: [{ id: number, from_date: string, to_date: string, user_name: string }]) => {
+                    let othersDays: OthersDays[] = [];
+                    let localTimezone = dayjs.tz.guess();
+
+                    for (const availability of result) {
+                        let fromDate = dayjs(availability.from_date).tz(localTimezone);
+                        let toDate = dayjs(availability.to_date).tz(localTimezone);
+
+                        var userTimes = othersDays.find(d => d.userName === availability.user_name);
+
+                        if (!userTimes) {
+                            userTimes = { userName: availability.user_name, days: []} as OthersDays;
+
+                            othersDays.push(userTimes);
+                        }
+
+                        let availabilityDay = fromDate.hour(0).minute(0).second(0).millisecond(0);
+
+                        var day = userTimes.days.find(d => d.forDate.unix() === availabilityDay.unix());
+
+                        if (!day) {
+                            day = {
+                                forDate: availabilityDay,
+                                availableTimes: []
+                            } as AvailabilityDay;
+
+                            userTimes.days.push(day);
+                        }
+
+                        day.availableTimes.push({
+                            fromTime: fromDate,
+                            toTime: toDate
+                        } as AvailabilityTime)
+                    }
+                    
+                    setOthersDays(othersDays);
+                })
+                .catch(e => toast.error(e))
+        ])
+        .finally(() => utils.hideSpinner());;
+
    }, [eventId]);

+    useEffect(() => {
+        document.title = `findtheti.me - ${event.name}`;
+    }, [event])
+
+    useEffect(() => {
+        if (event.fromDate === null || event.toDate === null || event.eventType === null) {
+            return;
+        }
+
+        let localTimezone = dayjs.tz.guess();
+
+        let localFromDate = event.fromDate.tz(localTimezone);
+        let localToDate = event.toDate.tz(localTimezone);
+
+        switch (event.eventType) {
+            case EventTypes.SPECIFIC_DATE: {
+                createAvailabilitiesBasedOnInitialDate(localFromDate, 1);
+                break;
+            }
+            case EventTypes.DATE_RANGE: {
+                createAvailabilitiesBasedOnInitialDate(localFromDate, Math.abs(localFromDate.diff(localToDate, "day", false)));
+                break;
+            }
+            case EventTypes.DAY: {
+                createAvailabilitiesBasedOnUnspecifiedInitialDate(1, localTimezone);
+                break;
+            }
+            case EventTypes.WEEK: {
+                createAvailabilitiesBasedOnUnspecifiedInitialDate(7, localTimezone);
+                break;
+            }
+        }
+    }, [event]);
+
+    useEffect(() => {
+        var valid = !utils.isNullOrUndefined(userName) && userName !== "";
+
+        valid &&= days.some(day => day.availableTimes.length > 0);
+
+        setCanSubmit(valid);
+    }, [userName, days]);
+
+    const createAvailabilitiesBasedOnUnspecifiedInitialDate = (numberOfDays: number, tz: string) => {
+        createAvailabilitiesBasedOnInitialDate(dayjs.tz("1970-01-05 00:00:00", tz), numberOfDays);
+    }
+
+    const createAvailabilitiesBasedOnInitialDate = (date: Dayjs, numberOfDays: number) => {
+        let availabilities: AvailabilityDay[] = [];
+
+        for (var i: number = 0; i < numberOfDays; i++) {
+            let availability: AvailabilityDay = {
+                forDate: date.add(i, "day").startOf("day"),
+                availableTimes: []
+            }
+
+            availabilities.push(availability);
+        }
+
+        setDays(availabilities);
+    }
+
+    const submitAvailabilities = () => {
+        utils.showSpinner();
+
+        let body = {
+            user_name: userName,
+            availabilities: days.flatMap(day => day.availableTimes.map(a => {
+                return {
+                    from_date: a.fromTime.utc(),
+                    to_date: a.toTime.utc()
+                }
+            }))
+        };
+
+        utils.performRequest(`/api/events/${eventId}/availabilities`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify(body)
+        })
+        .then(_ => navigate("/thank-you"))
+        .catch(e => toast.error(e))
+        .finally(() => utils.hideSpinner());
+    };
+
    return (
        <Grid container sx={{ p: 2 }} spacing={1}>
            <Grid xs={12}>
@ -49,29 +198,41 @@ export default function ExistingEventPage() {
                {
                    (event.fromDate !== null && event.toDate !== null && event.eventType !== null) &&
                    <AvailabilityPicker 
-                        fromDate={event.fromDate}
-                        toDate={event.toDate}
+                        days={days}
+                        setDays={(days) => setDays(days)}
+                        othersAvailabilities={othersDays}
                        eventType={event.eventType}
                        availabilityDurationInMinutes={event.duration}
                    />
                }
+                <Typography pt={1} fontSize={"0.65em"}>
+                    Left-click to select when you're available, right-click to remove the highlighted hours.
+                </Typography>
            </Grid>
            <Grid xs={0} md={3}></Grid>
            <Grid xs={12} md={6} container spacing={1}>
                <Grid xs={12} sm={9}>
                    <TextField
                        sx={{ width: "100%" }}
-                        // TODO
-                        // value={event.description}
-                        // onChange={(e) => {
-                        //     event.description = e.target.value;
-                        //     setEvent({...event});
-                        // }}
+                        value={userName || ""}
+                        onChange={(e) => {
+                            if (e.target.value?.length > 100) {
+                                e.preventDefault();
+                                return;
+                            }
+
+                            setUserName(e.target.value);
+                        }}
                        label="Your Name"
                    />
                </Grid>
                <Grid xs={12} sm={3}>
-                    <Button sx={{ width: "100%", height: "100%" }} variant="contained">
+                    <Button 
+                        sx={{ width: "100%", height: "100%" }} 
+                        variant="contained" 
+                        disabled={!canSubmit}
+                        onClick={(_) => submitAvailabilities()}
+                    >
                        <Typography>Submit</Typography>
                    </Button>
                </Grid>
--- a/frontend/src/pages/NewEventPage.tsx
+++ b/frontend/src/pages/NewEventPage.tsx
@ -1,10 +1,12 @@
 import { Alert, Button, MenuItem, Select, Slider, TextField, Typography } from '@mui/material';
 import Grid from '@mui/material/Unstable_Grid2'
-import { DateTimePicker } from '@mui/x-date-pickers';
+import { DatePicker } from '@mui/x-date-pickers';
 import { useEffect, useState } from 'react';
 import { useNavigate } from "react-router-dom"
 import { Event, EventTypes, createEvent } from '../types/Event';
 import utils from '../utils';
+import toast from 'react-hot-toast';
+import dayjs from 'dayjs';

 export default function NewEventPage() {
    const navigate = useNavigate(); 
@ -17,26 +19,42 @@ export default function NewEventPage() {
    }, [event])

    function validateEvent(): void {
-        console.log(event);
        var valid: boolean = true;

-        valid &&= event.name && event.name !== "";
-        valid &&= event.eventType !== EventTypes.UNKNOWN || event.eventType !== null;
+        let today = dayjs().hour(0).minute(0).second(0).millisecond(0);
+
+        valid &&= !utils.isNullOrUndefined(event.name) && event.name !== "";
+
+        valid &&= event.eventType !== EventTypes.UNKNOWN && event.eventType !== null;

        if (event.eventType === EventTypes.DATE_RANGE) {
-            valid &&= event.fromDate !== null;
-            valid &&= event.toDate !== null;
+
+            valid &&= !utils.isNullOrUndefined(event.fromDate) && !utils.isNullOrUndefined(event.toDate);
+
+            valid &&= !utils.isNullOrUndefined(event.toDate) && event.toDate!.unix() > today.unix();
+
+            valid &&= !utils.isNullOrUndefined(event.fromDate) && event.fromDate!.unix() >= today.unix();
+
+            valid &&= !utils.isNullOrUndefined(event.fromDate) && !utils.isNullOrUndefined(event.toDate) && event.toDate!.unix() > event.fromDate!.unix();
+
+            valid &&= !utils.isNullOrUndefined(event.fromDate) && !utils.isNullOrUndefined(event.toDate) && event.toDate!.diff(event.fromDate!, "days") >= 1;
+
+            valid &&= !utils.isNullOrUndefined(event.fromDate) && !utils.isNullOrUndefined(event.toDate) && event.toDate!.diff(event.fromDate!, "days") <= 14;
        }

        if (event.eventType === EventTypes.SPECIFIC_DATE) {
-            valid &&= event.fromDate !== null;
+            valid &&= !utils.isNullOrUndefined(event.fromDate);
+
+            valid &&= !utils.isNullOrUndefined(event.fromDate) && event.fromDate!.unix() >= today.unix();
        }

        setEventValid(valid);
    }

    function saveEvent() {
-        fetch("/api/events", {
+        utils.showSpinner();
+
+        utils.performRequest("/api/events", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
@ -50,10 +68,13 @@ export default function NewEventPage() {
                duration: event.duration
            })
        })
-        .then(resp => resp.json())
        .then(resp => {
-            navigate(resp.result.snowflake_id)
+            navigate(resp.snowflake_id)
        })
+        .catch(err => {
+            toast.error(err)
+        })
+        .finally(() => utils.hideSpinner());
    }

    return (
@ -146,8 +167,9 @@ export default function NewEventPage() {
                {
                    event.eventType == EventTypes.SPECIFIC_DATE &&
                    <Grid xs={12}>
-                        <DateTimePicker
+                        <DatePicker
                            sx={{ width: "100%" }}
+                            minDate={dayjs()}
                            value={event.fromDate}
                            onChange={(value) => {
                                event.fromDate = value ?? null;
@ -160,8 +182,9 @@ export default function NewEventPage() {
                {
                    event.eventType == EventTypes.DATE_RANGE &&
                    <Grid xs={12} sm={6}>
-                        <DateTimePicker
+                        <DatePicker
                            sx={{ width: "100%" }}
+                            minDate={dayjs()}
                            value={event.fromDate}
                            onChange={(value) => {
                                event.fromDate = value ?? null;
@ -174,8 +197,10 @@ export default function NewEventPage() {
                {
                    event.eventType == EventTypes.DATE_RANGE &&
                    <Grid xs={12} sm={6}>
-                        <DateTimePicker
+                        <DatePicker
                            sx={{ width: "100%" }}
+                            minDate={event.fromDate?.add(1, "day") ?? dayjs().add(1, "day")}
+                            maxDate={event.fromDate?.add(14, "day") ?? dayjs().add(14, "day")}
                            value={event.toDate}
                            onChange={(value) => {
                                event.toDate = value ?? null;
--- a/frontend/src/pages/RootLayout.tsx
+++ b/frontend/src/pages/RootLayout.tsx
@ -1,5 +1,5 @@
 import { ThemeProvider } from "@emotion/react";
-import { CssBaseline, Divider, Paper, createTheme } from "@mui/material";
+import { Backdrop, CircularProgress, CssBaseline, Divider, Paper, createTheme } from "@mui/material";
 import Grid from '@mui/material/Unstable_Grid2'
 import GithubCorner from "react-github-corner";
 import Header from "../components/Header";
@ -7,7 +7,10 @@ import Footer from "../components/Footer";
 import { LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
 import dayjs from "dayjs";
-import * as utc from 'dayjs/plugin/utc';
+import utc from 'dayjs/plugin/utc';
+import { Toaster } from "react-hot-toast";
+import { useEffect, useState } from "react";
+import utils from "../utils";

 dayjs.extend(utc);

@ -17,11 +20,39 @@ const theme = createTheme({
    }
 });

-export default function RootLayout(props: { children: React.ReactNode }) {
+const RootLayout = (props: { children: React.ReactNode }) => {
+
+    const [spinner, showSpinner] = useState<boolean>(false);
+
+    useEffect(() => {
+        window.addEventListener("onSpinnerStatusChange", () => {
+            showSpinner(utils.isSpinnerShown());
+        });
+    }, []);
+
    return (
        <ThemeProvider theme={theme}>
            <CssBaseline/>

+            {
+                <Backdrop
+                    sx={{
+                        color: '#fff',
+                        zIndex: 2147483647
+                    }}
+                    open={spinner}
+                >
+                    <CircularProgress
+                        sx={{
+                            position: "absolute",
+                            zIndex: 2147483647,
+                            top: "50%",
+                            left: "50%"
+                        }}
+                    />
+                </Backdrop>
+            }
+
            <GithubCorner
                href={"https://github.com/mvvasilev/findtheti.me"}
                bannerColor="#FD6C6C"
@ -67,6 +98,23 @@ export default function RootLayout(props: { children: React.ReactNode }) {
                    </Grid>
                </LocalizationProvider>
            </Paper>
+
+            <Toaster
+                toastOptions={{
+                    success: {
+                        style: {
+                            background: '#dad7cd',
+                        },
+                    },
+                    error: {
+                        style: {
+                            background: '#ff8fab',
+                        },
+                    },
+                }}
+            />
        </ThemeProvider>
    );
 };
+
+export default RootLayout;
--- a/frontend/src/pages/ThankYouPage.tsx
+++ b/frontend/src/pages/ThankYouPage.tsx
@ -0,0 +1,23 @@
+import { Typography } from '@mui/material';
+import Grid from '@mui/material/Unstable_Grid2'
+import { useNavigate } from 'react-router-dom';
+
+const ThankYouPage = () => {
+    const navigate = useNavigate();
+
+    return (
+        <Grid container sx={{ p: 2 }} spacing={1}>
+            <Grid xs={12}>
+                <Typography variant={"h2"}>Thank You!</Typography>
+            </Grid>
+            <Grid xs={12}>
+                <Typography>Your response has been recorded. Check in with the event organizer(s) for the exact date and time!</Typography>
+            </Grid>
+            <Grid xs={12}>
+                <Typography>To view the available times of all attendees, feel free to <a href="#" onClick={() => navigate(-1)}>navigate back to the event page</a>.</Typography>
+            </Grid>
+        </Grid>
+    );
+}
+
+export default ThankYouPage;
--- a/frontend/src/types/Availabilities.tsx
+++ b/frontend/src/types/Availabilities.tsx
@ -0,0 +1,21 @@
+import { Dayjs } from "dayjs"
+
+export type AvailabilityTime = {
+    fromTime: Dayjs,
+    toTime: Dayjs
+}
+
+export type AvailabilityDay = {
+    forDate: Dayjs,
+    availableTimes: AvailabilityTime[]
+}
+
+export type OthersDays = {
+    userName: String, 
+    days: AvailabilityDay[]
+}
+
+export type OthersDay = {
+    userName: String,
+    availableTimes: AvailabilityTime[]
+}
--- a/frontend/src/utils.ts
+++ b/frontend/src/utils.ts
@ -1,9 +1,43 @@
-import dayjs from "dayjs";
-import * as duration from 'dayjs/plugin/duration';
-
-dayjs.extend(duration)
+import dayjs, { Dayjs } from "dayjs";
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import duration from 'dayjs/plugin/duration';
+dayjs.extend(utc)
+dayjs.extend(timezone)
+dayjs.extend(localizedFormat)
+dayjs.extend(duration);

 const utils = {
+    performRequest: (url: string | URL | Request, options?: RequestInit | undefined): Promise<any> => {
+        return fetch(url, options).then(async resp => {
+            if (!resp.ok) {
+                let errorTextResult = await resp.text();
+
+                var errorMsg = errorTextResult;
+
+                try {
+                    let jsonResult: any = JSON.parse(errorTextResult);
+
+                    errorMsg = jsonResult?.error?.message;
+                } catch(err) {
+                    errorMsg = errorTextResult;
+                }
+
+                throw errorMsg;
+            } else {
+                let successTextResult = await resp.text();
+
+                try {
+                    let jsonResult = JSON.parse(successTextResult);
+
+                    return jsonResult?.result;
+                } catch(err) {
+                    return successTextResult;
+                }
+            }
+        })
+    },
    toHoursAndMinutes: (totalMinutes: number): { hours: number, minutes: number } => {
        const hours = Math.floor(totalMinutes / 60);
        const minutes = totalMinutes % 60;
@ -24,6 +58,26 @@ const utils = {
    },
    formatTimeFromHourOfDay: (hourOfDay: number, minutes: number): String => {
        return dayjs.duration({ hours: hourOfDay, minutes: minutes }).format('HH:mm');
+    },
+    dayjsIsBetweenUnixExclusive: (lowerBound: Dayjs, time: Dayjs, upperBound: Dayjs): boolean => {
+        return lowerBound.unix() <= time.unix() && time.unix() < upperBound.unix()
+    },
+    dayjsIsBetweenUnixInclusive: (lowerBound: Dayjs, time: Dayjs, upperBound: Dayjs): boolean => {
+        return lowerBound.unix() <= time.unix() && time.unix() <= upperBound.unix()
+    },
+    isSpinnerShown: (): boolean => {
+        return localStorage.getItem("SpinnerShowing") === "true";
+    },
+    showSpinner: (): void => {
+        localStorage.setItem("SpinnerShowing", "true");
+        window.dispatchEvent(new Event("onSpinnerStatusChange"));
+    },
+    hideSpinner: (): void => {
+        localStorage.removeItem("SpinnerShowing");
+        window.dispatchEvent(new Event("onSpinnerStatusChange"));
+    },
+    isNullOrUndefined: (thing: any): boolean => {
+        return thing === null || thing === undefined;
    }
 }

--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@ -5,6 +5,7 @@
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
+    "esModuleInterop": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@ -1487,6 +1487,11 @@ globby@^11.1.0:
    merge2 "^1.4.1"
    slash "^3.0.0"

+goober@^2.1.10:
+  version "2.1.13"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.13.tgz#e3c06d5578486212a76c9eba860cbc3232ff6d7c"
+  integrity sha512-jFj3BQeleOoy7t93E9rZ2de+ScC4lQICLwiAQmKMg9F6roKGaLSHoCDYKkWlSafg138jejvq/mTdvmnwDQgqoQ==
+
 graphemer@^1.4.0:
  version "1.4.0"
  resolved "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz"
@ -1864,6 +1869,13 @@ react-github-corner@^2.5.0:
  resolved "https://registry.yarnpkg.com/react-github-corner/-/react-github-corner-2.5.0.tgz#e350d0c69f69c075bc0f1d2a6f1df6ee91da31f2"
  integrity sha512-ofds9l6n61LJc6ML+jSE6W9ZSQvATcMR9evnHPXua1oDYj289HKODnVqFUB/g2a4ieBjDHw416iHP3MjqnU76Q==

+react-hot-toast@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.1.tgz#df04295eda8a7b12c4f968e54a61c8d36f4c0994"
+  integrity sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==
+  dependencies:
+    goober "^2.1.10"
+
 react-is@^16.13.1, react-is@^16.7.0:
  version "16.13.1"
  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
--- a/src/api.rs
+++ b/src/api.rs
@ -31,18 +31,26 @@ pub(crate) async fn routes() -> Result<Router, ApplicationError> {
        .with_state(AppState::new().await?))
 }

-pub(crate) fn ok<T: Serialize, E: Error>(r: Result<T, E>) -> UniversalResponseDto<T> {
+pub(crate) fn ok<T: Serialize>(r: Result<T, ApplicationError>) -> UniversalResponseDto<T> {
    match r {
        Ok(res) => UniversalResponseDto {
            status: StatusCode::OK,
            result: Some(res),
            error: None,
        },
-        Err(err) => internal_server_error(err),
+        Err(err) => error(err),
    }
 }

-pub(crate) fn internal_server_error<T: Serialize, E: Error>(e: E) -> UniversalResponseDto<T> {
+pub(crate) fn error<T: Serialize>(e: ApplicationError) -> UniversalResponseDto<T> {
+    UniversalResponseDto {
+        status: e.status,
+        result: None,
+        error: Some(ErrorDto { message: format!("{}", e)})
+    }
+}
+
+pub(crate) fn internal_server_error<T: Serialize>(e: ApplicationError) -> UniversalResponseDto<T> {
    UniversalResponseDto {
        status: StatusCode::INTERNAL_SERVER_ERROR,
        result: None,
@ -104,14 +112,15 @@ impl AppState {
    }
 }

-#[derive(Debug, Serialize)]
+#[derive(Debug)]
 pub struct ApplicationError {
+    status: StatusCode,
    msg: String,
 }

 impl ApplicationError {
-    pub fn new(msg: String) -> Self {
-        Self { msg }
+    pub fn new(msg: String, status: StatusCode) -> Self {
+        Self { msg, status }
    }
 }

@ -119,6 +128,7 @@ impl From<sqlx::Error> for ApplicationError {
    fn from(value: sqlx::Error) -> Self {
        Self {
            msg: value.to_string(),
+            status: StatusCode::INTERNAL_SERVER_ERROR
        }
    }
 }
@ -127,6 +137,7 @@ impl From<MigrateError> for ApplicationError {
    fn from(value: MigrateError) -> Self {
        Self {
            msg: value.to_string(),
+            status: StatusCode::INTERNAL_SERVER_ERROR
        }
    }
 }
@ -135,6 +146,7 @@ impl From<VarError> for ApplicationError {
    fn from(value: VarError) -> Self {
        Self {
            msg: value.to_string(),
+            status: StatusCode::INTERNAL_SERVER_ERROR
        }
    }
 }
--- a/src/endpoints.rs
+++ b/src/endpoints.rs
@ -1,6 +1,8 @@
+use std::net::SocketAddr;
+
 use axum::{
-    extract::{Path, State},
-    Json,
+    extract::{Path, State, ConnectInfo},
+    Json, http::StatusCode, Extension,
 };
 use chrono::{DateTime, TimeZone, Utc};
 use rand::{distributions::Alphanumeric, Rng};
@ -13,7 +15,7 @@ use crate::{
    entity::{
        availability::Availability,
        event::{Event, EventType},
-    },
+    }
 };

 #[derive(Deserialize)]
@ -41,7 +43,6 @@ pub struct EventDto {
 pub struct CreateAvailabilitiesDto {
    availabilities: Vec<CreateAvailabilityDto>,
    user_email: Option<String>,
-    user_ip: String,
    user_name: String,
 }

@ -67,7 +68,7 @@ pub async fn create_event(

    let mut conn = match app_state.db_pool.acquire().await {
        Ok(c) => c,
-        Err(e) => return api::internal_server_error(e),
+        Err(e) => return api::internal_server_error(e.into()),
    };

    let res = conn
@ -82,9 +83,31 @@ pub async fn create_event(
                let event_type: EventType = dto.event_type.into();

                if matches!(event_type, EventType::Unknown) {
-                    return Err(ApplicationError::new(
-                        "Unknown event type, invalid variant.".to_string(),
-                    ));
+                    return Err(ApplicationError::new("Unknown event type, invalid variant.".to_string(), StatusCode::UNPROCESSABLE_ENTITY));
+                }
+
+                if matches!(event_type, EventType::SpecificDate) && dto.from_date.is_none() {
+                    return Err(ApplicationError::new("SpecificDate event type supplied, but missing from_date".to_string(), StatusCode::UNPROCESSABLE_ENTITY));
+                }
+
+                if matches!(event_type, EventType::DateRange) {
+                    match (dto.from_date, dto.to_date) {
+                        (Some(from), Some(to)) => {
+                            if from >= to {
+                                return Err(ApplicationError::new("Supplied from_date is later than or equal to to_date".to_string(), StatusCode::UNPROCESSABLE_ENTITY));
+                            }
+
+                            if (to - from).num_days() < 1 {
+                                return Err(ApplicationError::new("Difference between from_date and to_date is less than 1 day".to_string(), StatusCode::UNPROCESSABLE_ENTITY));
+                            }
+
+                            if (to - from).num_days() > 14 {
+                                return Err(ApplicationError::new("Difference between from_date and to_date is greater than 14 days ( current supported maximum )".to_string(), StatusCode::UNPROCESSABLE_ENTITY));
+                            }
+                        },
+                        _ => return Err(ApplicationError::new("DateRange event type supplied, but missing either from_date or to_date".to_string(), StatusCode::UNPROCESSABLE_ENTITY))
+                    }
+
                }

                let event_id = db::insert_event_and_fetch_id(
@ -117,7 +140,7 @@ pub async fn create_event(
        })
        .await;

-    api::ok::<EventDto, ApplicationError>(res)
+    api::ok::<EventDto>(res)
 }

 pub async fn fetch_event(
@ -126,7 +149,7 @@ pub async fn fetch_event(
 ) -> UniversalResponseDto<EventDto> {
    let mut conn = match app_state.db_pool.acquire().await {
        Ok(c) => c,
-        Err(e) => return api::internal_server_error(e),
+        Err(e) => return api::internal_server_error(e.into()),
    };

    let res = conn
@ -147,35 +170,39 @@ pub async fn fetch_event(
        })
        .await;

-    api::ok::<EventDto, ApplicationError>(res)
+    api::ok::<EventDto>(res)
 }

 pub async fn create_availabilities(
    State(app_state): State<AppState>,
    Path(event_snowflake_id): Path<String>,
+    ConnectInfo(addr): ConnectInfo<SocketAddr>,
    Json(dto): Json<CreateAvailabilitiesDto>,
 ) -> UniversalResponseDto<()> {
    let mut conn = match app_state.db_pool.acquire().await {
        Ok(c) => c,
-        Err(e) => return api::internal_server_error(e),
+        Err(e) => return api::internal_server_error(e.into()),
    };

    let res = conn
        .transaction(|txn| {
            Box::pin(async move {
+                let user_ip = format!("{}", addr.ip());
+
                let event = db::fetch_event_by_snowflake_id(txn, event_snowflake_id).await?;

                let current_availabilities = db::fetch_event_availabilities(txn, event.id).await?;

                let already_submitted = current_availabilities.iter().any(|a| {
-                    (dto.user_email.is_none() && a.user_email == dto.user_email)
-                        || a.user_ip == dto.user_ip
+                    (dto.user_email.is_some() && a.user_email.is_some() && a.user_email == dto.user_email)
+                        || a.user_ip == user_ip
                        || a.user_name == dto.user_name
                });

                if already_submitted {
                    return Err(ApplicationError::new(
                        "Availability already submitted".to_string(),
+                        StatusCode::UNPROCESSABLE_ENTITY
                    ));
                }

@ -190,7 +217,7 @@ pub async fn create_availabilities(
                            from_date: a.from_date.naive_utc(),
                            to_date: a.to_date.naive_utc(),
                            user_email: dto.user_email.clone(),
-                            user_ip: dto.user_ip.clone(),
+                            user_ip: user_ip.clone(),
                            user_name: dto.user_name.clone(),
                        },
                    )
@ -202,7 +229,7 @@ pub async fn create_availabilities(
        })
        .await;

-    api::ok::<(), ApplicationError>(res)
+    api::ok::<()>(res)
 }

 pub async fn fetch_availabilities(
@ -211,7 +238,7 @@ pub async fn fetch_availabilities(
 ) -> UniversalResponseDto<Vec<AvailabilityDto>> {
    let mut conn = match app_state.db_pool.acquire().await {
        Ok(c) => c,
-        Err(e) => return api::internal_server_error(e),
+        Err(e) => return api::internal_server_error(e.into()),
    };

    let res = conn
@ -234,5 +261,5 @@ pub async fn fetch_availabilities(
        })
        .await;

-    api::ok::<Vec<AvailabilityDto>, ApplicationError>(res)
+    api::ok::<Vec<AvailabilityDto>>(res)
 }
--- a/src/main.rs
+++ b/src/main.rs
@ -30,7 +30,7 @@ async fn main() {

    let listener = TcpListener::bind(addr).await.unwrap();

-    axum::serve(listener, routes.into_make_service())
+    axum::serve(listener, routes.into_make_service_with_connect_info::<SocketAddr>())
        .await
        .unwrap();
 }