Copied all potty chart code without changes.

src/components/buttons/Custom.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Box, Link, Button, BoxProps } from "@chakra-ui/react";
+import { motion } from "framer-motion";
+
+interface CustomButtonProps {
+  text: string;
+  link: string;
+  type: "primary" | "secondary" | "footer";
+}
+
+const MotionBox = motion<BoxProps>(Box);
+
+const CustomButton = ({ text, link, type }: CustomButtonProps): JSX.Element => {
+  return (
+    <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+      <Link href={link} target="_blank" rel="noopener">
+        <Button variant={type}>{text}</Button>
+      </Link>
+    </MotionBox>
+  );
+};
+
+export default CustomButton;

src/components/buttons/KoFi.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Box, Link, Button, BoxProps } from "@chakra-ui/react";
+import { Icon } from "@iconify/react";
+import { motion } from "framer-motion";
+
+const MotionBox = motion<BoxProps>(Box);
+
+const KoFi = (): JSX.Element => {
+  return (
+    <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+      <Link
+        href="https://ko-fi.com/lucidcreationsmedia"
+        target="_blank"
+        rel="noopener"
+      >
+        <Button variant="kofi" leftIcon={<Icon icon="cib:ko-fi" />}>
+          {"Fund The App"}
+        </Button>
+      </Link>
+    </MotionBox>
+  );
+};
+
+export default KoFi;

src/components/buttons/data/links.ts

@@ -0,0 +1,30 @@
+export interface LinkObj {
+  href?: string;
+  name?: string;
+  type: "primary" | "secondary" | "updates" | "ko-fi";
+}
+
+type Links = LinkObj[];
+
+const links: Links = [
+  {
+    href: "https://docs.google.com/document/d/1hrerGKHTO3iach8A-CabtfIB4lyZWlgO8EGTyOCrI2Y",
+    name: "Roadmap and Progress",
+    type: "secondary"
+  },
+  {
+    href: "https://lucidcreations.media/lcm-potty-chart/",
+    name: "Official Announcement",
+    type: "secondary"
+  },
+  {
+    type: "ko-fi"
+  },
+  {
+    href: "https://t.me/LucidCreationsMedia",
+    name: "Dev Updates",
+    type: "secondary"
+  }
+];
+
+export default links;

src/components/buttons/index.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { Box, HStack, VStack } from "@chakra-ui/react";
+import CustomButton from "./Custom";
+import links, { LinkObj } from "./data/links";
+import KoFi from "./KoFi";
+
+const Buttons = (): JSX.Element => {
+  return (
+    <Box h="auto" w="100%">
+      <HStack
+        display={{ base: "none", lg: "flex" }}
+        h="auto"
+        w="100%"
+        justifyContent="center"
+        alignContent="center"
+        spacing={4}
+      >
+        {links.map((link: LinkObj) => {
+          const { href, name, type } = link;
+
+          if (type === "primary" || type === "secondary") {
+            return (
+              <CustomButton
+                key={name.replaceAll(" ", "-")}
+                link={href}
+                text={name}
+                type={type}
+              />
+            );
+          }
+
+          if (type === "ko-fi") {
+            return <KoFi key={type} />;
+          }
+        })}
+      </HStack>
+      <VStack
+        display={{ base: "flex", lg: "none" }}
+        h="auto"
+        w="100%"
+        justifyContent="center"
+        alignContent="center"
+        spacing={4}
+      >
+        {links.map((link: LinkObj) => {
+          const { href, name, type } = link;
+
+          if (type === "primary" || type === "secondary") {
+            return (
+              <CustomButton
+                key={name.replaceAll(" ", "-")}
+                link={href}
+                text={name}
+                type={type}
+              />
+            );
+          }
+
+          if (type === "ko-fi") {
+            return <KoFi key={type} />;
+          }
+        })}
+      </VStack>
+    </Box>
+  );
+};
+
+export default Buttons;

src/components/calender/CalenderNav.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { useAppSelector } from "../../redux/hooks";
+import { useRouter } from "next/router";
+import { HStack, IconButton } from "@chakra-ui/react";
+import { Icon } from "@iconify/react";
+import { format, isSameMonth, addMonths, subMonths } from "date-fns";
+import findValidDateRange from "../../../lib/findValidDateRange";
+import DatePicker from "./DatePicker";
+
+interface CalenderNavProps {
+  isLoading: boolean;
+  title: string;
+}
+
+/**
+ * @param {boolean} isLoading is the component loading?
+ * @param {string} title the title for the current date.
+ */
+
+const CalenderNav = ({ title, isLoading }: CalenderNavProps): JSX.Element => {
+  const selectedDate = useAppSelector(
+    (state) => state.calender.selectedDateInfo
+  );
+  const { date } = selectedDate;
+
+  const selectedDateObj = new Date(date);
+
+  const validDateRange = findValidDateRange();
+  const { start: validStart, end: validEnd } = validDateRange;
+
+  const router = useRouter();
+
+  const handleNavButtons = (direction: "next" | "prev") => {
+    if (direction === "next") {
+      const newMonth = addMonths(selectedDateObj, 1);
+
+      const year = format(newMonth, "y");
+      const month = format(newMonth, "L");
+
+      router.push(`/calendar/${year}/${month}`);
+    } else if (direction === "prev") {
+      const newMonth = subMonths(selectedDateObj, 1);
+
+      const year = format(newMonth, "y");
+      const month = format(newMonth, "L");
+
+      router.push(`/calendar/${year}/${month}`);
+    }
+  };
+
+  return (
+    <HStack spacing={10} as="nav" w="auto" h="10vh" textAlign="center">
+      <IconButton
+        isDisabled={isSameMonth(selectedDateObj, validStart)}
+        aria-label="Previous Month"
+        icon={<Icon icon="akar-icons:chevron-left" />}
+        onClick={() => handleNavButtons("prev")}
+      />
+      <DatePicker isLoading={isLoading} title={title} />
+      <IconButton
+        isDisabled={isSameMonth(selectedDateObj, validEnd)}
+        aria-label="Next Month"
+        icon={<Icon icon="akar-icons:chevron-right" />}
+        onClick={() => handleNavButtons("next")}
+      />
+    </HStack>
+  );
+};
+
+export default CalenderNav;

src/components/calender/DatePicker.tsx

