Add Basic Mentorship Request UI (MVP Version)

[codeunia-dev]

This PR introduces the initial MVP of the Mentorship Request feature.
The current implementation focuses purely on the frontend workflow, without any backend integration.

What’s Included

• “Request Mentorship” button now opens a dialog box.

• Students can type a custom message for the mentor.

• “Send Request” triggers:

  • A loading state (1.5s)
  • Logs the message to the console
  • Shows a success toast: “Request sent to [Mentor Name]!”

• No actual request is stored or sent — this is purely UI-level functionality.

What’s NOT Included (intentionally for now)

• No database integration
• No email notifications
• No API calls
• No mentor dashboard updates
• No real chat or request processing

Why this MVP?

This keeps the build lightweight and allows us to validate:

• UI flow
• UX experience
• User engagement
• Component stability

Before investing in a full backend pipeline.

Next Steps (Planned for Future PRs)

• Add a mentorship_requests table
• Create API endpoints for request creation
• Mentor dashboard for viewing & responding
• Optional email notifications
• Real chat after request acceptance

---

Authored by: @akshay0611

Summary by CodeRabbit

• New Features
  • Browse and filter approved mentors by expertise areas and mentoring type
  • Search mentors by name or professional background
  • View comprehensive mentor profiles with availability and LinkedIn information
  • Request mentorship connections directly from mentor profiles

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
codeunia	Ready	Preview	Comment	Nov 28, 2025 6:31am

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

This pull request introduces a complete mentorship feature enabling users to discover, filter, and request connections with approved mentors. It includes backend API routes for fetching and seeding mentor data, new UI components for displaying mentor profiles with filtering capabilities, and a page orchestrating the mentorship discovery experience.

Changes

Cohort / File(s)	Summary
API Routes app/api/mentors/route.ts, app/api/seed-real-mentors/route.ts	New GET handlers: /api/mentors queries Supabase for approved mentors with optional filters (expertise, mentoring type) and text search across name, company, and occupation; /api/seed-real-mentors initializes the database with sample mentor records. Both set runtime to nodejs and use a Supabase client helper.
Mentor Display Components app/protected/mentorship/components/MentorCard.tsx	New MentorCard component renders individual mentor profiles with avatar (mapped images or Dicebear), name, occupation, company, LinkedIn link, expertise badges (up to 4 with "+N more" overflow), availability, and mentoring type icons. Includes Mentor interface with relevant profile fields.
Filter & Dialog Components app/protected/mentorship/components/MentorshipFilters.tsx, app/protected/mentorship/components/RequestDialog.tsx	MentorshipFilters exports a client component with search input and Select dropdowns for expertise and mentoring type. RequestDialog renders a modal for users to message mentors with loading state and success toast feedback.
Mentorship Page app/protected/mentorship/page.tsx	New page component fetches mentors from /api/mentors with debounced filtering based on search and filter selections, displays results in a responsive animated grid, and integrates MentorshipFilters and MentorCard components.

Sequence Diagram

sequenceDiagram
    participant User
    participant MentorshipPage as Mentorship Page
    participant API as /api/mentors
    participant Supabase
    participant RequestDialog

    User->>MentorshipPage: Land on page / Update search/filters
    MentorshipPage->>MentorshipPage: Debounce search & filter state
    MentorshipPage->>API: GET /api/mentors?search=...&expertise=...&type=...
    API->>Supabase: Query mentor_applications (approved, filtered)
    Supabase-->>API: Return mentor records
    API-->>MentorshipPage: JSON list of mentors
    MentorshipPage->>MentorshipPage: Set mentors state, stop loading
    MentorshipPage->>MentorshipPage: Render MentorCard grid (animated)
    User->>MentorshipPage: Click "Request Mentorship" on card
    MentorshipPage->>RequestDialog: Open dialog with mentor details
    User->>RequestDialog: Enter message & click Submit
    RequestDialog->>RequestDialog: Simulate API call (loading)
    RequestDialog->>RequestDialog: Show success toast
    RequestDialog->>RequestDialog: Close dialog & reset

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• API route logic: Review query construction, filter application, and Supabase client initialization across both routes
• Component state management: Verify debouncing implementation and filter state propagation in the main page component
• Form handling: Validate RequestDialog's form submission flow and loading state toggling
• UI integration: Ensure MentorCard and MentorshipFilters props align with page-level state management

Poem

🐰 A warren of mentors now hops into view,
With filters and searches to find the right crew,
Request a connection with just a few words,
The mentorship meadow now welcomes all birds! 🌱✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/datarestorescript

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 31791f8 and df5d8a7.

📒 Files selected for processing (6)

• app/api/mentors/route.ts (1 hunks)
• app/api/seed-real-mentors/route.ts (1 hunks)
• app/protected/mentorship/components/MentorCard.tsx (1 hunks)
• app/protected/mentorship/components/MentorshipFilters.tsx (1 hunks)
• app/protected/mentorship/components/RequestDialog.tsx (1 hunks)
• app/protected/mentorship/page.tsx (1 hunks)

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}