frontend directory

[plsdoant]

created the frontend for profiles and the main page

[plsdoant]

solves #5

[plsdoant]

Added full CRUD functionality to the alumni directory frontend
addresses #6

Profile Create/Edit Form (ProfileFormPage.tsx)

• Single shared page handles both /profile/new and /profile/edit/:id — mode is detected via route params
• Edit mode pre-populates all fields by fetching the existing profile on load
• Fields: User ID, Name, Headline, Major, Start Year, Graduation Year, Bio, LinkedIn URL, and a dynamic Experiences section
• Experiences can be added and removed dynamically; each entry has Company, Title, Start Date, End Date, "Currently working here" checkbox, and Description
• End Date input is disabled when "Currently working here" is checked
• Per-field inline validation before submission (required fields, year range, URL format, ObjectId format for User ID)
• Calls POST /api on create and PUT /api/:id on edit; redirects to the profile detail page on success

Edit & Delete on Detail Page (DetailPage.tsx)

• "Edit Profile" button links to /profile/edit/:id
• "Delete Profile" button prompts with window.confirm before calling DELETE /api/:id, then redirects to home on success
• Delete errors are shown inline above the action bar

Add Profile Button on Home Page (HomePage.tsx)

• Header row added above the alumni grid with the page title and a "+ Add Profile" button linking to /profile/new
• Header is visible even when the alumni list is empty

Data Handling

• Added name field — separates the alumni's actual name from headline, which is now intended for their job title/role (e.g. "Software Engineer @ Amazon")
• Changed userId from ObjectId to String — removes the 24-char hex requirement so any string works now; keeps the field in place for when a real auth layer is added later
• Removed profilePhotoUrl — avatars now always display the first initial of the alumni's name

API Handling

• Added createAlumni, updateAlumni, and deleteAlumni functions
• Added throwApiError helper that reads the actual error message from the response body so server-side Mongoose errors are surfaced to the user instead of just showing the HTTP status code