From d2dfc7cd082ac7b74a89418e62620e5f4be09eba Mon Sep 17 00:00:00 2001
From: Tze Zhe Brandon Lim <brandonlim8890@gmail.com>
Date: Fri, 8 Dec 2023 20:56:59 -0500
Subject: [PATCH] Signin as guest (#677)

* Update all api calls to work with guest

* Add in setting of state

* Fix linting errors

* really fix linting errors
---
 .../AddCourseModal/AddCourseButton.tsx        | 26 ++--------
 .../components/Authentication/AuthForm.tsx    | 23 ++++++++-
 .../components/Button/SecondaryBlueButton.tsx | 30 +++++++++++
 .../Error/ConfirmEmailWarningModal.tsx        |  9 ++--
 .../components/Plan/AddPlanModal.tsx          | 51 +++++++++++++++----
 .../components/Plan/DeletePlanModal.tsx       | 26 ++++++++--
 .../components/Plan/EditPlanModal.tsx         | 37 +++++++++++---
 .../components/Plan/TransferCourses.tsx       | 14 ++++-
 packages/frontend-v2/hooks/useLocalStorage.ts |  9 ++--
 .../hooks/useRedirectIfLoggedIn.ts            |  5 +-
 .../frontend-v2/hooks/useStudentWithPlans.ts  | 29 ++++++++---
 packages/frontend-v2/pages/_app.tsx           | 26 +++++++---
 packages/frontend-v2/pages/home.tsx           | 44 ++++++++++++++--
 packages/frontend-v2/pages/login.tsx          |  4 ++
 packages/frontend-v2/pages/signup.tsx         |  4 ++
 packages/frontend-v2/utils/constants.ts       | 23 +++++++++
 16 files changed, 289 insertions(+), 71 deletions(-)
 create mode 100644 packages/frontend-v2/components/Button/SecondaryBlueButton.tsx

diff --git a/packages/frontend-v2/components/AddCourseModal/AddCourseButton.tsx b/packages/frontend-v2/components/AddCourseModal/AddCourseButton.tsx
index 61af22169..3b4de4031 100644
--- a/packages/frontend-v2/components/AddCourseModal/AddCourseButton.tsx
+++ b/packages/frontend-v2/components/AddCourseModal/AddCourseButton.tsx
@@ -1,5 +1,6 @@
 import { AddIcon } from "@chakra-ui/icons";
-import { Button, ButtonProps } from "@chakra-ui/react";
+import { ButtonProps } from "@chakra-ui/react";
+import { SecondaryBlueButton } from "../Button/SecondaryBlueButton";
 
 interface AddCourseButtonProps {
   onOpen: () => void;
@@ -9,32 +10,13 @@ export const AddCourseButton: React.FC<AddCourseButtonProps & ButtonProps> = ({
   onOpen,
   ...buttonProps
 }) => {
-  const hoverStyle = {
-    borderColor: "neutral.300",
-  };
-
-  const activeStyle = {
-    backgroundColor: "neutral.200",
-    borderColor: "neutral.200",
-  };
-
   return (
-    <Button
+    <SecondaryBlueButton
       leftIcon={<AddIcon w={4} h={4} color="primary.blue.light.main" />}
       onClick={onOpen}
-      size="md"
-      margin="0"
-      borderRadius="10px"
-      border="1px"
-      borderColor="neutral.50"
-      backgroundColor="neutral.50"
-      boxShadow="sm"
-      _hover={hoverStyle}
-      _active={activeStyle}
-      color="primary.blue.light.main"
       {...buttonProps}
     >
       Add Courses
-    </Button>
+    </SecondaryBlueButton>
   );
 };
diff --git a/packages/frontend-v2/components/Authentication/AuthForm.tsx b/packages/frontend-v2/components/Authentication/AuthForm.tsx
index 65d1d44e7..710142b0e 100644
--- a/packages/frontend-v2/components/Authentication/AuthForm.tsx
+++ b/packages/frontend-v2/components/Authentication/AuthForm.tsx
@@ -1,5 +1,8 @@
-import { Flex, Heading } from "@chakra-ui/react";
-import { FormEventHandler, ReactNode } from "react";
+import { AbsoluteCenter, Box, Divider, Flex, Heading } from "@chakra-ui/react";
+import router from "next/router";
+import { FormEventHandler, ReactNode, useContext } from "react";
+import { SecondaryBlueButton } from "../Button/SecondaryBlueButton";
+import { IsGuestContext } from "../../pages/_app";
 
 type NewType = ReactNode;
 
@@ -15,6 +18,7 @@ export const AuthForm: React.FC<AuthFormProps> = ({
   inputs,
   footer,
 }) => {
+  const { setIsGuest } = useContext(IsGuestContext);
   return (
     <Flex
       as="form"
@@ -35,6 +39,21 @@ export const AuthForm: React.FC<AuthFormProps> = ({
         {inputs}
       </Flex>
       {footer}
+      <Box width="100%" position="relative">
+        <Divider width="100%" />
+        <AbsoluteCenter bg="white" px="4">
+          <b>or</b>
+        </AbsoluteCenter>
+      </Box>
+      <SecondaryBlueButton
+        width="100%"
+        onClick={() => {
+          setIsGuest(true);
+          router.push("/home");
+        }}
+      >
+        Continue as Guest
+      </SecondaryBlueButton>
     </Flex>
   );
 };
diff --git a/packages/frontend-v2/components/Button/SecondaryBlueButton.tsx b/packages/frontend-v2/components/Button/SecondaryBlueButton.tsx
new file mode 100644
index 000000000..49de2fdb3
--- /dev/null
+++ b/packages/frontend-v2/components/Button/SecondaryBlueButton.tsx
@@ -0,0 +1,30 @@
+import { ButtonProps, Button, ComponentWithAs } from "@chakra-ui/react";
+
+export const SecondaryBlueButton: ComponentWithAs<"button", ButtonProps> = ({
+  ...buttonProps
+}) => {
+  const hoverStyle = {
+    borderColor: "neutral.300",
+  };
+
+  const activeStyle = {
+    backgroundColor: "neutral.200",
+    borderColor: "neutral.200",
+  };
+
+  return (
+    <Button
+      size="md"
+      margin="0"
+      borderRadius="10px"
+      border="1px"
+      borderColor="neutral.50"
+      backgroundColor="neutral.50"
+      boxShadow="sm"
+      _hover={hoverStyle}
+      _active={activeStyle}
+      color="primary.blue.light.main"
+      {...buttonProps}
+    />
+  );
+};
diff --git a/packages/frontend-v2/components/Error/ConfirmEmailWarningModal.tsx b/packages/frontend-v2/components/Error/ConfirmEmailWarningModal.tsx
index 5803a0bfa..ddc7ad897 100644
--- a/packages/frontend-v2/components/Error/ConfirmEmailWarningModal.tsx
+++ b/packages/frontend-v2/components/Error/ConfirmEmailWarningModal.tsx
@@ -23,13 +23,15 @@ export const ConfirmEmailWarningModal: React.FC<
   ConfirmEmailWarningModalProps
 > = ({ student }) => {
   //TODO: Fix modal show on first time
-  const [alreadyVisited, setAlreadyVisited] = useLocalStorage("alreadyVisited");
+  const [alreadyVisited, setAlreadyVisited] = useLocalStorage(
+    "alreadyVisited",
+    false
+  );
   // By default, open the modal if the user has not visited this page or if the user is not confirmed
   const { onClose, isOpen } = useDisclosure({
     defaultIsOpen: !student.isEmailConfirmed && !alreadyVisited,
   });
-  console.log({student, alreadyVisited})
-  console.log(!student.isEmailConfirmed && !alreadyVisited)
+  console.log(!student.isEmailConfirmed && !alreadyVisited);
 
   const closeModal = () => {
     setAlreadyVisited(true);
@@ -46,7 +48,6 @@ export const ConfirmEmailWarningModal: React.FC<
     }
   };
 
-
   return (
     <Modal isOpen={isOpen} onClose={closeModal} size="md">
       <ModalOverlay />
diff --git a/packages/frontend-v2/components/Plan/AddPlanModal.tsx b/packages/frontend-v2/components/Plan/AddPlanModal.tsx
index 881973378..48d5347ef 100644
--- a/packages/frontend-v2/components/Plan/AddPlanModal.tsx
+++ b/packages/frontend-v2/components/Plan/AddPlanModal.tsx
@@ -16,16 +16,22 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 import { API } from "@graduate/api-client";
-import { CreatePlanDto, CreatePlanDtoWithoutSchedule } from "@graduate/common";
+import {
+  CreatePlanDto,
+  CreatePlanDtoWithoutSchedule,
+  PlanModel,
+} from "@graduate/common";
 import { useRouter } from "next/router";
-import { Dispatch, SetStateAction, useState } from "react";
+import { Dispatch, SetStateAction, useContext, useState } from "react";
 import { useForm } from "react-hook-form";
 import { mutate } from "swr";
 import {
   useSupportedMajors,
   USE_STUDENT_WITH_PLANS_SWR_KEY,
+  useStudentWithPlans,
 } from "../../hooks";
 import {
+  cleanDndIdsFromStudent,
   createEmptySchedule,
   extractSupportedMajorNames,
   extractSupportedMajorYears,
@@ -36,6 +42,7 @@ import { BlueButton } from "../Button";
 import { PlanInput, PlanSelect } from "../Form";
 import { HelperToolTip } from "../Help";
 import { PlanConcentrationsSelect } from "./PlanConcentrationsSelect";
+import { IsGuestContext } from "../../pages/_app";
 
 interface AddPlanModalProps {
   setSelectedPlanId: Dispatch<SetStateAction<number | undefined | null>>;
@@ -61,6 +68,12 @@ export const AddPlanModal: React.FC<AddPlanModalProps> = ({
     shouldFocusError: true,
   });
   const [isNoMajorSelected, setIsNoMajorSelected] = useState(false);
+  const { isGuest } = useContext(IsGuestContext);
+  const { student } = useStudentWithPlans();
+
+  if (!student) {
+    return <></>;
+  }
 
   if (supportedMajorsError) {
     handleApiClientError(supportedMajorsError, router);
@@ -78,14 +91,34 @@ export const AddPlanModal: React.FC<AddPlanModalProps> = ({
 
     // create the new plan
     let createdPlanId: number;
-    try {
-      const createdPlan = await API.plans.create(newPlan);
-      createdPlanId = createdPlan.id;
-    } catch (error) {
-      handleApiClientError(error as Error, router);
+    if (isGuest) {
+      createdPlanId = student.plans.length + 1;
+      // Create plan in local storage
+      const planInLocalStorage: PlanModel<null> = {
+        ...newPlan,
+        id: createdPlanId,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+        student: cleanDndIdsFromStudent(student),
+      } as PlanModel<null>;
+
+      window.localStorage.setItem(
+        "student",
+        JSON.stringify({
+          ...student,
+          plans: [...student.plans, planInLocalStorage],
+        })
+      );
+    } else {
+      try {
+        const createdPlan = await API.plans.create(newPlan);
+        createdPlanId = createdPlan.id;
+      } catch (error) {
+        handleApiClientError(error as Error, router);
 
-      // don't proceed further if POST failed
-      return;
+        // don't proceed further if POST failed
+        return;
+      }
     }
 
     // refresh the cache and close the modal
diff --git a/packages/frontend-v2/components/Plan/DeletePlanModal.tsx b/packages/frontend-v2/components/Plan/DeletePlanModal.tsx
index 4360ba60b..4dc943eab 100644
--- a/packages/frontend-v2/components/Plan/DeletePlanModal.tsx
+++ b/packages/frontend-v2/components/Plan/DeletePlanModal.tsx
@@ -15,10 +15,14 @@ import {
 } from "@chakra-ui/react";
 import { API } from "@graduate/api-client";
 import { useRouter } from "next/router";
-import { Dispatch, SetStateAction } from "react";
+import { Dispatch, SetStateAction, useContext } from "react";
 import { mutate } from "swr";
-import { USE_STUDENT_WITH_PLANS_SWR_KEY } from "../../hooks";
+import {
+  USE_STUDENT_WITH_PLANS_SWR_KEY,
+  useStudentWithPlans,
+} from "../../hooks";
 import { handleApiClientError, toast } from "../../utils";
+import { IsGuestContext } from "../../pages/_app";
 
 interface DeletePlanModalProps {
   planName: string;
@@ -32,10 +36,26 @@ export const DeletePlanModal: React.FC<DeletePlanModalProps> = ({
 }) => {
   const router = useRouter();
   const { onOpen, onClose, isOpen } = useDisclosure();
+  const { isGuest } = useContext(IsGuestContext);
+  const { student } = useStudentWithPlans();
+
+  if (!student) {
+    return <></>;
+  }
 
   const deletePlan = async () => {
     try {
-      await API.plans.delete(planId);
+      if (isGuest) {
+        window.localStorage.setItem(
+          "student",
+          JSON.stringify({
+            ...student,
+            plans: student.plans.filter((plan) => plan.id !== planId),
+          })
+        );
+      } else {
+        await API.plans.delete(planId);
+      }
 
       // refresh the cache, show success message, and close the modal
       mutate(USE_STUDENT_WITH_PLANS_SWR_KEY);
diff --git a/packages/frontend-v2/components/Plan/EditPlanModal.tsx b/packages/frontend-v2/components/Plan/EditPlanModal.tsx
index a15dd5104..5cd524e38 100644
--- a/packages/frontend-v2/components/Plan/EditPlanModal.tsx
+++ b/packages/frontend-v2/components/Plan/EditPlanModal.tsx
@@ -18,11 +18,12 @@ import {
 import { API } from "@graduate/api-client";
 import { PlanModel, UpdatePlanDto } from "@graduate/common";
 import { useRouter } from "next/router";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useSWRConfig } from "swr";
 import {
   USE_STUDENT_WITH_PLANS_SWR_KEY,
+  useStudentWithPlans,
   useSupportedMajors,
 } from "../../hooks";
 import {
@@ -36,6 +37,7 @@ import { BlueButton } from "../Button";
 import { PlanInput, PlanSelect } from "../Form";
 import { HelperToolTip } from "../Help";
 import { PlanConcentrationsSelect } from "./PlanConcentrationsSelect";
+import { IsGuestContext } from "../../pages/_app";
 
 type EditPlanModalProps = {
   plan: PlanModel<string>;
@@ -67,6 +69,8 @@ export const EditPlanModal: React.FC<EditPlanModalProps> = ({ plan }) => {
     mode: "onTouched",
     shouldFocusError: true,
   });
+  const { student } = useStudentWithPlans();
+  const { isGuest } = useContext(IsGuestContext);
 
   const resetValuesToCurrPlan = useCallback(() => {
     if (!plan) {
@@ -96,6 +100,10 @@ export const EditPlanModal: React.FC<EditPlanModalProps> = ({ plan }) => {
     handleApiClientError(supportedMajorsError, router);
   }
 
+  if (!student) {
+    return <></>;
+  }
+
   const catalogYear = watch("catalogYear");
   const majorName = watch("major");
   const concentration = watch("concentration");
@@ -121,11 +129,28 @@ export const EditPlanModal: React.FC<EditPlanModalProps> = ({ plan }) => {
       concentration: isNoMajorSelected ? undefined : payload.concentration,
     };
 
-    try {
-      await API.plans.update(plan.id, newPlan);
-    } catch (error) {
-      handleApiClientError(error as Error, router);
-      return;
+    if (isGuest) {
+      const newTempPlan = {
+        ...plan,
+        ...newPlan,
+      };
+
+      window.localStorage.setItem(
+        "student",
+        JSON.stringify({
+          ...student,
+          plans: student.plans.map((cur) =>
+            cur.id === plan.id ? newTempPlan : cur
+          ),
+        })
+      );
+    } else {
+      try {
+        await API.plans.update(plan.id, newPlan);
+      } catch (error) {
+        handleApiClientError(error as Error, router);
+        return;
+      }
     }
 
     mutate(USE_STUDENT_WITH_PLANS_SWR_KEY);
diff --git a/packages/frontend-v2/components/Plan/TransferCourses.tsx b/packages/frontend-v2/components/Plan/TransferCourses.tsx
index edf293fe2..0eb46b07f 100644
--- a/packages/frontend-v2/components/Plan/TransferCourses.tsx
+++ b/packages/frontend-v2/components/Plan/TransferCourses.tsx
@@ -13,6 +13,8 @@ import {
 import { AddCourseButton, AddCourseModal } from "../AddCourseModal";
 import { HelperToolTip } from "../Help";
 import { NonDraggableScheduleCourse } from "../ScheduleCourse";
+import { useContext } from "react";
+import { IsGuestContext } from "../../pages/_app";
 
 interface TransferCoursesToggleProps {
   isExpanded: boolean;
@@ -25,6 +27,7 @@ export const TransferCourses: React.FC<TransferCoursesToggleProps> = ({
 }) => {
   const { student, isLoading, mutateStudent } = useStudentWithPlans();
   const router = useRouter();
+  const { isGuest } = useContext(IsGuestContext);
 
   /*
   Simply refrain from displaying the transfer courses section if 
@@ -57,8 +60,15 @@ export const TransferCourses: React.FC<TransferCoursesToggleProps> = ({
       async () => {
         // have to clean all dnd ids before sending the student to our API
         const studentWithoutDndIds = cleanDndIdsFromStudent(updatedStudent);
-        await API.student.update(studentWithoutDndIds);
-        return fetchStudentAndPrepareForDnd();
+        if (isGuest) {
+          window.localStorage.setItem(
+            "student",
+            JSON.stringify(studentWithoutDndIds)
+          );
+        } else {
+          await API.student.update(studentWithoutDndIds);
+        }
+        return fetchStudentAndPrepareForDnd(isGuest);
       },
       {
         optimisticData: updatedStudent,
diff --git a/packages/frontend-v2/hooks/useLocalStorage.ts b/packages/frontend-v2/hooks/useLocalStorage.ts
index d2d72d065..702d85c49 100644
--- a/packages/frontend-v2/hooks/useLocalStorage.ts
+++ b/packages/frontend-v2/hooks/useLocalStorage.ts
@@ -16,9 +16,10 @@ import { logger } from "../utils";
  * @param key Key for the localstorage value.
  */
 export function useLocalStorage<T>(
-  key: string
-): [T | null, Dispatch<T>] {
-  const [storedValue, setStoredValue] = useState<T | null>(null);
+  key: string,
+  defaultValue: T
+): [T, Dispatch<T>] {
+  const [storedValue, setStoredValue] = useState<T>(defaultValue);
 
   useEffect(() => {
     try {
@@ -32,7 +33,7 @@ export function useLocalStorage<T>(
   const setValue = (value: T) => {
     try {
       setStoredValue(value);
-      window?.localStorage.setItem(key, JSON.stringify(value));
+      window.localStorage.setItem(key, JSON.stringify(value));
     } catch (error) {
       logger.error(error);
     }
diff --git a/packages/frontend-v2/hooks/useRedirectIfLoggedIn.ts b/packages/frontend-v2/hooks/useRedirectIfLoggedIn.ts
index e6b56f14f..4f81f96b9 100644
--- a/packages/frontend-v2/hooks/useRedirectIfLoggedIn.ts
+++ b/packages/frontend-v2/hooks/useRedirectIfLoggedIn.ts
@@ -1,8 +1,9 @@
 import { API } from "@graduate/api-client";
 import router from "next/router";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { logger } from "../utils";
 import { AxiosError } from "axios";
+import { IsGuestContext } from "../pages/_app";
 
 /**
  * If the user is already logged in, then redirect to onboarding/home.
@@ -12,11 +13,13 @@ import { AxiosError } from "axios";
  */
 export const useRedirectIfLoggedIn = () => {
   const [renderSpinner, setRenderSpinner] = useState(false);
+  const { setIsGuest } = useContext(IsGuestContext);
 
   const loginWithCookie = async () => {
     setRenderSpinner(true);
     try {
       await API.student.getMe();
+      setIsGuest(false);
       router.push("/home");
     } catch (err) {
       const error = err as AxiosError;
diff --git a/packages/frontend-v2/hooks/useStudentWithPlans.ts b/packages/frontend-v2/hooks/useStudentWithPlans.ts
index af4297938..b2ebad640 100644
--- a/packages/frontend-v2/hooks/useStudentWithPlans.ts
+++ b/packages/frontend-v2/hooks/useStudentWithPlans.ts
@@ -2,7 +2,9 @@ import useSWR, { KeyedMutator, SWRResponse } from "swr";
 import { API } from "@graduate/api-client";
 import { GetStudentResponse, StudentModel } from "@graduate/common";
 import { AxiosError } from "axios";
-import { preparePlanForDnd } from "../utils";
+import { defaultGuestStudent, preparePlanForDnd } from "../utils";
+import { useContext } from "react";
+import { IsGuestContext } from "../pages/_app";
 
 type StudentResponse = Omit<
   SWRResponse<GetStudentResponse, AxiosError | Error>,
@@ -22,9 +24,10 @@ export const USE_STUDENT_WITH_PLANS_SWR_KEY = `api/students/me`;
  * to cookies.
  */
 export function useStudentWithPlans(): UseStudentReturn {
-  const { data, mutate, ...rest } = useSWR(
-    USE_STUDENT_WITH_PLANS_SWR_KEY,
-    fetchStudentAndPrepareForDnd
+  const { isGuest } = useContext(IsGuestContext);
+
+  const { data, mutate, ...rest } = useSWR(USE_STUDENT_WITH_PLANS_SWR_KEY, () =>
+    fetchStudentAndPrepareForDnd(isGuest)
   );
 
   return {
@@ -39,10 +42,20 @@ export function useStudentWithPlans(): UseStudentReturn {
  * Fetches the student with plans and prepares all of the student's plans for
  * drag and drop by adding drag and drop ids.
  */
-export const fetchStudentAndPrepareForDnd = async (): Promise<
-  StudentModel<string>
-> => {
-  const student = await API.student.getMeWithPlan();
+export const fetchStudentAndPrepareForDnd = async (
+  isGuest: boolean
+): Promise<StudentModel<string>> => {
+  const studentString = window.localStorage.getItem("student");
+  const studentFromLocalStorage: GetStudentResponse = studentString
+    ? JSON.parse(studentString)
+    : defaultGuestStudent;
+
+  let student: GetStudentResponse;
+  if (!isGuest) {
+    student = await API.student.getMeWithPlan();
+  } else {
+    student = studentFromLocalStorage;
+  }
   const plansWithDndIds = student.plans.map(preparePlanForDnd);
 
   return {
diff --git a/packages/frontend-v2/pages/_app.tsx b/packages/frontend-v2/pages/_app.tsx
index 6ece3c5fb..9f4ee2f2f 100644
--- a/packages/frontend-v2/pages/_app.tsx
+++ b/packages/frontend-v2/pages/_app.tsx
@@ -1,21 +1,33 @@
-import Head from "next/head";
+import { Dispatch, SetStateAction, createContext, useState } from "react";
+import { ChakraProvider, Flex, Heading, Image, Text } from "@chakra-ui/react";
+import "@fontsource/montserrat-alternates";
 import type { AppProps } from "next/app";
+import Head from "next/head";
 import { useRouter } from "next/router";
-import { ChakraProvider, Flex, Heading, Text, Image } from "@chakra-ui/react";
-import { theme } from "../utils";
-import "react-toastify/dist/ReactToastify.min.css";
 import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.min.css";
 import { ErrorBoundary, GraduateDisabledAppHeader } from "../components";
-import "@fontsource/montserrat-alternates";
 import { useWindowSize } from "../hooks";
+import { theme } from "../utils";
 import { ClientSideError } from "../components/Error/ClientSideError";
 
+interface IsGuestContextType {
+  isGuest: boolean;
+  setIsGuest: Dispatch<SetStateAction<boolean>>;
+}
+
+export const IsGuestContext = createContext<IsGuestContextType>({
+  isGuest: false,
+  setIsGuest: () => undefined,
+});
+
 function MyApp({ Component, pageProps }: AppProps) {
   const router = useRouter();
   const { width } = useWindowSize();
 
   const isLandingPage = router.asPath === "/";
   const disableApp = !isLandingPage && width && width <= 1100;
+  const [isGuest, setIsGuest] = useState(false);
 
   return (
     <>
@@ -30,7 +42,9 @@ function MyApp({ Component, pageProps }: AppProps) {
           <link rel="icon" href="/favicon.svg" type="image/svg+xml"></link>
         </Head>
         <ChakraProvider theme={theme}>
-          {disableApp ? <DisabledApp /> : <Component {...pageProps} />}
+          <IsGuestContext.Provider value={{ isGuest, setIsGuest }}>
+            {disableApp ? <DisabledApp /> : <Component {...pageProps} />}
+          </IsGuestContext.Provider>
         </ChakraProvider>
         <ToastContainer position="bottom-right" />
       </ErrorBoundary>
diff --git a/packages/frontend-v2/pages/home.tsx b/packages/frontend-v2/pages/home.tsx
index 7f7c425bd..a80b31729 100644
--- a/packages/frontend-v2/pages/home.tsx
+++ b/packages/frontend-v2/pages/home.tsx
@@ -18,13 +18,14 @@ import {
 } from "@graduate/common";
 import { NextPage } from "next";
 import { useRouter } from "next/router";
-import { PropsWithChildren, useEffect, useState } from "react";
+import { PropsWithChildren, useContext, useEffect, useState } from "react";
 import {
   AddPlanModal,
   DeletePlanModal,
   DraggedScheduleCourse,
   EditPlanModal,
   GraduatePostAuthHeader,
+  GraduatePreAuthHeader,
   LoadingPage,
   NoMajorSidebar,
   NoPlanSidebar,
@@ -39,6 +40,7 @@ import {
   DELETE_COURSE_AREA_DND_ID,
   handleApiClientError,
   logger,
+  toast,
   updatePlanForStudent,
   updatePlanOnDragEnd,
 } from "../utils";
@@ -46,6 +48,7 @@ import {
   getCoReqWarnings,
   getPreReqWarnings,
 } from "../utils/plan/preAndCoReqCheck";
+import { IsGuestContext } from "./_app";
 
 // Algorithm to decide which droppable the course is currently over (if any).
 // See https://docs.dndkit.com/api-documentation/context-provider/collision-detection-algorithms for more info.
@@ -87,6 +90,8 @@ const HomePage: NextPage = () => {
   const [isTransferCoursesExpanded, setIsTransferCoursesExpanded] =
     useState<boolean>(false);
 
+  const { isGuest } = useContext(IsGuestContext);
+
   useEffect(() => {
     // once the student is fetched, set the selected plan id to the last updated plan
     if (student && selectedPlanId === undefined) {
@@ -109,6 +114,18 @@ const HomePage: NextPage = () => {
     }
   }, [student, selectedPlanId, setSelectedPlanId]);
 
+  /**
+   * Render a warning modal to let users know that if they are on a guest
+   * account, we don't save information
+   */
+  useEffect(() => {
+    if (isGuest) {
+      toast.warn(
+        "You are logged in on a guest account. Your data will be saved locally, but not on our servers"
+      );
+    }
+  }, [isGuest]);
+
   /**
    * Handle errors from useStudentWithPlans.
    *
@@ -191,8 +208,26 @@ const HomePage: NextPage = () => {
       async () => {
         // remove dnd ids, update the plan, and refetch the student
         const cleanedPlan = cleanDndIdsFromPlan(updatedPlan);
-        await API.plans.update(updatedPlan.id, cleanedPlan);
-        return fetchStudentAndPrepareForDnd();
+        if (isGuest) {
+          const cleanedPlanWithUpdatedTimeStamp: PlanModel<null> = {
+            ...cleanedPlan,
+            updatedAt: new Date(),
+          };
+          window.localStorage.setItem(
+            "student",
+            JSON.stringify({
+              ...student,
+              plans: student.plans.map((plan) =>
+                plan.id === cleanedPlanWithUpdatedTimeStamp.id
+                  ? cleanedPlanWithUpdatedTimeStamp
+                  : plan
+              ),
+            })
+          );
+        } else {
+          await API.plans.update(updatedPlan.id, cleanedPlan);
+        }
+        return fetchStudentAndPrepareForDnd(isGuest);
       },
       {
         optimisticData: updatedStudent,
@@ -290,6 +325,7 @@ const HomePage: NextPage = () => {
  */
 const PageLayout: React.FC<PropsWithChildren> = ({ children }) => {
   const { setNodeRef } = useDroppable({ id: DELETE_COURSE_AREA_DND_ID });
+  const { isGuest } = useContext(IsGuestContext);
   return (
     <Flex
       flexDirection="column"
@@ -297,7 +333,7 @@ const PageLayout: React.FC<PropsWithChildren> = ({ children }) => {
       overflow="hidden"
       ref={setNodeRef}
     >
-      <GraduatePostAuthHeader />
+      {isGuest ? <GraduatePreAuthHeader /> : <GraduatePostAuthHeader />}
       <Flex height="100%" overflow="hidden">
         {children}
       </Flex>
diff --git a/packages/frontend-v2/pages/login.tsx b/packages/frontend-v2/pages/login.tsx
index 0873f25ea..af8153ac3 100644
--- a/packages/frontend-v2/pages/login.tsx
+++ b/packages/frontend-v2/pages/login.tsx
@@ -14,6 +14,8 @@ import {
 } from "../components";
 import { useRedirectIfLoggedIn } from "../hooks";
 import { handleApiClientError, toast } from "../utils";
+import { useContext } from "react";
+import { IsGuestContext } from "./_app";
 
 const Login: NextPage = () => {
   return <AuthenticationPageLayout form={<LoginForm />} />;
@@ -22,6 +24,7 @@ const Login: NextPage = () => {
 const LoginForm: React.FC = () => {
   const router = useRouter();
   const renderSpinner = useRedirectIfLoggedIn();
+  const { setIsGuest } = useContext(IsGuestContext);
 
   const {
     register,
@@ -34,6 +37,7 @@ const LoginForm: React.FC = () => {
 
   const onSubmitHandler = async (payload: LoginStudentDto) => {
     try {
+      setIsGuest(false);
       await API.auth.login(payload);
       router.push("/home");
     } catch (err) {
diff --git a/packages/frontend-v2/pages/signup.tsx b/packages/frontend-v2/pages/signup.tsx
index 274996cbd..85b870081 100644
--- a/packages/frontend-v2/pages/signup.tsx
+++ b/packages/frontend-v2/pages/signup.tsx
@@ -23,6 +23,8 @@ import {
   WEAK_PASSWORD_MSG,
 } from "../utils";
 import { handleWeakPasswordError } from "../utils/error";
+import { useContext } from "react";
+import { IsGuestContext } from "./_app";
 
 const Signup: NextPage = () => {
   return <AuthenticationPageLayout form={<SignUpForm />} />;
@@ -30,6 +32,7 @@ const Signup: NextPage = () => {
 
 const SignUpForm: React.FC = () => {
   const router = useRouter();
+  const { setIsGuest } = useContext(IsGuestContext);
 
   const {
     register,
@@ -47,6 +50,7 @@ const SignUpForm: React.FC = () => {
 
   const onSubmitHandler = async (payload: SignUpStudentDto) => {
     try {
+      setIsGuest(false);
       await API.auth.register(payload);
       router.push("/emailConfirmation");
     } catch (err) {
diff --git a/packages/frontend-v2/utils/constants.ts b/packages/frontend-v2/utils/constants.ts
index b1b8ccc08..22e950792 100644
--- a/packages/frontend-v2/utils/constants.ts
+++ b/packages/frontend-v2/utils/constants.ts
@@ -1,6 +1,29 @@
+import { GetStudentResponse } from "@graduate/common";
+
 export const DELETE_COURSE_AREA_DND_ID = "delete-course-area";
 export const SIDEBAR_DND_ID_PREFIX = "sidebar";
 export const WEAK_PASSWORD_MSG =
   "A password should be at least 8 characters with digits and letters";
 export const SEARCH_NEU_FETCH_COURSE_ERROR_MSG =
   "Sorry, we can't load details for this course right now 😞. We rely on SearchNEU for our course details, and there may be an ongoing issue on their end. We recommend refreshing the page and trying again soon.";
+
+export const defaultGuestStudent: GetStudentResponse = {
+  uuid: undefined,
+  nuid: undefined,
+  fullName: undefined,
+  isOnboarded: false,
+  email: "guest@guest.com",
+  isEmailConfirmed: false,
+  academicYear: undefined,
+  graduateYear: undefined,
+  catalogYear: undefined,
+  major: undefined,
+  coopCycle: undefined,
+  coursesCompleted: undefined,
+  coursesTransfered: undefined,
+  primaryPlanId: undefined,
+  concentration: undefined,
+  createdAt: new Date(),
+  updatedAt: new Date(),
+  plans: [],
+};