Replace the hand-rolled router in main.tsx with real React Router routes for Marketplace and API detail

[greatest0fallt1me]

Description

src/main.tsx ships a custom renderRoute() function that inspects window.location.pathname, lazy-imports MarketplacePage/ApiDetailPage, and calls root.render() again on every popstate event (src/main.tsx:14-69). This runs in parallel with the React Router <Routes> block already declared in App.tsx:486-654, so the app effectively has two competing routers. As a result the /marketplace route inside App.tsx:504-516 renders a placeholder card, while the real MarketplacePage is only reachable through the bespoke main.tsx branch, and navigation uses history.pushState + manual PopStateEvent dispatch (src/pages/MarketplacePage.tsx:105-107) instead of router navigation.

This issue consolidates everything onto a single react-router-dom (v6.30.3, already in package.json:14) tree so /marketplace, /details/:id, and the existing app routes are all driven by one router.

Requirements and context

• Reduce src/main.tsx to a single root.render() that mounts <BrowserRouter><ThemeProvider><App/></ThemeProvider></BrowserRouter>; remove renderRoute(), the popstate listener, and the dynamic import() branches.
• In App.tsx replace the placeholder marketplace <section> (src/App.tsx:504-516) with <MarketplacePage /> and add a <Route path="/details/:id"> rendering ApiDetailPage.
• Update ApiDetailPage to read the id via useParams() instead of parsing window.location.pathname (src/pages/ApiDetailPage.tsx:34-40), and replace its window.location.href = "/marketplace" back action (src/pages/ApiDetailPage.tsx:68) with useNavigate.
• Update MarketplacePage.handleViewDetails (src/pages/MarketplacePage.tsx:104-108) to call navigate(\/details/${api.id}`)instead ofhistory.pushState+PopStateEvent`.
• Non-functional: keep <React.StrictMode> and ThemeProvider wrapping, no console errors on back/forward navigation, and ensure code-splitting via React.lazy if bundle size matters.

Acceptance criteria

• src/main.tsx mounts exactly one router and contains no popstate listener or renderRoute function.
• /marketplace renders the real MarketplacePage (not the placeholder card).
• /details/:id renders ApiDetailPage, which resolves the id via useParams.
• Clicking an ApiCard and the "Back" button both navigate via React Router (no full page reload).
• Browser back/forward works without re-mounting the whole tree or throwing.
• npm run build passes with no TypeScript errors.

Suggested execution

1. Fork the repo and create a branch — git checkout -b feature/unify-react-router.

2. Implement changes — src/main.tsx, src/App.tsx, src/pages/MarketplacePage.tsx, src/pages/ApiDetailPage.tsx.

3. Write/extend tests — this repo currently has no test runner configured (package.json:6-10 exposes only dev/build/preview). Add Vitest + @testing-library/react + jsdom as devDependencies, a vitest.config.ts (or test block in vite.config.ts) with environment: "jsdom", and a "test": "vitest run" script. Add a routing smoke test that renders <MemoryRouter initialEntries={["/details/weather-001"]}> and asserts the detail page mounts.

4. Test and commit —

npm install
npm run dev      # manually verify /marketplace and /details/:id
npm run build    # tsc -b + vite build must pass
npm run test     # vitest run (after adding the runner)

Example commit message

feat(routing): unify app on a single react-router tree and remove custom main.tsx router

Guidelines

• Any module you add tests for must reach ≥90% line coverage.
• Preserve keyboard accessibility of ApiCard (role="button", tabIndex={0}) and ensure focus is not lost on navigation; update docs/comments that reference the old custom router.
• Timeframe: 96 hours.

[Menjay7]

Hi! I came across this issue and would love to work on it. I have experience with similar tasks and I'm confident I can investigate, implement a clean solution, and thoroughly test it before submitting a PR. If the issue is still open, I would appreciate it if you could assign it to me. Thank you!

[Menjay7]

Hi! I came across this issue and would love to work on it. I have experience with similar tasks and I'm confident I can investigate, implement a clean solution, and thoroughly test it before submitting a PR. If the issue is still open, I would appreciate it if you could assign it to me. Thank you!