Swap out Roommates tab for Reviews tab #58

New issue

Open

opened 2026-07-20 06:19:56 +00:00 by gostmeaper · 0 comments

gostmeaper commented

2026-07-20 06:19:56 +00:00

(Migrated from codeberg.org)

Overall Objective

The navbar (apps/frontend/src/components/Navbar.tsx) currently has a "Roommates" tab that links to /roommates. That route isn't actually registered in App.tsx, so clicking it currently falls through to the catch-all * route and shows the generic 404 page (apps/frontend/src/app/not-found.tsx, "We couldn't find that page"). We want to repurpose this tab as "Reviews" instead, and give it a proper placeholder page instead of the 404.

For the placeholder page instead of 404 have it say Coming Soon!

Suggested Approach

In Navbar.tsx, find the NavButton with href="/roommates" and name="Roommates" (around line 51). Change the href to /reviews, the name to "Reviews", and swap the icon to something more fitting than /person.svg (check the public folder for existing icons, or ask if we need a new one).
Update the two NavbarSpacer components next to it (right_nbr_path="/roommates" and left_nbr_path="/roommates") to use /reviews instead, so the spacing between nav items still lines up.
Create a new page component, for example apps/frontend/src/app/reviews/page.tsx. Keep it simple for now, a heading like "Reviews" and a short message like "Reviews are coming soon!" is enough. You can loosely model the layout on apps/frontend/src/app/map-page.tsx since that's a simple single-purpose page.
In App.tsx, import your new page and add a route for it: <Route path="/reviews" element={<Reviews />} />, placed above the catch-all * route.
Run the app and click the nav tab to confirm it goes to your new Reviews page instead of the 404 page.

Help & Resources

### Overall Objective The navbar (apps/frontend/src/components/Navbar.tsx) currently has a "Roommates" tab that links to /roommates. That route isn't actually registered in App.tsx, so clicking it currently falls through to the catch-all * route and shows the generic 404 page (apps/frontend/src/app/not-found.tsx, "We couldn't find that page"). We want to repurpose this tab as "Reviews" instead, and give it a proper placeholder page instead of the 404. For the placeholder page instead of 404 have it say Coming Soon! ### Suggested Approach 1. In `Navbar.tsx`, find the `NavButton` with `href="/roommates"` and `name="Roommates"` (around line 51). Change the `href` to `/reviews`, the `name` to `"Reviews"`, and swap the icon to something more fitting than `/person.svg` (check the `public` folder for existing icons, or ask if we need a new one). 2. Update the two `NavbarSpacer` components next to it (`right_nbr_path="/roommates"` and `left_nbr_path="/roommates"`) to use `/reviews` instead, so the spacing between nav items still lines up. 3. Create a new page component, for example `apps/frontend/src/app/reviews/page.tsx`. Keep it simple for now, a heading like "Reviews" and a short message like "Reviews are coming soon!" is enough. You can loosely model the layout on `apps/frontend/src/app/map-page.tsx` since that's a simple single-purpose page. 4. In `App.tsx`, import your new page and add a route for it: `<Route path="/reviews" element={<Reviews />} />`, placed above the catch-all `*` route. 5. Run the app and click the nav tab to confirm it goes to your new Reviews page instead of the 404 page. ### Help & Resources - [README](../../ScottyLabs/housing/src/branch/main/README.md) - [Contributing Guidelines](../../ScottyLabs/housing/src/branch/main/docs/CONTRIBUTING.md)

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

ScottyLabs/housing#58

No description provided.

Rows
Columns