@@ -0,0 +1,284 @@
+import React, { useRef, useState } from "react";
+import { useRouter } from "next/router";
+import {
+  Button,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Heading,
+  HStack,
+  Input,
+  Popover,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTrigger,
+  Skeleton,
+  VStack
+} from "@chakra-ui/react";
+import {
+  Formik,
+  // FormikHelpers,
+  FormikProps,
+  Form,
+  Field,
+  FieldProps
+} from "formik";
+import { format } from "date-fns";
+import findValidDateRange from "../../../lib/findValidDateRange";
+import FormValidateEmoji from "./FormValidateEmoji";
+
+interface DatePickerProps {
+  isLoading: boolean;
+  title: string;
+}
+
+/**
+ * @param {boolean} isLoading is the component loading?
+ * @param {string} title the title for the current date.
+ */
+
+const DatePicker = ({ title, isLoading }: DatePickerProps): JSX.Element => {
+  const router = useRouter();
+
+  const [valid, setValid] = useState<boolean>(false);
+
+  const validDateRange = findValidDateRange();
+
+  const validateDate = (
+    dateString?: string | undefined
+  ): string | undefined => {
+    let dateError;
+
+    if (dateString) {
+      const dateArr = dateString.split("-");
+      if (dateArr.length !== 3) {
+        dateError = "Please select a date.";
+        setValid(false);
+      } else if (dateArr.length === 3) {
+        const date: UpdateCalenderPropsDateLayout = {
+          year: parseInt(dateArr[0]),
+          month: parseInt(dateArr[1]),
+          day: parseInt(dateArr[2])
+        };
+
+        if (!/^(19|20)\d{2}$/.test(`${date.year}`)) {
+          dateError = "Please use a year between 1900 and 2099";
+          setValid(false);
+        }
+
+        if (date.month < 1 || date.month > 12) {
+          dateError = "Please use a month between 1 and 12";
+          setValid(false);
+        }
+
+        if (date.day < 1 || date.day > 31) {
+          dateError = "Please use a day between 1 and 31";
+          setValid(false);
+        }
+
+        setValid(true);
+      } else {
+        setValid(true);
+      }
+    } else if (dateString.length === 0) {
+      dateError = "Please select a date.";
+      setValid(false);
+    } else {
+      setValid(true);
+    }
+
+    return dateError;
+  };
+
+  const handleSubmit = (formInput?: { date?: string }): Promise<unknown> => {
+    return new Promise((resolve, reject) => {
+      if (formInput.date) {
+        if (!validateDate(formInput.date)) {
+          const dateArr = formInput.date.split("-");
+          const date: UpdateCalenderPropsDateLayout = {
+            year: parseInt(dateArr[0]),
+            month: parseInt(dateArr[1]),
+            day: parseInt(dateArr[2])
+          };
+
+          return resolve(router.push(`/calendar/${date.year}/${date.month}`));
+        } else {
+          return reject("Error validating date.");
+        }
+      } else {
+        return reject("Date not provided.");
+      }
+    });
+  };
+
+  // Field theme
+  const fieldTheme = {
+    width: "auto",
+    bg: "gray.900",
+    borderColor: "white",
+    _placeholder: {
+      color: "white"
+    },
+    _focus: {
+      bg: "#000",
+      color: "#FFF",
+      borderColor: "#63b3ed",
+      boxShadow: "0 0 0 1px #63b3ed",
+      zIndex: "1"
+    }
+  };
+
+  const initRef = useRef();
+
+  return (
+    <Popover placement="bottom" initialFocusRef={initRef}>
+      <PopoverTrigger>
+        <Button border="none" variant="outline">
+          {isLoading ? (
+            <Skeleton>
+              <Heading w="100%" h="auto">
+                {title}
+              </Heading>
+            </Skeleton>
+          ) : (
+            <Heading w="100%" h="auto">
+              {title}
+            </Heading>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <PopoverHeader py={2} fontWeight="semibold">
+          <Heading size="md" as="h3">
+            {"Choose a Date"}
+          </Heading>
+        </PopoverHeader>
+        <PopoverCloseButton />
+        <PopoverBody textAlign="center">
+          <Formik
+            initialValues={{
+              date: ""
+            }}
+            onSubmit={(data, actions) => {
+              handleSubmit(data)
+                .then(() => {
+                  actions.setSubmitting(false);
+                  actions.resetForm({
+                    values: {
+                      date: ""
+                    }
+                  });
+                })
+                .catch(() => {
+                  actions.setSubmitting(false);
+                });
+            }}
+          >
+            {(
+              formProps: FormikProps<{
+                date: string;
+              }>
+            ) => (
+              <Form
+                style={{
+                  width: "100%",
+                  height: "auto"
+                }}
+              >
+                <VStack
+                  alignItems="center"
+                  alignContent="flex-start"
+                  w="100%"
+                  h="auto"
+                  spacing={6}
+                  py={4}
+                >
+                  <Heading as="h4" size="sm" fontWeight="semibold">
+                    {"Required fields indicated with"}
+                    <FormValidateEmoji type="Required" />
+                  </Heading>
+                  <Field name="date" validate={validateDate}>
+                    {({ field, form }: FieldProps) => (
+                      <FormControl
+                        isInvalid={
+                          form.errors.date && form.touched.date ? true : false
+                        }
+                      >
+                        <VStack
+                          alignContent="center"
+                          alignItems="center"
+                          spacing={2}
+                          w="100%"
+                          h="auto"
+                        >
+                          <HStack
+                            alignContent="center"
+                            alignItems="center"
+                            pl={4}
+                            w="100%"
+                            h="auto"
+                            spacing={2}
+                          >
+                            <FormLabel fontWeight="semibold" htmlFor="date">
+                              {"Date:"}
+                            </FormLabel>
+                            <Input
+                              required
+                              {...fieldTheme}
+                              type="date"
+                              isDisabled={formProps.isSubmitting}
+                              {...field}
+                              id="date"
+                              textAlign="center"
+                              min={format(validDateRange.start, "yyyy-MM-dd")}
+                              max={format(validDateRange.end, "yyyy-MM-dd")}
+                              {...(!form.errors.date && form.touched.date
+                                ? {
+                                    borderColor: "brand.valid",
+                                    boxShadow: "0 0 0 1px #00c17c",
+                                    _hover: {
+                                      borderColor: "brand.valid",
+                                      boxShadow: "0 0 0 1px #00c17c"
+                                    }
+                                  }
+                                : "")}
+                            />
+                            {!form.touched.date && (
+                              <FormValidateEmoji type="Required" />
+                            )}
+                            {form.errors.name && form.touched.date && (
+                              <FormValidateEmoji type="Error" />
+                            )}
+                            {!form.errors.name && form.touched.date && (
+                              <FormValidateEmoji type="Valid" />
+                            )}
+                          </HStack>
+                          <FormErrorMessage>
+                            {typeof form.errors.date === "string" &&
+                              form.errors.date}
+                          </FormErrorMessage>
+                        </VStack>
+                      </FormControl>
+                    )}
+                  </Field>
+                  <Button
+                    isDisabled={!valid}
+                    background={valid ? "brand.valid" : "brand.danger"}
+                    isLoading={formProps.isSubmitting}
+                    type="submit"
+                  >
+                    {"Select this date"}
+                  </Button>
+                </VStack>
+              </Form>
+            )}
+          </Formik>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default DatePicker;

src/components/calender/Day.tsx

@@ -0,0 +1,262 @@
+import React, { useState } from "react";
+import { Provider } from "react-redux";
+import { store } from "../../redux/store";
+import { Box, Skeleton, VStack } from "@chakra-ui/react";
+import {
+  add,
+  getYear,
+  getMonth,
+  sub,
+  getDate,
+  isBefore,
+  endOfDay,
+  isToday as isTodayFun
+} from "date-fns";
+import router from "next/router";
+import AddUpdateSticker from "./modals/AddUpdateSticker";
+import DemoStickers from "./stickers/DemoStickers";
+
+interface DayProps {
+  isLoading: boolean;
+  isOverflow?: boolean;
+  overflowDirection?: "next" | "prev" | null;
+  currSticker: StickerVal;
+  date: string;
+  selectedDate: string;
+  currDate: Date;
+  tutorial?: "add" | "edit";
+}
+
+/**
+ * The individual days in the calender component.
+ * @param {boolean} isLoading is the component loading?
+ * @param {boolean} isOverflow is the current date being given before or after the current month.
+ * @param {"next" | "prev" | null} overflowDirection the direction the overflow is. This will navigate the calender forward or backwards 1 month.
+ * @param {StickerVal} currSticker the sticker for this date.
+ * @param {date} date the date for this day.
+ * @param {date} selectedDate the date for the selected month.
+ * @param {Date} currDate today's date.
+ */
+const Day = ({
+  isLoading,
+  isOverflow,
+  overflowDirection,
+  currSticker,
+  date,
+  selectedDate,
+  currDate,
+  tutorial
+}: DayProps): JSX.Element => {
+  const selectedDateObj = new Date(selectedDate);
+  const currDateObj = new Date(date);
+  const isToday = isTodayFun(currDateObj);
+
+  const handleNav = (direction: "next" | "prev") => {
+    if (direction === "next") {
+      console.log(overflowDirection);
+      const newMonth = add(selectedDateObj, { months: 1 });
+
+      const year = getYear(newMonth);
+      const month = getMonth(newMonth) + 1;
+
+      router.push(`/calendar/${year}/${month}`);
+    } else if (direction === "prev") {
+      const newMonth = sub(selectedDateObj, { months: 1 });
+
+      const year = getYear(newMonth);
+      const month = getMonth(newMonth) + 1;
+
+      router.push(`/calendar/${year}/${month}`);
+    }
+  };
+
+  // This handles the modal for the day.
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  // The step the modal is at.
+  const [step, setStep] = useState<number>(0);
+
+  // The current selected sticker. (To be added or updated)
+  const [selectedSticker, setSelectedSticker] = useState<StickerVal>(null);
+
+  /**
+   * TODO: Add logic to remove the onClick within overflow dates.
+   * Do not give dates for the next month an onClick.
+   * Do not give dates in the past an onClick there is nothing before that month.
+   * (Creation date of a chart)
+   */
+
+  // TODO: When the valid date range is created, disallow pointer cursor outside of the date range.
+
+  return isOverflow ? (
+    <VStack
+      w="100%"
+      h="100%"
+      bg="transparent"
+      pt={2}
+      color="gray.600"
+      border="1px solid #181d8f"
+      _hover={{
+        cursor: isBefore(currDateObj, endOfDay(currDate))
+          ? selectedSticker !== null
+            ? "pointer"
+            : "default"
+          : "default",
+        background: "gray.700",
+        border: "1px solid #FFF",
+        color: "whiteAlpha.900"
+      }}
+      onClick={() =>
+        selectedSticker !== null ? handleNav(overflowDirection) : ""
+      }
+      spacing="0.5rem"
+      alignContent="center"
+      justifyContent="flex-start"
+    >
+      <Box w="1.8rem" h="1.8rem" textAlign="center" p={0} m={0}>
+        {`${getDate(currDateObj)}`}
+      </Box>
+      {isLoading ? (
+        <Skeleton key={currSticker}>
+          <Box fontSize="1.5rem">
+            <DemoStickers stickerVal={0} />
+          </Box>
+        </Skeleton>
+      ) : (
+        <Box key={currSticker} fontSize="1.5rem">
+          <DemoStickers stickerVal={currSticker} />
+        </Box>
+      )}
+    </VStack>
+  ) : (
+    <VStack
+      w="100%"
+      h="100%"
+      bg={
+        tutorial
+          ? tutorial === "add" && isToday
+            ? "gray.600"
+            : tutorial === "edit" &&
+              !isToday &&
+              isBefore(currDateObj, endOfDay(currDate))
+            ? "gray.600"
+            : "transparent"
+          : "transparent"
+      }
+      border={
+        tutorial
+          ? tutorial === "add" && isToday
+            ? "1px solid #00ff3c"
+            : tutorial === "edit" &&
+              !isToday &&
+              isBefore(currDateObj, endOfDay(currDate))
+            ? "1px solid #00ff3c"
+            : "1px solid #0068ff"
+          : "1px solid #0068ff"
+      }
+      onClick={() => {
+        setStep(0);
+        setSelectedSticker(null);
+        setIsOpen(true);
+      }}
+      alignContent="center"
+      justifyContent="flex-start"
+      pt={2}
+      _hover={{
+        cursor: isBefore(currDateObj, endOfDay(currDate))
+          ? "pointer"
+          : "default",
+        bg: tutorial
+          ? tutorial === "add" && isToday
+            ? "gray.600"
+            : tutorial === "edit" &&
+              !isToday &&
+              isBefore(currDateObj, endOfDay(currDate))
+            ? "gray.600"
+            : "transparent"
+          : "transparent",
+        border: "1px solid #FFF"
+      }}
+    >
+      {isToday ? (
+        <Box
+          border="1px solid #0068ff"
+          borderRadius="50%"
+          w="1.8rem"
+          h="1.8rem"
+          textAlign="center"
+          p={0}
+          m={0}
+        >
+          {`${getDate(currDateObj)}`}
+        </Box>
+      ) : (
+        <Box w="1.8rem" h="1.8rem" textAlign="center" p={0} m={0}>
+          {`${getDate(currDateObj)}`}
+        </Box>
+      )}
+      {isLoading ? (
+        <Skeleton key={currSticker}>
+          <Box fontSize="1.5rem">
+            <DemoStickers stickerVal={0} />
+          </Box>
+        </Skeleton>
+      ) : (
+        <Box key={currSticker} fontSize="1.5rem">
+          <DemoStickers stickerVal={currSticker} />
+        </Box>
+      )}
+      {tutorial ? (
+        <Provider store={store}>
+          {tutorial.toLowerCase() === "add" && isToday && !isLoading && (
+            <AddUpdateSticker
+              stickerDate={date}
+              isOpen={isOpen}
+              updateIsOpen={setIsOpen}
+              currSticker={currSticker}
+              step={step}
+              updateStep={setStep}
+              selectedSticker={selectedSticker}
+              updateSelectedSticker={setSelectedSticker}
+              currDate={currDate}
+            />
+          )}
+          {tutorial.toLowerCase() === "edit" &&
+            !isToday &&
+            isBefore(currDateObj, endOfDay(currDate)) &&
+            !isLoading && (
+              <AddUpdateSticker
+                stickerDate={date}
+                isOpen={isOpen}
+                updateIsOpen={setIsOpen}
+                currSticker={currSticker}
+                step={step}
+                updateStep={setStep}
+                selectedSticker={selectedSticker}
+                updateSelectedSticker={setSelectedSticker}
+                currDate={currDate}
+              />
+            )}
+        </Provider>
+      ) : (
+        <Provider store={store}>
+          {isBefore(currDateObj, endOfDay(currDate)) && !isLoading && (
+            <AddUpdateSticker
+              stickerDate={date}
+              isOpen={isOpen}
+              updateIsOpen={setIsOpen}
+              currSticker={currSticker}
+              step={step}
+              updateStep={setStep}
+              selectedSticker={selectedSticker}
+              updateSelectedSticker={setSelectedSticker}
+              currDate={currDate}
+            />
+          )}
+        </Provider>
+      )}
+    </VStack>
+  );
+};
+
+export default Day;

src/components/calender/FormValidateEmoji.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from "react";
+
+interface FormValidateEmojiProps {
+  type: string;
+}
+
+const FormValidateEmoji: FC<FormValidateEmojiProps> = ({
+  type
+}: FormValidateEmojiProps) => {
+  interface Validations {
+    [key: string]: JSX.Element;
+  }
+
+  const validations: Validations = {
+    Required: (
+      <span role="img" aria-label="Explication Mark">
+        ❗
+      </span>
+    ),
+    Error: (
+      <span role="img" aria-label="X">
+        ❌
+      </span>
+    ),
+    Valid: (
+      <span role="img" aria-label="Check">
+        ✔
+      </span>
+    )
+  };
+
+  return validations[`${type}`];
+};
+
+export default FormValidateEmoji;

src/components/calender/index.tsx

@@ -0,0 +1,166 @@
+import React, { useEffect } from "react";
+import { useAppDispatch, useAppSelector } from "../../redux/hooks";
+import { updateCurrDate, updateMonth } from "../../features/calender";
+import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
+import { isSameDay, format } from "date-fns";
+import CalenderNav from "./CalenderNav";
+import Day from "./Day";
+
+const Calender = ({
+  date: newDate,
+  isLoading
+}: UpdateCalendarProps): JSX.Element => {
+  const dispatch = useAppDispatch();
+
+  // * Month * //
+  const currDate: string = useAppSelector((state) => state.calender.currDate);
+  const selectedDate: SelectedDateInfo = useAppSelector(
+    (state) => state.calender.selectedDateInfo
+  );
+  const { layout, title, date: currentSelectedDateStr } = selectedDate;
+
+  const currDateObj = new Date(currDate);
+
+  // * Stickers * //
+
+  const stickersMonth: StickerDays = useAppSelector(
+    (state) => state.stickers.stickersMonth
+  );
+
+  useEffect(() => {
+    if (newDate && newDate.year && newDate.month && newDate.day) {
+      const { year, month, day } = newDate;
+
+      if (year > 0 && month > 0 && day > 0) {
+        const generatedDate: Date = new Date(year, month - 1, day);
+        const currSelectedDateObj = new Date(currentSelectedDateStr);
+        const dateString: string = generatedDate.toJSON();
+
+        if (!isSameDay(currSelectedDateObj, generatedDate)) {
+          dispatch(updateMonth(dateString));
+        }
+      } else {
+        console.warn("Invalid date format: ", newDate);
+      }
+    }
+  }, [currentSelectedDateStr, dispatch, newDate]);
+
+  useEffect(() => {
+    // console.info("Check to update date.");
+
+    const currDateObj = new Date(currDate);
+
+    if (!isSameDay(currDateObj, new Date())) {
+      // console.info("Updated date.");
+      dispatch(updateCurrDate());
+    }
+  }, [currDate, dispatch]);
+
+  // Simulated user settings.
+  const userSettings = {
+    theme: "default",
+    startOfWeek: "Sunday"
+  };
+
+  const currMonth: WeekLayout =
+    layout[`${userSettings.startOfWeek.toLowerCase()}`];
+  const { month, weekdays } = currMonth;
+
+  // TODO: Move the weekdays into it's own component for responsiveness.
+
+  return (
+    <VStack h="92vh" w="100%" mb="5vh">
+      <CalenderNav title={title} isLoading={isLoading} />
+      <VStack h="100%" w="100%" spacing={0}>
+        <HStack
+          w="100%"
+          h="auto"
+          px={{ base: 1, sm: 2, md: 6 }}
+          spacing={0}
+          alignContent="center"
+          alignItems="center"
+        >
+          {weekdays.map((weekDay) => {
+            return (
+              <Box
+                key={weekDay}
+                display="flex"
+                w="100%"
+                h={10}
+                bg="transparent"
+                border="1px solid #0068ff"
+                alignContent="center"
+                alignItems="center"
+              >
+                <Text display={{ base: "none", md: "block" }} w="100%" h="auto">
+                  {weekDay}
+                </Text>
+                <Text
+                  display={{ base: "none", sm: "block", md: "none" }}
+                  w="100%"
+                  h="auto"
+                >
+                  {weekDay.substring(0, 3)}
+                </Text>
+                <Text display={{ base: "block", sm: "none" }} w="100%" h="auto">
+                  {weekDay.substring(0, 2)}
+                </Text>
+              </Box>
+            );
+          })}
+        </HStack>
+        <SimpleGrid
+          w="100%"
+          h="100%"
+          px={{ base: 1, sm: 2, md: 6 }}
+          columns={7}
+          alignItems="center"
+        >
+          {Object.keys(month).map((week) => {
+            const thisWeek = month[week];
+
+            return thisWeek.map((day: MonthDay) => {
+              const { date, isOverflow, overflowDirection } = day;
+
+              const toDateObj: Date = new Date(date);
+
+              let sticker = null;
+
+              let id = "";
+
+              stickersMonth.map((stickerDay) => {
+                const { date: stickerDate } = stickerDay;
+
+                if (isSameDay(new Date(stickerDate), toDateObj)) {
+                  sticker = stickerDay.sticker;
+
+                  id = stickerDay.id;
+                }
+              });
+
+              return (
+                <Day
+                  isLoading={isLoading}
+                  isOverflow={isOverflow}
+                  overflowDirection={overflowDirection}
+                  currSticker={sticker}
+                  date={date}
+                  selectedDate={selectedDate.date}
+                  currDate={currDateObj}
+                  key={
+                    id.length
+                      ? id
+                      : format(toDateObj, "yyyyddLL") +
+                        `/${sticker === null ? 0 : sticker}`
+                  }
+                />
+              );
+            });
+          })}
+        </SimpleGrid>
+      </VStack>
+    </VStack>
+  );
+};
+
+export default Calender;

src/components/calender/modals/AddUpdateSticker.tsx

@@ -0,0 +1,271 @@
+import React, { useState, useRef } from "react";
+import { useAppDispatch } from "../../../redux/hooks";
+import { addEditSticker } from "../../../features/calender/stickers";
+import {
+  Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Heading,
+  HStack,
+  Text,
+  VStack,
+  SimpleGrid,
+  Box
+} from "@chakra-ui/react";
+import { format, isSameDay } from "date-fns";
+import { Icon } from "@iconify/react";
+import StickerSelector from "./StickerSelector";
+import DemoStickers from "../stickers/DemoStickers";
+
+interface AddStickerProps {
+  isOpen: boolean;
+  updateIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  stickerDate: string;
+  currSticker: StickerVal;
+  step: number;
+  updateStep: React.Dispatch<React.SetStateAction<number>>;
+  selectedSticker: StickerVal;
+  updateSelectedSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
+  currDate: Date;
+}
+
+/**
+ * Handles adding and modifying the stickers for the given month.
+ * @param {boolean} isOpen Tells the component when the modal should be open.
+ * @param {React.Dispatch<React.SetStateAction<boolean>>} updateIsOpen Used to close the modal.
+ * @param {date} stickerDate The date for which the sticker will be added or modified.
+ * @param {StickerVal} currSticker The current sticker for the date.
+ * @param {number} step A numerical variable that represents the page the modal should be at.
+ * @param {React.Dispatch<React.SetStateAction<number>>} updateStep Used to navigate the pages of the modal by updating the step the modal is on.
+ * @param {StickerVal} selectedSticker the value of the selected sticker.
+ * @param {React.Dispatch<React.SetStateAction<StickerVal>>} updateSelectedSticker The react state function to update the selected sticker that will be added or updated.
+ * @param {Date} currDate the current date.
+ */
+const AddUpdateSticker = ({
+  isOpen,
+  updateIsOpen,
+  stickerDate,
+  currSticker,
+  step,
+  updateStep,
+  selectedSticker,
+  updateSelectedSticker,
+  currDate
+}: AddStickerProps): JSX.Element => {
+  const dispatch = useAppDispatch();
+  const stickerDateObj = new Date(stickerDate);
+
+  const [modalVariant] = useState<"add" | "edit">(
+    isSameDay(stickerDateObj, currDate) ? "add" : "edit"
+  );
+
+  const handleClose = () => {
+    updateIsOpen(false);
+  };
+
+  // TODO: Validate that the provided sticker is not the current sticker. Throw an error if the same sticker is attempted.
+  const handleSubmit = (sticker: StickerVal) => {
+    dispatch(addEditSticker({ stickerDate, sticker }));
+    handleClose();
+  };
+
+  // The first sticker to have focus when the modal opens.
+  const initialRef = useRef();
+
+  // * Double check that the submit button is disabled if the selected sticker is the same as the current sticker.
+
+  const variants = {
+    add: [
+      {
+        header: `Which sticker did you earn for ${format(
+          stickerDateObj,
+          "LLL d, y"
+        )}?`,
+        body: (
+          <VStack
+            w="100%"
+            h="auto"
+            justifyContent="space-between"
+            alignContent="center"
+            spacing="4"
+          >
+            <Heading textAlign="center" as="h3" size="md" w="100%" h="auto">
+              {"Select a sticker"}
+            </Heading>
+            <StickerSelector
+              stickerSet="Demo"
+              currSticker={currSticker}
+              selectedSticker={selectedSticker}
+              updateSelectedSticker={updateSelectedSticker}
+              initialSticker={initialRef}
+            />
+          </VStack>
+        ),
+        footer: (
+          <Button
+            variant="submit"
+            isDisabled={
+              selectedSticker === null || selectedSticker === currSticker
+            }
+            onClick={() => handleSubmit(selectedSticker)}
+          >
+            {"Submit"}
+          </Button>
+        )
+      }
+    ],
+    edit: [
+      {
+        header: `Which sticker did you want to update for ${format(
+          stickerDateObj,
+          "LLL d, y"
+        )}?`,
+        body: (
+          <VStack
+            w="100%"
+            h="auto"
+            justifyContent="space-between"
+            alignContent="center"
+          >
+            <Heading textAlign="center" as="h3" size="md" w="100%" h="auto">
+              {"Current Sticker"}
+            </Heading>
+            <Text fontSize="4rem">
+              <DemoStickers stickerVal={currSticker} />
+            </Text>
+            <Heading textAlign="center" as="h3" size="md" w="100%" h="auto">
+              {"Select your new sticker"}
+            </Heading>
+            <StickerSelector
+              stickerSet="Demo"
+              currSticker={currSticker}
+              selectedSticker={selectedSticker}
+              updateSelectedSticker={updateSelectedSticker}
+              initialSticker={initialRef}
+            />
+          </VStack>
+        ),
+        footer: (
+          <Button
+            variant="primary"
+            isDisabled={
+              selectedSticker === null || selectedSticker === currSticker
+            }
+            onClick={() => updateStep(step + 1)}
+          >
+            {"Next"}
+          </Button>
+        )
+      },
+      {
+        header: `Are you sure you want to change the sticker for ${format(
+          stickerDateObj,
+          "M/d/y"
+        )}?`,
+        body: (
+          <SimpleGrid
+            my={{ base: "0px", sm: "6" }}
+            mx={{ base: "0px", sm: "10", md: "16" }}
+            w="auto"
+            h="100%"
+            columns={3}
+          >
+            <Heading textAlign="center" as="h3" size="md" w="100%" h="auto">
+              {"Previous Sticker"}
+            </Heading>
+            <Box></Box>
+            <Heading textAlign="center" as="h3" size="md" w="100%" h="auto">
+              {"New Sticker"}
+            </Heading>
+            <Text textAlign="center" w="100%" fontSize="4rem">
+              <DemoStickers stickerVal={currSticker} />
+            </Text>
+            <Box fontSize="4rem" m="auto">
+              <Icon fontSize="4rem" icon="bi:arrow-right" />
+            </Box>
+            <Text textAlign="center" w="100%" fontSize="4rem">
+              <DemoStickers stickerVal={selectedSticker} />
+            </Text>
+          </SimpleGrid>
+        ),
+        footer: (
+          <HStack
+            w="100%"
+            h="auto"
+            justifyContent="space-between"
+            alignContent="center"
+          >
+            <Button variant="primary" onClick={() => updateStep(step - 1)}>
+              {"Previous"}
+            </Button>
+            <HStack w="auto" h="auto" alignContent="center" spacing={6}>
+              <Button
+                backgroundColor="transparent"
+                _hover={{ backgroundColor: "brand.danger" }}
+                onClick={() => updateIsOpen(!isOpen)}
+              >
+                {"Cancel"}
+              </Button>
+              <Button
+                variant="submit"
+                isDisabled={
+                  selectedSticker === null || selectedSticker === currSticker
+                }
+                onClick={() => handleSubmit(selectedSticker)}
+              >
+                {"Confirm"}
+              </Button>
+            </HStack>
+          </HStack>
+        )
+      }
+    ]
+  };
+
+  return (
+    <Modal
+      isCentered
+      initialFocusRef={initialRef}
+      isOpen={isOpen}
+      onClose={() => handleClose()}
+      motionPreset="slideInBottom"
+      scrollBehavior="inside"
+      size={modalVariant === "add" ? "xl" : "2xl"}
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>
+          <HStack
+            w="100%"
+            h="auto"
+            justifyContent="space-between"
+            alignContent="center"
+          >
+            <Heading textAlign="center" as="h2" size="md" w="100%" h="auto">
+              {modalVariant && variants[modalVariant][step].header}
+            </Heading>
+            <Button
+              fontSize="2rem"
+              px="1"
+              onClick={() => updateIsOpen(!isOpen)}
+            >
+              <Icon icon="bi:x" />
+            </Button>
+          </HStack>
+        </ModalHeader>
+        <ModalBody>
+          {modalVariant && variants[modalVariant][step].body}
+        </ModalBody>
+        <ModalFooter>
+          {modalVariant && variants[modalVariant][step].footer}
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default AddUpdateSticker;

src/components/calender/modals/StickerSelector.tsx

@@ -0,0 +1,74 @@
+import { HStack, Button } from "@chakra-ui/react";
+import React from "react";
+import DemoStickers from "../stickers/DemoStickers";
+
+interface StickerSelectorProps {
+  stickerSet: "Demo";
+  currSticker: StickerVal;
+  selectedSticker: StickerVal;
+  updateSelectedSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
+  initialSticker: React.MutableRefObject<undefined>;
+}
+
+/**
+ * Handles displaying a list of dynamic stickers to be selected.
+ * @param {string} stickerSet The name of the stickers that should be displayed.
+ * @param {StickerVal} currSticker The current sticker for the date.
+ * @param {StickerVal} selectedSticker The selected sticker for the current. date
+ * @param {React.Dispatch<React.SetStateAction<StickerVal>>} updateSelectedSticker TThe react state function to update the selected sticker that will be added or updated.
+ * @param {React.MutableRefObject<undefined>} initialSticker the sticker that should have be in focus when the modal opens.
+ */
+
+const StickerSelector = ({
+  stickerSet,
+  currSticker,
+  selectedSticker,
+  updateSelectedSticker,
+  initialSticker
+}: StickerSelectorProps): JSX.Element => {
+  const stickers = {
+    Demo: (
+      <HStack
+        w="100%"
+        h="auto"
+        justifyContent="center"
+        alignContent="center"
+        spacing={14}
+      >
+        <Button
+          isDisabled={currSticker >= 1}
+          ref={currSticker <= 1 ? initialSticker : null}
+          border={selectedSticker === 1 ? "1px solid #FFF" : "opx"}
+          bg={selectedSticker === 1 && "gray.800"}
+          onClick={() => updateSelectedSticker(1)}
+          variant="stickerButton"
+        >
+          <DemoStickers stickerVal={1} />
+        </Button>
+        <Button
+          isDisabled={currSticker === 0}
+          ref={currSticker >= 1 ? initialSticker : null}
+          border={selectedSticker === 0 ? "1px solid #FFF" : "opx"}
+          bg={selectedSticker === 0 && "gray.800"}
+          onClick={() => updateSelectedSticker(0)}
+          variant="stickerButton"
+        >
+          <DemoStickers stickerVal={0} />
+        </Button>
+        <Button
+          isDisabled={currSticker <= -1}
+          border={selectedSticker === -1 ? "1px solid #FFF" : "opx"}
+          bg={selectedSticker === -1 && "gray.800"}
+          onClick={() => updateSelectedSticker(-1)}
+          variant="stickerButton"
+        >
+          <DemoStickers stickerVal={-1} />
+        </Button>
+      </HStack>
+    )
+  };
+
+  return stickers[stickerSet];
+};
+
+export default StickerSelector;

src/components/calender/stickers/DemoStickers.tsx

@@ -0,0 +1,56 @@
+import React, { FC } from "react";
+
+// TODO: When themes are made import the theme from user settings store. Refactor to use whatever those SVGs are.
+
+interface DemoStickersProps {
+  stickerVal: StickerVal;
+}
+
+const DemoStickers: FC<DemoStickersProps> = ({
+  stickerVal
+}: DemoStickersProps) => {
+  // If sticker is null return an empty space.
+  if (stickerVal === null) {
+    return <span aria-label="spacer">&nbsp;</span>;
+  }
+
+  interface StickerToEmoji {
+    [key: string]: JSX.Element;
+  }
+
+  /**
+   * ? Temporarily using values -1 to 1.
+   * ? In the full app the values will be between -2 and 2.
+   */
+  let key = "0";
+
+  if (stickerVal > 0) {
+    key = "1";
+  } else if (stickerVal < 0) {
+    key = "-1";
+  }
+
+  // Link value to an emoji representing a sticker.
+  const stickerToEmoji: StickerToEmoji = {
+    "1": (
+      <span role="img" aria-label="Sun">
+        ☀️
+      </span>
+    ),
+    "0": (
+      <span role="img" aria-label="Cloud">
+        ☁️
+      </span>
+    ),
+    "-1": (
+      <span role="img" aria-label="Raining Cloud">
+        🌧️
+      </span>
+    )
+  };
+
+  // Return the appropriate sticker.
+  return stickerToEmoji[`${key}`];
+};
+
+export default DemoStickers;

src/components/loading/LoadingOverlay.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import {
+  Box,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalOverlay
+} from "@chakra-ui/react";
+import LoadingSpinner from "./LoadingSpinner";
+
+const LoadingOverlay = (): JSX.Element => {
+  return (
+    <Modal
+      isCentered
+      isOpen
+      onClose={() => null}
+      motionPreset="slideInBottom"
+      scrollBehavior="inside"
+      size="xs"
+    >
+      <ModalOverlay bg="loading.overlayBg" />
+      <ModalContent bg="transparent" boxShadow="none">
+        {/* <ModalHeader>
+        </ModalHeader> */}
+        <ModalBody border="0px">
+          <Box h="100%" w="100%" textAlign="center">
+            <LoadingSpinner />
+          </Box>
+        </ModalBody>
+        {/* <ModalFooter>
+        </ModalFooter> */}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default LoadingOverlay;

src/components/loading/LoadingSpinner.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Spinner } from "@chakra-ui/react";
+
+const LoadingSpinner = (): JSX.Element => {
+  return (
+    <Spinner
+      thickness="4px"
+      speed="0.50s"
+      emptyColor="loading.spinnerEmptySpace"
+      color="loading.spinnerColor"
+      size="xl"
+    />
+  );
+};
+
+export default LoadingSpinner;

src/components/tutorial/CalenderExample.tsx

@@ -0,0 +1,210 @@
+import React, { useEffect } from "react";
+import { useAppDispatch, useAppSelector } from "../../redux/hooks";
+import { updateMonth } from "../../features/calender";
+import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
+import { format, isSameDay, isToday } from "date-fns";
+import Day from "../calender/Day";
+import { setCurrentWeek } from "../../features/tutorial";
+
+interface CalenderExampleProps {
+  type: "add" | "edit";
+  isLoading: boolean;
+}
+
+const CalenderExample = ({
+  type,
+  isLoading
+}: CalenderExampleProps): JSX.Element => {
+  // TODO: Check if the current date is the start of the user's preferred start of the week and use the previous week for the edit example.
+
+  const currDateStr: string = useAppSelector(
+    (state) => state.calender.currDate
+  );
+  const currDateObj: Date = new Date(currDateStr);
+
+  const dispatch = useAppDispatch();
+
+  // * Current Month * //
+  const selectedDate: SelectedDateInfo = useAppSelector(
+    (state) => state.calender.selectedDateInfo
+  );
+  const { layout, date: currSelectedDateStr } = selectedDate;
+
+  // * Stickers * //
+  const stickersMonth: StickerDays = useAppSelector(
+    (state) => state.stickers.stickersMonth
+  );
+
+  // Simulated user settings.
+  const userSettings = {
+    theme: "default",
+    startOfWeek: "Sunday"
+  };
+
+  // * Week Names * //
+  const currMonth: WeekLayout =
+    layout[`${userSettings.startOfWeek.toLowerCase()}`];
+  const { month, weekdays } = currMonth;
+
+  useEffect(() => {
+    const currDateObj: Date = new Date(currDateStr);
+    const currSelectedDateOj: Date = new Date(currSelectedDateStr);
+
+    if (!isSameDay(currDateObj, currSelectedDateOj)) {
+      dispatch(updateMonth(currDateObj.toJSON()));
+    }
+  }, [currDateStr, currSelectedDateStr, dispatch]);
+
+  // * The current week * //
+  const currWeek = useAppSelector((state) => state.tutorial.currWeek);
+
+  useEffect(() => {
+    const getCurrentWeek = (): MonthDay[] => {
+      let foundWeek: MonthDay[];
+
+      for (const week in month) {
+        const currWeek = month[week];
+
+        currWeek.forEach((day: MonthDay) => {
+          const { date } = day;
+
+          if (isToday(new Date(date))) {
+            foundWeek = currWeek;
+          }
+        });
+      }
+
+      return foundWeek || ([] as MonthDay[]);
+    };
+
+    if (currWeek === null) {
+      dispatch(setCurrentWeek(getCurrentWeek()));
+    }
+  }, [currWeek, dispatch, month]);
+
+  return (
+    <VStack
+      h="auto"
+      w="100%"
+      alignContent="center"
+      alignItems="center"
+      spacing={2}
+    >
+      <VStack
+        h="8.5rem"
+        w="100%"
+        alignContent="center"
+        alignItems="center"
+        spacing={0}
+      >
+        <HStack
+          w="100%"
+          h="auto"
+          alignContent="center"
+          alignItems="center"
+          spacing={0}
+          px={{ base: 1, sm: 2, md: 6 }}
+        >
+          {weekdays.map((weekDay) => {
+            return (
+              <Box
+                key={weekDay}
+                display="flex"
+                w="100%"
+                h={10}
+                bg="transparent"
+                border="1px solid #0068ff"
+                alignContent="center"
+                alignItems="center"
+              >
+                <Text display={{ base: "none", md: "block" }} w="100%" h="auto">
+                  {weekDay}
+                </Text>
+                <Text
+                  display={{ base: "none", sm: "block", md: "none" }}
+                  w="100%"
+                  h="auto"
+                >
+                  {weekDay.substring(0, 3)}
+                </Text>
+                <Text display={{ base: "block", sm: "none" }} w="100%" h="auto">
+                  {weekDay.substring(0, 2)}
+                </Text>
+              </Box>
+            );
+          })}
+        </HStack>
+        <SimpleGrid
+          w="100%"
+          h="100%"
+          columns={7}
+          px={{ base: 1, sm: 2, md: 6 }}
+          alignItems="center"
+        >
+          {currWeek &&
+            currWeek.map((day: MonthDay) => {
+              const { date, isOverflow, overflowDirection } = day;
+
+              const toDateObj: Date = new Date(date);
+
+              let sticker = null;
+
+              let id = "";
+
+              stickersMonth.map((stickerDay) => {
+                const { date: stickerDate } = stickerDay;
+
+                if (isSameDay(new Date(stickerDate), toDateObj)) {
+                  sticker = stickerDay.sticker;
+
+                  id = stickerDay.id;
+                }
+              });
+
+              return (
+                <Day
+                  isLoading={isLoading}
+                  isOverflow={isOverflow}
+                  overflowDirection={overflowDirection}
+                  currSticker={sticker}
+                  date={date}
+                  selectedDate={selectedDate.date}
+                  currDate={currDateObj}
+                  tutorial={type}
+                  key={
+                    id.length
+                      ? id
+                      : format(toDateObj, "yyyyddLL") +
+                        `/${sticker === null ? 0 : sticker}`
+                  }
+                />
+              );
+            })}
+        </SimpleGrid>
+      </VStack>
+      {type === "edit" && (
+        <VStack
+          w="100%"
+          h="auto"
+          alignContent="center"
+          alignItems="center"
+          spacing={2}
+        >
+          <Text fontSize="sm" color="whiteAlpha.800">
+            {
+              "Not being able to edit within this tutorial when the current date is the start of the week or month is a known bug."
+            }
+          </Text>
+          <Text fontSize="sm" color="whiteAlpha.800">
+            {"This bug will be fixed in beta v2."}
+          </Text>
+          <Text fontSize="sm" color="whiteAlpha.800">
+            {"You can skip the tutorial and try again tomorrow."}
+          </Text>
+        </VStack>
+      )}
+    </VStack>
+  );
+};
+
+export default CalenderExample;

src/components/tutorial/data/aboutApp.ts

@@ -0,0 +1,10 @@
+type AboutApp = string[];
+
+const aboutApp: AboutApp = [
+  "The Potty Chart is an app that mimics a potty/star chart commonly used while potty training toddler or child.",
+  "The app can be used to track behavior, habits, diaper training, potty training (good luck), daily chores/tasks, or anything else you might want to track in a fun and visual way with colorful themes, stickers, and even receive encouraging messaged from your big/dom, followers, and friends.",
+  "The final app will have settings to disable any mentions and references of ABDL to allow a more general audience to use, such as for a master and pet relationship.",
+  "This is a beta build of the app. Some functionality may not work as intended, is not fully functional, and may be missing entirely."
+];
+
+export default aboutApp;

src/components/tutorial/data/appFunctionality.ts

@@ -0,0 +1,9 @@
+type AppFunctionality = string[];
+
+const appFunctionality: AppFunctionality = [
+  "The app will generate stickers to display from the 1st of the month to the day before today. This is to simulate previous and continued use.",
+  "Ability to add a sticker to the current date.",
+  "Ability to add edit a sticker from a previous date with a confirmation prompt."
+];
+
+export default appFunctionality;

src/components/tutorial/index.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { VStack } from "@chakra-ui/react";
+import TutorialCalender from "./sections/TutorialCalender";
+import TutorialLinks from "./sections/TutorialLinks";
+import TutorialHeading from "./sections/TutorialHeading";
+import TutorialAboutApp from "./sections/TutorialAboutApp";
+import TutorialSubmitButtons from "./sections/TutorialSubmitButtons";
+import TutorialAppFunctionality from "./sections/TutorialAppFunctionality";
+
+interface TutorialProps {
+  isLoading: boolean;
+}
+
+const Tutorial = ({ isLoading }: TutorialProps): JSX.Element => {
+  return (
+    <VStack
+      h="auto"
+      w="auto"
+      justifyContent="center"
+      alignContent="center"
+      my={8}
+      mx={{ base: 0, sm: 2, md: 4 }}
+      py={4}
+      px={{ base: 0, sm: 2, md: 4 }}
+      bg="gray.700"
+      borderRadius={{ base: "", sm: "2xl" }}
+    >
+      <TutorialHeading />
+      <TutorialAboutApp />
+      <TutorialAppFunctionality />
+      <TutorialCalender isLoading={isLoading} />
+      <TutorialLinks />
+      <TutorialSubmitButtons isLoading={isLoading} />
+    </VStack>
+  );
+};
+
+export default Tutorial;

src/components/tutorial/sections/TutorialAboutApp.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { VStack, Heading, Divider, Text } from "@chakra-ui/react";
+import aboutApp from "../data/aboutApp";
+
+const TutorialAboutApp = (): JSX.Element => {
+  return (
+    <VStack
+      h="auto"
+      w="100%"
+      justifyContent="center"
+      alignContent="center"
+      spacing={4}
+    >
+      <Heading as="h3" size="lg">
+        {"About the App"}
+      </Heading>
+      <VStack
+        h="auto"
+        w="100%"
+        justifyContent="start"
+        alignContent="center"
+        spacing={1}
+      >
+        {aboutApp.map((string: string) => {
+          return <Text key={string.replaceAll(" ", "-")}>{string}</Text>;
+        })}
+      </VStack>
+      <Divider orientation="horizontal" />
+    </VStack>
+  );
+};
+
+export default TutorialAboutApp;

src/components/tutorial/sections/TutorialAppFunctionality.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { VStack, Heading, Divider, Text } from "@chakra-ui/react";
+import appFunctionality from "../data/appFunctionality";
+
+const TutorialAppFunctionality = (): JSX.Element => {
+  return (
+    <VStack
+      h="auto"
+      w="100%"
+      justifyContent="center"
+      alignContent="center"
+      spacing={4}
+    >
+      <Heading as="h3" size="lg">
+        {"App Functionality"}
+      </Heading>
+      <VStack
+        h="auto"
+        w="100%"
+        justifyContent="start"
+        alignContent="center"
+        spacing={1}
+      >
+        {appFunctionality.map((string: string) => {
+          return <Text key={string.replaceAll(" ", "-")}>{string}</Text>;
+        })}
+      </VStack>
+      <Divider orientation="horizontal" />
+    </VStack>
+  );
+};
+
+export default TutorialAppFunctionality;

src/components/tutorial/sections/TutorialCalender.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { Divider, Heading, HStack, Text, VStack } from "@chakra-ui/react";
+import CalenderExample from "../CalenderExample";
+
+interface CalenderExampleProps {
+  isLoading: boolean;
+}
+
+const TutorialCalender = ({ isLoading }: CalenderExampleProps): JSX.Element => {
+  return (
+    <VStack
+      h="auto"
+      w="100%"
+      justifyContent="center"
+      alignContent="center"
+      spacing={4}
+    >
+      <Heading as="h3" size="lg">
+        {"How to Use The Calender"}
+      </Heading>
+      <VStack
+        h="auto"
+        w="100%"
+        justifyContent="center"
+        alignItems="center"
+        alignContent="center"
+        spacing={4}
+      >
+        <Heading as="h4" size="md">
+          {"Add a Sticker to Today's Date"}
+        </Heading>
+        <HStack
+          w="100%"
+          h="auto"
+          alignContent="center"
+          justifyContent="center"
+          spacing={1}
+        >
+          <Text>{"Select the date with the"}</Text>
+          <Text color="#00ff3c">{" green "}</Text>
+          <Text>{"border."}</Text>
+        </HStack>
+        <CalenderExample type={"add"} isLoading={isLoading} />
+      </VStack>
+      <VStack
+        h="auto"
+        w="100%"
+        justifyContent="center"
+        alignItems="center"
+        alignContent="center"
+        spacing={4}
+      >
+        <Heading as="h4" size="md">
+          {"Add a Sticker to Previous Dates"}
+        </Heading>
+        <HStack
+          w="100%"
+          h="auto"
+          alignContent="center"
+          justifyContent="center"
+          spacing={1}
+        >
+          <Text>{"Select a date with a"}</Text>
+          <Text color="#00ff3c">{" green "}</Text>
+          <Text>{"border."}</Text>
+        </HStack>
+        <CalenderExample type={"edit"} isLoading={isLoading} />
+      </VStack>
+      <Divider orientation="horizontal" />
+    </VStack>
+  );
+};
+
+export default TutorialCalender;

src/components/tutorial/sections/TutorialHeading.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { VStack, Heading, Divider } from "@chakra-ui/react";
+
+const TutorialHeading = (): JSX.Element => {
+  return (
+    <VStack
+      h="auto"
+      w="100%"
+      justifyContent="center"
+      alignContent="center"
+      spacing={4}
+    >
+      <Heading as="h2">{"Welcome to Code Name: LCM Potty Chart"}</Heading>
+      <Heading as="h3" size="md">
+        {"A Lucid Creations Media Project"}
+      </Heading>
+      <Divider orientation="horizontal" />
+    </VStack>
+  );
+};
+
+export default TutorialHeading;

src/components/tutorial/sections/TutorialLinks.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Divider, Heading, VStack } from "@chakra-ui/react";
+import Buttons from "../../buttons";
+
+const TutorialLinks = (): JSX.Element => {
+  return (
+    <VStack
+      h="auto"
+      w="100%"
+      justifyContent="center"
+      alignContent="center"
+      spacing={4}
+    >
+      <Heading as="h3" size="lg">
+        {"More Info"}
+      </Heading>
+      <Buttons />
+      <Divider orientation="horizontal" />
+    </VStack>
+  );
+};
+
+export default TutorialLinks;

src/components/tutorial/sections/TutorialSubmitButtons.tsx

@@ -0,0 +1,83 @@
+import { HStack, Button, VStack, Checkbox } from "@chakra-ui/react";
+import React from "react";
+import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
+import {
+  setTutorialCompleted,
+  setTempTutorialComplete,
+  toggleRememberCompleted
+} from "../../../features/tutorial";
+
+interface TutorialSubmitButtonsProps {
+  isLoading: boolean;
+}
+
+const TutorialSubmitButtons = ({
+  isLoading
+}: TutorialSubmitButtonsProps): JSX.Element => {
+  const rememberComplete: boolean = useAppSelector(
+    (state) => state.tutorial.rememberCompleted
+  );
+  const dispatch = useAppDispatch();
+
+  const handleComplete = (): void => {
+    if (rememberComplete) {
+      dispatch(setTutorialCompleted());
+    }
+
+    if (!rememberComplete) {
+      dispatch(setTempTutorialComplete());
+    }
+  };
+
+  const handleSkip = (): void => {
+    dispatch(setTempTutorialComplete());
+  };
+
+  const handleUpdateCheck = (): void => {
+    dispatch(toggleRememberCompleted());
+  };
+
+  return (
+    <HStack
+      h="auto"
+      w="90%"
+      justifyContent="space-between"
+      alignItems="flex-start"
+      pt={8}
+    >
+      <Button
+        type="button"
+        isDisabled={isLoading}
+        onClick={() => handleSkip()}
+        variant="skip"
+      >
+        {"Skip"}
+      </Button>
+      <VStack
+        h="auto"
+        w="auto"
+        justifyContent="center"
+        alignItems="center"
+        spacing={2}
+      >
+        <Button
+          type="button"
+          isDisabled={isLoading}
+          onClick={() => handleComplete()}
+          variant="primary"
+        >
+          {"Complete Tutorial"}
+        </Button>
+        <Checkbox
+          isChecked={rememberComplete}
+          isDisabled={isLoading}
+          onChange={() => handleUpdateCheck()}
+        >
+          {"Remember completed?"}
+        </Checkbox>
+      </VStack>
+    </HStack>
+  );
+};
+
+export default TutorialSubmitButtons;