feat: build vendor registration and profile page

[EmeditWeb]

Problem

Vendors have no way to register or manage their profile
on StepFi-Web. The /vendors page is a placeholder.

Context

Vendors are one of the main participants in the StepFi
protocol. They need to register, list their products, and
see which learner loans are tied to their catalog.

Before Starting

Read these context files:

• context/architecture-context.md
• context/code-standards.md

What To Build

1. Create src/services/vendors.service.ts:

   • listVendors(page, limit) -> GET /vendors
   • getVendor(id) -> GET /vendors/:id
   • registerVendor(data) -> POST /vendors

2. Build /vendors page showing:

   • Search bar with category filter
   • Grid of vendor cards (name, category, country,
     rating)
   • Each card links to vendor detail page

3. Build /vendors/register page with form:

   • Name (required)
   • Category (select: Electronics, Bootcamp,
     OnlineCourse, DevTools, Books)
   • Country (required)
   • City (optional)
   • Website (optional, URL validation)
   • Description (optional, max 500 chars)
   • Submit calls POST /vendors with JWT auth

4. Build /vendors/:id page showing vendor detail

Files To Touch

• src/pages/Vendors.tsx
• src/pages/VendorDetail.tsx (new)
• src/pages/VendorRegister.tsx (new)
• src/services/vendors.service.ts
• src/router/index.tsx (add new routes)

Acceptance Criteria

• Vendor list loads from API with pagination
• Registration form validates all fields
• Category dropdown shows all valid options
• URL validation on website field
• Auth required for registration
• Loading, error, empty states handled
• No hardcoded hex colors

Mandatory Checks Before PR

• npm run build passes with zero TypeScript errors
• No any types
• PR references this issue

[Iwayemi-Kehinde]

I would like to work on this issue as I have reviewed the scope, I should have a PR Ready in 50 minutes.

[EneGab]

I would like to work on this issue, easy fix will work on it as fast as possible

[OG-wura]

Hello maintainer. can I please work on this

[khaylebfortune]

Hello Maintainer, I can fix this issue.

[divicbold47]

Hello maintainer pls assign me this task

[deslawson]

Hi StepFi Team,

I'd like to work on this issue. I have experience building React pages, TypeScript services, form validation, routing, and authenticated API integrations. I'll implement the vendor service, vendor listing, registration flow, detail page, and ensure all acceptance criteria are met, including pagination, validation, loading/error states, and strict TypeScript compliance.

Thank you for your consideration.

[grantfox-oss]

🦊 GrantFox — @khaylebfortune has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #2)
2. Your PR will be reviewed by the StepFi-app maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox!

@khaylebfortune's PR #53 was approved and merged by @EmeditWeb.

🏆 @khaylebfortune: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (261 total points). Track your full progress on GrantFox.

👏 Great work, @khaylebfortune! Keep contributing to StepFi-app.