School Name Standardization and Settings Page ⚙️ - Will & Hansini

[danglorioso]

Summary

For this sprint, you’ll create a standardization system for school names to ensure consistent identification across multiple years of data. You’ll develop an algorithm that normalizes school name variations into standard identifiers. You’ll also implement the initial UI for the Settings page that will eventually grow to add various admin controls.

Goals of this sprint:

• Standardize school names so that we can identify schools by their name.
• Create the basic outline of the settings page that will be used by admin to control many aspects of the web application.

⚙️ Setup

Before starting:

1. Pull the latest changes from main:

   git checkout main
   git pull
   

2. Create a new branch for this sprint:
   git checkout -b sprint2-settings
3. Install dependencies:
   npm install or npm i
4. Run the dev server and verify the site builds:
   npm run dev
5. Visit http://localhost:3000 to confirm everything runs.

🧭 Implementation

Step 1: Standardize school names

• School names are stored somewhat inconsistently in the spreadsheet. This means that two school names may in theory refer to the same school but are not entered into the spreadsheet in the same way (e.g. “Medford High School” vs. “Medford High” vs. “Medford Public Schools”).
• You should define the standardizing algorithm in a function that should live in the src/lib/ directory. It should be one function but you might want to have it call helper functions as well. You should also ensure to export the function from the file you define it in so it can be used outside that file.
• The criteria for the standardizing school names algorithm is relatively open-ended. Our only goal is to input a school name and receive an identifier for a school as output with all unnecessary information stripped from the input string.
• We will get you started on things to consider when stripping unnecessary information from a school name, but you are definitely going to want to add additional functionality. One major source of inconsistency is including the word “School(s)” in the name. Thus, you should strip this so that two strings like "Medford High School” and “Medford High” are treated the same. Additionally, the word “Public” is often extraneous, so it may be stripped as well. Since we are dealing with middle, elementary, and high schools, it is important to keep any of these keywords in the school name so we can distinguish “Medford Middle School” from “Medford High School”.
• You will also probably want to remove all non-text characters like spaces, as well as any punctuation or capitalization.
• You should study the sample data in the Google Drive to see examples of inconsistencies that need to be addressed.
• The output of the standardizing function will be what we store in the database to check equality between schools.

Step 2: Implement settings page

• The second part of this sprint is to implement the basic settings page. There is not a ton of functionality that we have to implement here quite yet, but we will add to this page as the year goes on.
• See the Figma for the design of the settings page that you will implement, and ensure that your page matches the Figma design.

Acceptance Criteria

• School name standardization function exists in src/lib/, is exported, and handles common inconsistencies
• Standardization function has been tested with sample data from Google Drive and correctly identifies matching schools with different name formats
• Settings page is implemented and matches the Figma
• UI matches Figma
• Code runs locally without errors and builds successfully
• Merge via PR

Questions

If you get stuck or have questions:

• DM Dan or Shayne on Slack
• Come to office hours or ask during a hack night
• Ask questions during team meetings – we’re here to help!

Resources

• Figma: https://www.figma.com/design/hxC6tNqUqfygC7GOz8fcPG/JumboCode-MHD-Website
• React useState: https://react.dev/reference/react/useState
• React useEffect: https://react.dev/reference/react/useEffect
• Next.js Routing: https://nextjs.org/docs/app/building-your-application/routing
• Tailwind CSS Docs: https://tailwindcss.com/docs
• shadcn: https://ui.shadcn.com/docs/components/data-table
• npm: https://www.npmjs.com/