Improve hacker application UX by jagadeep298218 · Pull Request #49 · hackutd/harp

jagadeep298218 · 2026-03-06T01:34:25Z

Description

This PR addresses multiple frontend UX issues on the hacker application and admin review pages, focusing on improved data entry, better form accessibility, and enhanced admin visibility.

Changes

1. Phone Number Auto-Formatting

Problem: The phone number field was a plain text input requiring users to manually type country codes and format numbers, leading to inconsistent data and poor UX.

Solution: Created a custom PhoneInput component (components/ui/phone-input.tsx) that:

Displays a country code dropdown (US +1, IN +91, etc.) with 30+ countries
Auto-formats the national number as users type: (555) 123-4567
Stores data in E.164 format (+15551234567) for backend compatibility
Parses existing E.164 values to display correctly when editing
Uses shadcn/ui Select and Input components for consistent styling

Files:

client/web/src/components/ui/phone-input.tsx (NEW)
client/web/src/pages/hacker/apply/steps/PersonalInfoStep.tsx (MODIFIED)

2. University Searchable Dropdown

Problem: University was a free-text input allowing inconsistent entries (e.g., "UTD", "UT Dallas", "University of Texas at Dallas").

Solution: Created UniversityCombobox component (pages/hacker/apply/components/UniversityComboBox.tsx) that:

Integrates with Hipo University Domains API for live search
Shows popular universities by default (UT Dallas, MIT, Stanford, etc.)
Implements debounced search (300ms) to reduce API calls
Caches results to improve performance
Allows custom entry via "Use [typed value]" option if university not found
Uses shadcn/ui Command + Popover for searchable dropdown pattern

Files:

client/web/src/pages/hacker/apply/components/UniversityComboBox.tsx (NEW)
client/web/src/pages/hacker/apply/api.ts (MODIFIED - added university search API)
client/web/src/pages/hacker/apply/steps/SchoolInfoStep.tsx (MODIFIED)

3. "Other" Option with Custom Text Input

Problem: Dropdown fields (Gender, Country, Level of Study, Heard About) had fixed options with no way to enter custom values.

Solution: Created reusable SelectWithOther component (pages/hacker/apply/components/SelectWithOther.tsx) that:

Shows standard dropdown options including "Other"
When "Other" is selected, reveals a text input below
Pressing Enter in the text input blurs it (visual save confirmation)
Correctly handles initial custom values when editing existing applications
Stores custom values directly in the field (e.g., gender = "Non-conforming")

Applied to:

Gender field
Country of Residence field
Level of Study field
"How did you hear about us?" field

Files:

client/web/src/pages/hacker/apply/components/SelectWithOther.tsx (NEW)
client/web/src/pages/hacker/apply/steps/PersonalInfoStep.tsx (MODIFIED)
client/web/src/pages/hacker/apply/steps/SchoolInfoStep.tsx (MODIFIED)
client/web/src/pages/hacker/apply/steps/ExperienceStep.tsx (MODIFIED)

4. "Major" → "Field(s) of Study" Label Change

Problem: "What is your major?" was too narrow for students with multiple fields of study or non-traditional backgrounds.

Solution: Updated labels across the application:

Form label: "Field(s) of study *"
Placeholder: "e.g., Computer Science, Data Science"
Review step display
Admin review panels

Files:

client/web/src/pages/hacker/apply/steps/SchoolInfoStep.tsx (MODIFIED)
client/web/src/pages/hacker/apply/steps/ReviewStep.tsx (MODIFIED)

5. Agreements & Acknowledgments Section (Admin View)

Problem: Admin review pages didn't display applicants' agreement status (MLH Code of Conduct, Privacy Policy, etc.), making compliance verification difficult.

Solution: Created AgreementsSection component with:

Visual checkmarks (✅) for agreed items
Red X marks (❌) for missing agreements
Required items marked with asterisks
Missing required agreements highlighted in red text

Displays:

"Understands application does not guarantee admission" *
"Agreed to MLH Code of Conduct" *
"Authorized sharing info with MLH (Privacy Policy)" *
"Opted in to MLH promotional emails" (optional)

Added to:

All Applicants detail panel
Assigned Reviews detail panel
Grading modal panel

Files:

client/web/src/pages/admin/all-applicants/components/detail-sections/AgreementsSection.tsx (NEW)
client/web/src/pages/admin/all-applicants/components/detail-sections/index.ts (MODIFIED)
client/web/src/pages/admin/all-applicants/components/ApplicationDetailPanel.tsx (MODIFIED)
client/web/src/pages/admin/_shared/grading/GradingDetailsPanel.tsx (MODIFIED)
client/web/src/pages/admin/assigned/components/ApplicationDetailsPanel.tsx (MODIFIED)

Testing

