diff --git a/src/components/Modals/Onboarding/Onboarding.vue b/src/components/Modals/Onboarding/Onboarding.vue
index aea70a69d..537ae4229 100644
--- a/src/components/Modals/Onboarding/Onboarding.vue
+++ b/src/components/Modals/Onboarding/Onboarding.vue
@@ -114,13 +114,7 @@ import OnboardingBasic from '@/components/Modals/Onboarding/OnboardingBasic.vue'
 import OnboardingTransfer from '@/components/Modals/Onboarding/OnboardingTransfer.vue';
 import OnboardingReview from '@/components/Modals/Onboarding/OnboardingReview.vue';
 import { setAppOnboardingData, populateSemesters } from '@/global-firestore-data';
-import {
-  getMajorFullName,
-  getMinorFullName,
-  getGradFullName,
-  computeGradYears,
-  SeasonOrdinal,
-} from '@/utilities';
+import { computeGradYears, SeasonOrdinal } from '@/utilities';
 import timeline1Text from '@/assets/images/timeline1text.svg';
 import timeline2Text from '@/assets/images/timeline2text.svg';
 import timeline3Text from '@/assets/images/timeline3text.svg';
@@ -176,17 +170,21 @@ export default defineComponent({
      *
      * @returns true if onboarding contains a major, minor, or program that is not in
      * requirementsJSON on this branch, false otherwise.
+     *
+     * FIXME: the requirement graph is not generated for the chosen major / minor / grad
+     * etc. and so cannot tell if the user has chosen a valid major / minor / grad.
      */
     isInvalidMajorMinorGradError(): boolean {
-      return (
-        this.onboarding.major
-          .map(getMajorFullName)
-          .some((majorFullName: string) => majorFullName === '') ||
-        this.onboarding.minor
-          .map(getMinorFullName)
-          .some((minorFullName: string) => minorFullName === '') ||
-        (this.onboarding.grad ? getGradFullName(this.onboarding.grad) === '' : false)
-      );
+      return false;
+      // return (
+      //   this.onboarding.major
+      //     .map(getMajorFullName)
+      //     .some((majorFullName: string) => majorFullName === '') ||
+      //   this.onboarding.minor
+      //     .map(getMinorFullName)
+      //     .some((minorFullName: string) => minorFullName === '') ||
+      //   (this.onboarding.grad ? getGradFullName(this.onboarding.grad) === '' : false)
+      // );
     },
     /**
      * Display error if the entrance and graduation year are not blank and the graduation semester comes before entrance semester, comparing the season if not blank
@@ -249,7 +247,7 @@ export default defineComponent({
     submitOnboarding() {
       const revised = this.setASCollegeReqs();
       this.clearTransferCreditIfGraduate();
-      setAppOnboardingData(this.name, revised);
+      // setAppOnboardingData(this.name, revised); // now done when you navigate to the page
       // indicates first time user onboarding
       if (!this.isEditingProfile) populateSemesters(revised);
       this.$emit('onboard');
@@ -279,9 +277,16 @@ export default defineComponent({
       ) {
         // special case: if the user has a graduate program (and not an undergrad program), skip the transfer page
         if (this.onboarding.grad !== '' && !this.onboarding.college && this.currentPage === 1) {
+          const revised = this.setASCollegeReqs();
+          this.clearTransferCreditIfGraduate();
+          setAppOnboardingData(this.name, revised);
           this.currentPage += 2;
-        } else {
-          this.currentPage = this.currentPage === FINAL_PAGE ? FINAL_PAGE : this.currentPage + 1;
+        } else if (this.currentPage !== FINAL_PAGE) {
+          // Needs to be done ahead of time.
+          const revised = this.setASCollegeReqs();
+          this.clearTransferCreditIfGraduate();
+          setAppOnboardingData(this.name, revised);
+          this.currentPage += 1;
         }
       }
     },
diff --git a/src/components/Modals/Onboarding/OnboardingBasic.vue b/src/components/Modals/Onboarding/OnboardingBasic.vue
index 02055fddc..b3bea4332 100644
--- a/src/components/Modals/Onboarding/OnboardingBasic.vue
+++ b/src/components/Modals/Onboarding/OnboardingBasic.vue
@@ -177,14 +177,8 @@
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import reqsData from '@/requirements/typed-requirement-json';
-import {
-  clickOutside,
-  getCurrentYear,
-  getCollegeFullName,
-  computeGradYears,
-  computeEntranceYears,
-} from '@/utilities';
+import store from '@/store';
+import { clickOutside, getCurrentYear, computeGradYears, computeEntranceYears } from '@/utilities';
 import OnboardingBasicMultiDropdown from './OnboardingBasicMultiDropdown.vue';
 import OnboardingBasicSingleDropdown from './OnboardingBasicSingleDropdown.vue';
 
@@ -193,6 +187,11 @@ import spring from '@/assets/images/springEmoji.svg';
 import winter from '@/assets/images/winterEmoji.svg';
 import summer from '@/assets/images/summerEmoji.svg';
 
+import majors from '@/requirements/majors.json';
+import minors from '@/requirements/minors.json';
+import colleges from '@/requirements/colleges.json';
+import grad from '@/requirements/grad.json';
+
 const placeholderText = 'Select one';
 
 export default defineComponent({
@@ -274,40 +273,22 @@ export default defineComponent({
       return computeGradYears(this.entranceYear);
     },
     colleges(): Readonly<Record<string, string>> {
-      const base = Object.entries(reqsData.college)
-        .filter(college => !college[0].startsWith('AS'))
-        .map(([key, { name }]) => [key, name]);
-      base.push(['AS', getCollegeFullName('AS')]);
-      base.sort((c1, c2) => c1[1].localeCompare(c2[1]));
-      return Object.fromEntries(base);
+      return Object.fromEntries(colleges);
     },
     majors(): Readonly<Record<string, string>> {
-      const majors: Record<string, string> = {};
-      const majorJSON = reqsData.major;
+      // only majors in the user's college
       const acr = this.collegeAcronym !== 'AS' ? this.collegeAcronym : 'AS2';
-      Object.keys(majorJSON).forEach(key => {
-        // only show majors for schools the user is in
-        if (majorJSON[key].schools.includes(acr)) {
-          majors[key] = majorJSON[key].name;
-        }
-      });
-      return majors;
+      return Object.fromEntries(majors.filter(it => it[2].includes(acr)));
     },
     minors(): Readonly<Record<string, string>> {
-      const minors: Record<string, string> = {};
-      const minorJSON = reqsData.minor;
-      Object.keys(minorJSON).forEach(key => {
-        // show no minors if the user is not in a college
-        if (this.collegeAcronym) {
-          minors[key] = minorJSON[key].name;
-        }
-      });
-      return minors;
+      // show no minors if the user is not in a college
+      if (!this.collegeAcronym) {
+        return {};
+      }
+      return Object.fromEntries(minors);
     },
     gradPrograms(): Readonly<Record<string, string>> {
-      return Object.fromEntries(
-        Object.entries(reqsData.grad).map(([key, { name }]) => [key, name])
-      );
+      return Object.fromEntries(grad);
     },
     suggestedEntranceSem(): Readonly<number> {
       return getCurrentYear();
@@ -359,7 +340,7 @@ export default defineComponent({
     },
     // Clear a major if a new college is selected and the major is not in it
     clearMajorIfNotInCollege() {
-      const majorJSON = reqsData.major;
+      const majorJSON = store.state.storedRequirementsJSON.major;
       for (let x = 0; x < this.majorAcronyms.length; x += 1) {
         const majorAcronym = this.majorAcronyms[x];
         let foundCollege = false;
diff --git a/src/components/Modals/Onboarding/OnboardingReview.vue b/src/components/Modals/Onboarding/OnboardingReview.vue
index 3a93c39e9..bc9d12157 100644
--- a/src/components/Modals/Onboarding/OnboardingReview.vue
+++ b/src/components/Modals/Onboarding/OnboardingReview.vue
@@ -192,7 +192,7 @@ import {
   getMajorFullName,
   getMinorFullName,
   getGradFullName,
-} from '@/utilities';
+} from '@/store-utilities';
 import { GTagEvent } from '@/gtag';
 
 const placeholderText = 'Select one';
diff --git a/src/components/Requirements/RequirementHeader.vue b/src/components/Requirements/RequirementHeader.vue
index b7ec814aa..1004ffa49 100644
--- a/src/components/Requirements/RequirementHeader.vue
+++ b/src/components/Requirements/RequirementHeader.vue
@@ -196,13 +196,13 @@
 import { PropType, defineComponent } from 'vue';
 import DropDownArrow from '@/components/DropDownArrow.vue';
 import ProgressBarCaution from '@/components/Requirements/ProgressBarCaution.vue';
+import { getReqColor } from '@/utilities';
 import {
   getCollegeFullName,
   getMajorFullName,
   getMinorFullName,
   getGradFullName,
-  getReqColor,
-} from '@/utilities';
+} from '@/store-utilities';
 import featureFlagCheckers from '@/feature-flags';
 import {
   groupedRequirementDangerouslyFulfilled,
diff --git a/src/components/Tools/AdvisorCard.vue b/src/components/Tools/AdvisorCard.vue
index bef88cb0e..a5c15080a 100644
--- a/src/components/Tools/AdvisorCard.vue
+++ b/src/components/Tools/AdvisorCard.vue
@@ -30,7 +30,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import store from '@/store';
-import { getCollegeFullName, getMajorFullName } from '@/utilities';
+import { getCollegeFullName, getMajorFullName } from '@/store-utilities';
 import { AdvisorPackage } from '@/tools/advisors/types';
 import getAdvisor from '@/tools/advisors/utilities';
 
diff --git a/src/containers/Profile.vue b/src/containers/Profile.vue
index fe54df526..0478b5c87 100644
--- a/src/containers/Profile.vue
+++ b/src/containers/Profile.vue
@@ -69,13 +69,7 @@ import OnboardingBasic from '@/components/Modals/Onboarding/OnboardingBasic.vue'
 import OnboardingTransfer from '@/components/Modals/Onboarding/OnboardingTransfer.vue';
 import { setAppOnboardingData } from '@/global-firestore-data';
 import ProfileConfirmation from '@/components/Modals/ProfileConfirmation.vue';
-import {
-  getMajorFullName,
-  getMinorFullName,
-  getGradFullName,
-  computeGradYears,
-  SeasonOrdinal,
-} from '@/utilities';
+import { computeGradYears, SeasonOrdinal } from '@/utilities';
 import store from '@/store';
 
 const placeholderText = 'Select one';
@@ -119,16 +113,19 @@ export default defineComponent({
       }
       return false;
     },
+    // FIXME: the requirement graph is not generated for the chosen major / minor / grad
+    // etc. and so cannot tell if the user has chosen a valid major / minor / grad.
     isInvalidMajorMinorGradError(): boolean {
-      return (
-        this.onboarding.major
-          .map(getMajorFullName)
-          .some((majorFullName: string) => majorFullName === '') ||
-        this.onboarding.minor
-          .map(getMinorFullName)
-          .some((minorFullName: string) => minorFullName === '') ||
-        (this.onboarding.grad ? getGradFullName(this.onboarding.grad) === '' : false)
-      );
+      return false;
+      // return (
+      //   this.onboarding.major
+      //     .map(getMajorFullName)
+      //     .some((majorFullName: string) => majorFullName === '') ||
+      //   this.onboarding.minor
+      //     .map(getMinorFullName)
+      //     .some((minorFullName: string) => minorFullName === '') ||
+      //   (this.onboarding.grad ? getGradFullName(this.onboarding.grad) === '' : false)
+      // );
     },
     isError(): boolean {
       if (!this.changed || this.isInvalidGraduationSemester || this.isInvalidMajorMinorGradError) {
diff --git a/src/requirements/colleges.json b/src/requirements/colleges.json
new file mode 100644
index 000000000..1f4ce4183
--- /dev/null
+++ b/src/requirements/colleges.json
@@ -0,0 +1,30 @@
+[
+  [
+    "AG",
+    "Agriculture and Life Sciences"
+  ],
+  [
+    "AR",
+    "Architecture, Art and Planning"
+  ],
+  [
+    "AS",
+    "Arts and Sciences"
+  ],
+  [
+    "EN",
+    "Engineering"
+  ],
+  [
+    "HE",
+    "Human Ecology"
+  ],
+  [
+    "IL",
+    "Industrial Labor Relations"
+  ],
+  [
+    "BU",
+    "SC Johnson College of Business"
+  ]
+]
\ No newline at end of file
diff --git a/src/requirements/filter-from-api.ts b/src/requirements/filter-from-api.ts
new file mode 100644
index 000000000..413b703a0
--- /dev/null
+++ b/src/requirements/filter-from-api.ts
@@ -0,0 +1,40 @@
+import { DecoratedRequirementsJson } from './types';
+
+// TODO: update to real firebase function URL
+const BASE_URL = 'http://127.0.0.1:5001/advanced-todos-73680/us-central1/api/requirements';
+
+export default async function getDecoratedRequirementsJson(
+  major?: readonly string[],
+  minor?: readonly string[],
+  college?: string,
+  grad?: string
+): Promise<DecoratedRequirementsJson> {
+  try {
+    let formattedMajors = (major ?? []).join(',');
+    if (formattedMajors.length === 0) {
+      formattedMajors = 'skip-this';
+    }
+
+    let formattedMinors = (minor ?? []).join(',');
+    if (formattedMinors.length === 0) {
+      formattedMinors = 'skip-this';
+    }
+
+    let formattedGrad = grad;
+    if (!grad) {
+      formattedGrad = 'skip-this';
+    }
+
+    const route = `${BASE_URL}?major=${formattedMajors}&minor=${formattedMinors}&college=${college}&grad=${formattedGrad}`;
+    const response = await fetch(route);
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const data = (await response.json()) as DecoratedRequirementsJson;
+    return data;
+  } catch (e) {
+    // FIXME: the alternative is to return a default json, but that
+    // defeats the whole purpose. Maybe throw an error here?
+    return {} as DecoratedRequirementsJson;
+  }
+}
diff --git a/src/requirements/grad.json b/src/requirements/grad.json
new file mode 100644
index 000000000..f3406957d
--- /dev/null
+++ b/src/requirements/grad.json
@@ -0,0 +1,6 @@
+[
+  [
+    "MPA",
+    "Master of Public Administration (MPA) Program"
+  ]
+]
\ No newline at end of file
diff --git a/src/requirements/majors.json b/src/requirements/majors.json
new file mode 100644
index 000000000..dd93ab29e
--- /dev/null
+++ b/src/requirements/majors.json
@@ -0,0 +1,316 @@
+[
+  [
+    "AEM",
+    "Applied Economics and Management",
+    [
+      "AG",
+      "BU"
+    ]
+  ],
+  [
+    "ANTHR",
+    "Anthropology",
+    [
+      "AS1",
+      "AS2"
+    ]
+  ],
+  [
+    "AS",
+    "Atmospheric Science",
+    [
+      "AG"
+    ]
+  ],
+  [
+    "ASTRO",
+    "Astronomy",
+    [
+      "AS1",
+      "AS2"
+    ]
+  ],
+  [
+    "BIO",
+    "Biological Sciences",
+    [
+      "AG",
+      "AS1",
+      "AS2"
+    ]
+  ],
+  [
+    "BSOC",
+    "Biology and Society",
+    [
+      "AG",
+      "AS1",
+      "AS2"
+    ]
+  ],
+  [
+    "BME",
+    "Biomedical Engineering",
+    [
+      "EN"
+    ]
+  ],
+  [
+    "BE",
+    "Biological Engineering",
+    [
+      "EN"
+    ]
+  ],
+  [
+    "CE",
+    "Civil Engineering",
+    [
+      "EN"
+    ]
+  ],
+  [
+    "CHEM",
+    "Chemistry",
+    [
+      "AS1",
+      "AS2"
+    ]
+  ],
+  [
+    "CHEME",
+    "Chemical and Biomolecular Engineering",
+    [
+      "EN"
+    ]
+  ],
+  [
+    "COMM",
+    "Communication",
+    [
+      "AG"
+    ]
+  ],
+  [
+    "CRP",
+    "City and Regional Planning",
+    [
+      "AR"
+    ]
+  ],
+  [
+    "CS",
+    "Computer Science",
+    [
+      "EN",
+      "AS1",
+      "AS2"
+    ]
+  ],
+  [
+    "DEA",
+    "Design and Environmental Analysis",
+    [
+      "HE"
+    ]
+  ],
+  [
+    "EAS",
+    "Earth and Atmospheric Sciences",
+    [
+      "AG",
+      "AS1",
+      "AS2",
+      "EN"
+    ]
+  ],
+  [
+    "ECON",
+    "Economics",
+    [
+      "AS1",
+      "AS2"
+    ]
+  ],
+  [
+    "ECE",
+    "Electrical and Computer Engineering",
+    [
+      "EN"
+    ]
+  ],
+  [
+    "ENGL",
+    "English",
+    [
+      "AS1",
+      "AS2"
+    ]
+  ],
+  [
+    "ENV",
+    "Environmental Engineering",
+    [
+      "EN"
+    ]
+  ],
+  [
+    "ESS",
+    "Environment and Sustainability",
+    [
+      "AG",
+      "AS1",
+      "AS2"
+    ]
+  ],
+  [
+    "EP",
+    "Engineering Physics",
+    [
+      "EN"
+    ]
+  ],
+  [
+    "FSAD",
+    "Fashion Design",
+    [
+      "HE"
+    ]
+  ],
+  [
+    "FDSC",
+    "Food Science",
+    [
+      "AG"
+    ]
+  ],
+  [
+    "GOVT",
+    "Government",
+    [
+      "AS1",
+      "AS2"
+    ]
+  ],
+  [
+    "HADM",
+    "Hotel Administration",
+    [
+      "BU"
+    ]
+  ],
+  [
+    "HD",
+    "Human Development",
+    [
+      "HE"
+    ]
+  ],
+  [
+    "HIST",
+    "History",
+    [
+      "AS1",
+      "AS2"
+    ]
+  ],
+  [
+    "INFO",
+    "Information Science",
+    [
+      "AS1",
+      "AG",
+      "AS2"
+    ]
+  ],
+  [
+    "ISST1",
+    "Information Science, Systems, and Technology [before Fall 2020]",
+    [
+      "EN"
+    ]
+  ],
+  [
+    "ISST2",
+    "Information Science, Systems, and Technology [Fall 2020 and after]",
+    [
+      "EN"
+    ]
+  ],
+  [
+    "LING",
+    "Linguistics",
+    [
+      "AS1",
+      "AS2"
+    ]
+  ],
+  [
+    "MATH",
+    "Math",
+    [
+      "AS1",
+      "AS2"
+    ]
+  ],
+  [
+    "ME",
+    "Mechanical Engineering",
+    [
+      "EN"
+    ]
+  ],
+  [
+    "MSE",
+    "Materials Science & Engineering",
+    [
+      "EN"
+    ]
+  ],
+  [
+    "ORIE",
+    "Operations Research and Engineering",
+    [
+      "EN"
+    ]
+  ],
+  [
+    "PAM",
+    "Policy Analysis and Management",
+    [
+      "HE"
+    ]
+  ],
+  [
+    "PHYS",
+    "Physics",
+    [
+      "AS1",
+      "AS2"
+    ]
+  ],
+  [
+    "PSYCH",
+    "Psychology",
+    [
+      "AS1",
+      "AS2"
+    ]
+  ],
+  [
+    "SPAN",
+    "Spanish",
+    [
+      "AS1",
+      "AS2"
+    ]
+  ],
+  [
+    "STS",
+    "Science & Technology Studies",
+    [
+      "AS1",
+      "AS2"
+    ]
+  ]
+]
\ No newline at end of file
diff --git a/src/requirements/minors.json b/src/requirements/minors.json
new file mode 100644
index 000000000..9e45bee2a
--- /dev/null
+++ b/src/requirements/minors.json
@@ -0,0 +1,185 @@
+[
+  [
+    "AEROSPACE",
+    "Aerospace Engineering",
+    [
+      "EN"
+    ]
+  ],
+  [
+    "ANIMALSCIENCE",
+    "Animal Science",
+    [
+      "AG"
+    ]
+  ],
+  [
+    "APPLIEDECON",
+    "Applied Economics",
+    [
+      "AG",
+      "BU"
+    ]
+  ],
+  [
+    "APPLIEDMATH",
+    "Applied Mathematics",
+    [
+      "EN"
+    ]
+  ],
+  [
+    "BU",
+    "Business",
+    [
+      "BU"
+    ]
+  ],
+  [
+    "COGSCI",
+    "Cognitive Science",
+    [
+      "AS1",
+      "AS2"
+    ]
+  ],
+  [
+    "CS",
+    "Computer Science",
+    [
+      "EN",
+      "AS1",
+      "AS2"
+    ]
+  ],
+  [
+    "DS",
+    "Data Science",
+    [
+      "EN",
+      "AG",
+      "AS2"
+    ]
+  ],
+  [
+    "DBME",
+    "Dyson Business Minor for Engineers",
+    [
+      "BU"
+    ]
+  ],
+  [
+    "DEA",
+    "Design and Environmental Analysis",
+    [
+      "HE"
+    ]
+  ],
+  [
+    "EAS",
+    "Earth and Atmospheric Sciences",
+    [
+      "EN",
+      "AG"
+    ]
+  ],
+  [
+    "ECE",
+    "Electrical and Computer Engineering",
+    [
+      "EN"
+    ]
+  ],
+  [
+    "GAMEDESIGN",
+    "Game Design",
+    [
+      "EN",
+      "AS1",
+      "AS2"
+    ]
+  ],
+  [
+    "HP",
+    "Health Policy",
+    [
+      "HE"
+    ]
+  ],
+  [
+    "HD",
+    "Human Development",
+    [
+      "HE"
+    ]
+  ],
+  [
+    "INEQ",
+    "Inequality Studies",
+    [
+      "AS1",
+      "AS2"
+    ]
+  ],
+  [
+    "ISST",
+    "Information Science [Engineering]",
+    [
+      "EN"
+    ]
+  ],
+  [
+    "LING",
+    "Linguistics",
+    [
+      "AS1",
+      "AS2"
+    ]
+  ],
+  [
+    "MATH",
+    "Mathematics",
+    [
+      "AS1",
+      "AS2"
+    ]
+  ],
+  [
+    "ORMS",
+    "Operations Research and Management Science",
+    [
+      "EN"
+    ]
+  ],
+  [
+    "POLICY",
+    "Public Policy",
+    [
+      "AS1",
+      "AS2"
+    ]
+  ],
+  [
+    "PSYCH",
+    "Psychology",
+    [
+      "AS1",
+      "AS2"
+    ]
+  ],
+  [
+    "ROBOTICS",
+    "Robotics",
+    [
+      "EN"
+    ]
+  ],
+  [
+    "SPAN",
+    "Spanish",
+    [
+      "AS1",
+      "AS2"
+    ]
+  ]
+]
\ No newline at end of file
diff --git a/src/requirements/requirement-frontend-computation.ts b/src/requirements/requirement-frontend-computation.ts
index 8ba90b5a0..a6f52f3d7 100644
--- a/src/requirements/requirement-frontend-computation.ts
+++ b/src/requirements/requirement-frontend-computation.ts
@@ -9,6 +9,7 @@ import {
 import RequirementFulfillmentGraph from './requirement-graph';
 import buildRequirementFulfillmentGraphFromUserData from './requirement-graph-builder-from-user-data';
 import featureFlagCheckers from '../feature-flags';
+import { DecoratedRequirementsJson } from './types';
 
 /**
  * Used for total academic credit requirements for all colleges except EN and AR
@@ -200,6 +201,7 @@ function mergeRequirementFulfillmentStatisticsWithAdditionalRequirements(
 export default function computeGroupedRequirementFulfillmentReports(
   semesters: readonly FirestoreSemester[],
   onboardingData: AppOnboardingData,
+  requirementJson: DecoratedRequirementsJson,
   toggleableRequirementChoices: AppToggleableRequirementChoices,
   overriddenFulfillmentChoices: FirestoreOverriddenFulfillmentChoices
 ): {
@@ -223,6 +225,7 @@ export default function computeGroupedRequirementFulfillmentReports(
   } = buildRequirementFulfillmentGraphFromUserData(
     coursesTaken,
     onboardingData,
+    requirementJson,
     toggleableRequirementChoices,
     overriddenFulfillmentChoices
   );
diff --git a/src/requirements/requirement-frontend-utils.ts b/src/requirements/requirement-frontend-utils.ts
index ed0835a14..56c6d3b75 100644
--- a/src/requirements/requirement-frontend-utils.ts
+++ b/src/requirements/requirement-frontend-utils.ts
@@ -1,8 +1,8 @@
-import requirementJson from './typed-requirement-json';
 import specialized from './specialize';
 import { examCourseIds } from './requirement-exam-mapping';
 import { getConstraintViolationsForSingleCourse } from './requirement-constraints-utils';
 import featureFlagCheckers from '../feature-flags';
+import { DecoratedRequirementsJson } from './types';
 
 /**
  * A collection of helper functions
@@ -86,6 +86,7 @@ export function allowCourseDoubleCountingBetweenRequirements(
   requirementA: RequirementWithIDSourceType,
   requirementB: RequirementWithIDSourceType
 ): boolean {
+  if (!requirementA || !requirementB) return false;
   const allowCourseDoubleCounting =
     requirementA.allowCourseDoubleCounting || requirementB.allowCourseDoubleCounting || false;
 
@@ -121,11 +122,16 @@ export function allowCourseDoubleCountingBetweenRequirements(
 /**
  * Get the requirements for a provided collection of majors/minors
  *
+ * @param requirementJson a json object carrying user-specific requirements
  * @param sourceType The type of the field of study, e.g. 'Major' or 'Minor'
  * @param fields the names of the majors/minors
  * @returns An array of requirements corresponding to every field of study in `fields`
  */
-const fieldOfStudyReqs = (sourceType: 'Major' | 'Minor', fields: readonly string[]) => {
+const fieldOfStudyReqs = (
+  requirementJson: DecoratedRequirementsJson,
+  sourceType: 'Major' | 'Minor',
+  fields: readonly string[]
+) => {
   const jsonKey = sourceType.toLowerCase() as 'major' | 'minor';
   const fieldRequirements = requirementJson[jsonKey];
   return fields
@@ -147,23 +153,29 @@ const fieldOfStudyReqs = (sourceType: 'Major' | 'Minor', fields: readonly string
 /**
  * Get the majors corresponding to a list of major names
  *
+ * @param requirementJson a json object carrying user-specific requirements
  * @param majorNames the majors of the majors
  * @returns An array of `Major<DecoratedCollegeOrMajorRequirement>` representing
  * with the provided names. Names corresponding to no known major are ignored.
  */
-const getMajors = (majorNames: readonly string[]) =>
+const getMajors = (requirementJson: DecoratedRequirementsJson, majorNames: readonly string[]) =>
   majorNames.map(name => requirementJson.major[name]).filter(major => major !== undefined);
 
 /**
  * Get the specialized requirements for a college given a list of majors
  *
+ * @param requirementJson a json object carrying user-specific requirements
  * @param collegeName the name of the college the user is enrolled in
  * @param majorNames an array of the names of the majors the user is planning for
  * @returns An array of college requirements specialized for the user based on
  * their majors
  */
-const specializedForCollege = (collegeName: string, majorNames: readonly string[]) => {
-  const majors = getMajors(majorNames);
+const specializedForCollege = (
+  requirementJson: DecoratedRequirementsJson,
+  collegeName: string,
+  majorNames: readonly string[]
+) => {
+  const majors = getMajors(requirementJson, majorNames);
   const collegeReqs = requirementJson.college[collegeName].requirements;
   const spec = specialized(collegeReqs, majors);
   return spec.map(
@@ -177,12 +189,13 @@ const specializedForCollege = (collegeName: string, majorNames: readonly string[
   );
 };
 
-export function getUserRequirements({
-  college,
-  major: majors,
-  minor: minors,
-  grad,
-}: AppOnboardingData): readonly RequirementWithIDSourceType[] {
+export function getUserRequirements(
+  { college, major: majors, minor: minors, grad }: AppOnboardingData,
+  requirementJson: DecoratedRequirementsJson
+): readonly RequirementWithIDSourceType[] {
+  // Since we are doing computing after page load.
+  if (!requirementJson.college) return [];
+
   // check university & college & major & minor requirements
   if (college && !(college in requirementJson.college))
     throw new Error(`College ${college} not found.`);
@@ -200,9 +213,9 @@ export function getUserRequirements({
           } as const)
       )
     : [];
-  const collegeReqs = college ? specializedForCollege(college, majors) : [];
-  const majorReqs = fieldOfStudyReqs('Major', majors);
-  const minorReqs = fieldOfStudyReqs('Minor', minors);
+  const collegeReqs = college ? specializedForCollege(requirementJson, college, majors) : [];
+  const majorReqs = fieldOfStudyReqs(requirementJson, 'Major', majors);
+  const minorReqs = fieldOfStudyReqs(requirementJson, 'Minor', minors);
   const gradReqs = grad
     ? requirementJson.grad[grad].requirements.map(
         it =>
diff --git a/src/requirements/requirement-graph-builder-from-user-data.ts b/src/requirements/requirement-graph-builder-from-user-data.ts
index 5d31987cd..729b48343 100644
--- a/src/requirements/requirement-graph-builder-from-user-data.ts
+++ b/src/requirements/requirement-graph-builder-from-user-data.ts
@@ -9,10 +9,12 @@ import {
   buildRequirementFulfillmentGraph,
   removeIllegalEdgesFromRequirementFulfillmentGraph,
 } from './requirement-graph-builder';
+import { DecoratedRequirementsJson } from './types';
 
 export default function buildRequirementFulfillmentGraphFromUserData(
   coursesTaken: readonly CourseTaken[],
   onboardingData: AppOnboardingData,
+  requirementJson: DecoratedRequirementsJson,
   toggleableRequirementChoices: AppToggleableRequirementChoices,
   overriddenFulfillmentChoices: FirestoreOverriddenFulfillmentChoices
 ): {
@@ -23,7 +25,7 @@ export default function buildRequirementFulfillmentGraphFromUserData(
   readonly doubleCountedCourseUniqueIDSet: ReadonlySet<string | number>;
   readonly courseToRequirementsInConstraintViolations: Map<string | number, Set<string[]>>;
 } {
-  const userRequirements = getUserRequirements(onboardingData);
+  const userRequirements = getUserRequirements(onboardingData, requirementJson);
   const userRequirementsMap = Object.fromEntries(userRequirements.map(it => [it.id, it]));
 
   const requirementGraphBuilderParameters: BuildRequirementFulfillmentGraphParameters<
diff --git a/src/requirements/requirement-json-generator.ts b/src/requirements/requirement-json-generator.ts
index 55ac0a5d3..494693e79 100644
--- a/src/requirements/requirement-json-generator.ts
+++ b/src/requirements/requirement-json-generator.ts
@@ -406,3 +406,39 @@ const decoratedRequirements = generateDecoratedRequirementsJson();
 const decoratedRequirementsString = JSON.stringify(decoratedRequirements, undefined, 2);
 
 writeFileSync('src/requirements/decorated-requirements.json', decoratedRequirementsString);
+
+const majors = Object.keys(decoratedRequirements.major).map(major => [
+  major,
+  decoratedRequirements.major[major].name,
+  decoratedRequirements.major[major].schools,
+]);
+
+writeFileSync('src/requirements/majors.json', JSON.stringify(majors, undefined, 2));
+
+const minors = Object.keys(decoratedRequirements.minor).map(minor => [
+  minor,
+  decoratedRequirements.minor[minor].name,
+  decoratedRequirements.minor[minor].schools,
+]);
+
+writeFileSync('src/requirements/minors.json', JSON.stringify(minors, undefined, 2));
+
+const collegesOut = Object.keys(decoratedRequirements.college)
+  .map(college => [college, decoratedRequirements.college[college].name])
+  .filter(([college]) => college !== 'AS1')
+  .map(([college, name]) => {
+    if (college === 'AS2') {
+      return ['AS', 'Arts and Sciences'];
+    }
+
+    return [college, name];
+  });
+
+writeFileSync('src/requirements/colleges.json', JSON.stringify(collegesOut, undefined, 2));
+
+const grad = Object.keys(decoratedRequirements.grad).map(gr => [
+  gr,
+  decoratedRequirements.grad[gr].name,
+]);
+
+writeFileSync('src/requirements/grad.json', JSON.stringify(grad, undefined, 2));
diff --git a/src/requirements/typed-requirement-json.ts b/src/requirements/typed-requirement-json.ts
index 4ca3a786b..3bba40b76 100644
--- a/src/requirements/typed-requirement-json.ts
+++ b/src/requirements/typed-requirement-json.ts
@@ -12,6 +12,7 @@ import decoratedRequirementJson from './decorated-requirements.json';
 //    - Requirement generation runs on node, requirement checking runs in browser.
 //      They have different import mechanisms. It's better to separate them.
 //    - To help webpack to avoid bundling the giant `filtered-all-courses.json`.
+// 3. This file is only used for a frontend test. Not used in the actual app.
 
 /** The generated requirement json that contains all pre-computed courses that satisfy each requirement. */
 export default (decoratedRequirementJson as unknown) as DecoratedRequirementsJson;
diff --git a/src/store-utilities.ts b/src/store-utilities.ts
new file mode 100644
index 000000000..cc7a0c1d0
--- /dev/null
+++ b/src/store-utilities.ts
@@ -0,0 +1,42 @@
+import store from '@/store';
+
+export function getCollegeFullName(acronym: string | undefined): string {
+  // return Arts and Sciences for AS, AS1, or AS2
+  if (acronym && acronym.startsWith('AS')) {
+    return 'Arts and Sciences';
+  }
+  if (!store.state.storedRequirementsJSON.college) {
+    return '';
+  }
+  const college = acronym ? store.state.storedRequirementsJSON.college[acronym] : null;
+
+  // Return empty string if college is not in requirementJSON
+  return college ? college.name : '';
+}
+
+export function getMajorFullName(acronym: string): string {
+  // Return empty string if major is not in requirementJSON
+  if (!store.state.storedRequirementsJSON.major) {
+    return '';
+  }
+  const major = store.state.storedRequirementsJSON.major[acronym];
+  return major ? major.name : '';
+}
+
+export function getMinorFullName(acronym: string): string {
+  // Return empty string if minor is not in requirementJSON
+  if (!store.state.storedRequirementsJSON.minor) {
+    return '';
+  }
+  const minor = store.state.storedRequirementsJSON.minor[acronym];
+  return minor ? minor.name : '';
+}
+
+export function getGradFullName(acronym: string | undefined): string {
+  // Return empty string if grad is not in requirementJSON
+  if (!store.state.storedRequirementsJSON.grad) {
+    return '';
+  }
+  const grad = acronym ? store.state.storedRequirementsJSON.grad[acronym] : null;
+  return grad ? grad.name : '';
+}
diff --git a/src/store.ts b/src/store.ts
index 75ba96e6c..d0921a462 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -17,6 +17,8 @@ import {
 } from './utilities';
 import featureFlagCheckers from './feature-flags';
 import { setUserProperties } from './gtag';
+import { DecoratedRequirementsJson } from './requirements/types';
+import getDecoratedRequirementsJson from './requirements/filter-from-api';
 
 type SimplifiedFirebaseUser = { readonly displayName: string; readonly email: string };
 
@@ -35,6 +37,7 @@ type DerivedCoursesData = {
 export type VuexStoreState = {
   currentFirebaseUser: SimplifiedFirebaseUser;
   userName: FirestoreUserName;
+  storedRequirementsJSON: DecoratedRequirementsJson;
   onboardingData: AppOnboardingData;
   semesters: readonly FirestoreSemester[];
   orderByNewest: boolean;
@@ -63,6 +66,7 @@ const store: TypedVuexStore = new TypedVuexStore({
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     currentFirebaseUser: null!,
     userName: { firstName: '', middleName: '', lastName: '' },
+    storedRequirementsJSON: {} as DecoratedRequirementsJson,
     onboardingData: {
       gradYear: '',
       gradSem: '',
@@ -105,6 +109,12 @@ const store: TypedVuexStore = new TypedVuexStore({
     setUserName(state: VuexStoreState, userName: FirestoreUserName) {
       state.userName = userName;
     },
+    async setStoredRequirementsJSON(
+      state: VuexStoreState,
+      storedRequirementsJSON: DecoratedRequirementsJson
+    ) {
+      state.storedRequirementsJSON = storedRequirementsJSON;
+    },
     setOnboardingData(state: VuexStoreState, onboardingData: AppOnboardingData) {
       state.onboardingData = onboardingData;
     },
@@ -162,7 +172,7 @@ const store: TypedVuexStore = new TypedVuexStore({
 });
 
 const autoRecomputeDerivedData = (): (() => void) =>
-  store.subscribe((mutation, state) => {
+  store.subscribe(async (mutation, state) => {
     switch (mutation.type) {
       case 'setOnboardingData': {
         setUserProperties(mutation.payload);
@@ -210,12 +220,24 @@ const autoRecomputeDerivedData = (): (() => void) =>
       mutation.type === 'setToggleableRequirementChoices' ||
       mutation.type === 'setOverriddenFulfillmentChoices'
     ) {
+      if (mutation.type === 'setOnboardingData') {
+        store.commit(
+          'setStoredRequirementsJSON',
+          await getDecoratedRequirementsJson(
+            state.onboardingData.major,
+            state.onboardingData.minor,
+            state.onboardingData.college,
+            state.onboardingData.grad
+          )
+        );
+      }
       if (state.onboardingData.college !== '') {
         store.commit(
           'setRequirementData',
           computeGroupedRequirementFulfillmentReports(
             state.semesters,
             state.onboardingData,
+            state.storedRequirementsJSON,
             state.toggleableRequirementChoices,
             state.overriddenFulfillmentChoices
           )
diff --git a/src/tools/export-plan/pdf-generator.ts b/src/tools/export-plan/pdf-generator.ts
index 46f05fa6e..0acf2371f 100644
--- a/src/tools/export-plan/pdf-generator.ts
+++ b/src/tools/export-plan/pdf-generator.ts
@@ -12,13 +12,13 @@ import userDataToExamCourses from '../../requirements/requirement-exam-utils';
 import { trimEmptySems, bubbleColorMap, getCourseRows, loadImage } from './utilities';
 import { SemesterRows } from './types';
 
+import { sortedSemesters } from '../../utilities';
 import {
   getCollegeFullName,
   getMajorFullName,
   getMinorFullName,
   getGradFullName,
-  sortedSemesters,
-} from '../../utilities';
+} from '../../store-utilities';
 import store from '../../store';
 import { addFonts } from './add-fonts';
 
diff --git a/src/utilities.ts b/src/utilities.ts
index 7b85e71e8..7d2880fcc 100644
--- a/src/utilities.ts
+++ b/src/utilities.ts
@@ -1,5 +1,4 @@
 import { fullCoursesArray } from './assets/courses/typed-full-courses';
-import requirementJSON from './requirements/typed-requirement-json';
 import { coursesColorSet } from './assets/constants/colors';
 
 /** Enumerated type to define seasons as integers in season order
@@ -87,35 +86,6 @@ export function computeEntranceYears(): Readonly<Record<string, string>> {
   return semsDict;
 }
 
-export function getCollegeFullName(acronym: string | undefined): string {
-  // return Arts and Sciences for AS, AS1, or AS2
-  if (acronym && acronym.startsWith('AS')) {
-    return 'Arts and Sciences';
-  }
-  const college = acronym ? requirementJSON.college[acronym] : null;
-
-  // Return empty string if college is not in requirementJSON
-  return college ? college.name : '';
-}
-
-export function getMajorFullName(acronym: string): string {
-  // Return empty string if major is not in requirementJSON
-  const major = requirementJSON.major[acronym];
-  return major ? major.name : '';
-}
-
-export function getMinorFullName(acronym: string): string {
-  // Return empty string if minor is not in requirementJSON
-  const minor = requirementJSON.minor[acronym];
-  return minor ? minor.name : '';
-}
-
-export function getGradFullName(acronym: string | undefined): string {
-  // Return empty string if grad is not in requirementJSON
-  const grad = acronym ? requirementJSON.grad[acronym] : null;
-  return grad ? grad.name : '';
-}
-
 function getAllSubjects(): ReadonlySet<string> {
   const set = new Set<string>();
   fullCoursesArray.forEach(it => set.add(it.subject));