ESLint passes (npm run lint)
TypeScript compiles (npm run build)
Phone input formats correctly and stores E.164
University search returns results and allows custom entry
"Other" option reveals input and saves custom values
Agreements section displays correctly in admin panels
Form validation still works for all fields

Checklist

Code follows project conventions
Imports properly sorted (eslint-plugin-simple-import-sort)
New components use shadcn/ui patterns
API logic co-located in page directory (pages/hacker/apply/api.ts)
No breaking changes to existing functionality
Commit message follows Conventional Commits format

…ch, and other field support - Add PhoneInput component with country code dropdown and auto-formatting - Add UniversityCombobox with Hipo API search and popular universities list - Add SelectWithOther component for dropdowns with custom 'Other' text input - Add AgreementsSection to admin review panels for better visibility - Change 'Major' label to 'Field(s) of Study' across application forms - Add missing Race field to PersonalInfoStep - Fix .air.toml for Windows compatibility

balebbae · 2026-03-06T19:12:12Z


 [build]
  args_bin = []
-  bin = "./tmp/main"


Take these chanegs out

balebbae · 2026-03-06T19:12:47Z

 *.out
 vendor/

 # Air live reload


remove this as well. If you want have it set in your own global .gitignore

balebbae

Mainly removing backend fmt commits.

balebbae · 2026-03-06T19:14:05Z

Remove any changes to the backend. It seems to be formatting issues with tabs and spaces which I'm not getting maybe its a mac vs windows thing. I'll look into it but it shouldn't be here for this pr.

balebbae · 2026-03-06T19:15:49Z

+  }
+}
+
+export const POPULAR_UNIVERSITIES = [


Remove populate univs. just have them search for their univ

balebbae · 2026-03-06T19:17:24Z

loll just realized theres 2 applications details panel will fix later dw about it for now

balebbae · 2026-03-06T19:17:54Z

+  state_province: string | null;
+}
+
+const HIPO_API_BASE = "http://universities.hipolabs.com";


Can you use https?

…or university API, remove popular universities list Made-with: Cursor

…ckutd/harp into feat/frontend-ux-improvements

…ovements

Made-with: Cursor

balebbae · 2026-04-09T18:08:37Z

I'll wait on merging this. I want to completely change the current implementation for applications.

jagadeep298218 added 2 commits March 5, 2026 13:53

style: run prettier formatting

89fb47a

jagadeep298218 requested a review from balebbae March 6, 2026 01:47

Merge branch 'main' into feat/frontend-ux-improvements

49720f6

balebbae reviewed Mar 6, 2026

View reviewed changes

Comment thread .air.toml

[build]

args_bin = []

bin = "./tmp/main"

Copy link
Copy Markdown

Collaborator

balebbae Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Take these chanegs out

balebbae reviewed Mar 6, 2026

View reviewed changes

balebbae requested changes Mar 6, 2026

View reviewed changes

NoelVarghese2006 linked an issue Mar 7, 2026 that may be closed by this pull request

Fix FE issues/bugs on hacker application and review pages #40

Open

6 tasks

jagadeep298218 added 4 commits March 26, 2026 12:37

fix: address PR review feedback - revert backend changes, use https f…

8657acb

…or university API, remove popular universities list Made-with: Cursor

Merge branch 'feat/frontend-ux-improvements' of https://github.com/ha…

b2a35e1

…ckutd/harp into feat/frontend-ux-improvements

Merge remote-tracking branch 'origin/main' into feat/frontend-ux-impr…

7a1baa7

…ovements

fix: update picomatch to resolve high severity vulnerability

4f62cbc

Made-with: Cursor

balebbae closed this Apr 9, 2026

balebbae reopened this Apr 9, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve hacker application UX #49

Improve hacker application UX #49
jagadeep298218 wants to merge 7 commits intomainfrom
feat/frontend-ux-improvements

jagadeep298218 commented Mar 6, 2026

Uh oh!

balebbae Mar 6, 2026

Uh oh!

balebbae Mar 6, 2026

Uh oh!

balebbae left a comment

Uh oh!

balebbae Mar 6, 2026

Uh oh!

balebbae Mar 6, 2026

Uh oh!

balebbae Mar 6, 2026

Uh oh!

balebbae Mar 6, 2026

Uh oh!

balebbae commented Apr 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

jagadeep298218 commented Mar 6, 2026

Description

Changes

1. Phone Number Auto-Formatting

2. University Searchable Dropdown

3. "Other" Option with Custom Text Input

4. "Major" → "Field(s) of Study" Label Change

5. Agreements & Acknowledgments Section (Admin View)

Testing

Checklist

Uh oh!

balebbae Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

balebbae Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

balebbae left a comment

Choose a reason for hiding this comment

Uh oh!

balebbae Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

balebbae Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

balebbae Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

balebbae Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

balebbae commented Apr 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants