diff --git a/docs/web/architecture.md b/docs/web/architecture.md
index c7e5291c..2999afc5 100644
--- a/docs/web/architecture.md
+++ b/docs/web/architecture.md
@@ -379,6 +379,7 @@ web/frontend/
│ │ - catalog beers, beer styles
│ │ - home landing page
│ │ - theme theme switcher/guide
+│ │ - users public user profile page (/users/:id)
│ ├── hooks/ Shared hooks not tied to one feature, for example useMediaQuery
│ ├── routes.ts Route table (React Router 8 config-based routing)
│ ├── root.tsx App shell and global providers
@@ -395,6 +396,8 @@ web/frontend/
`/breweries/:id`) with Leaflet-powered maps and geolocation-based "nearby"
search
- Render the auth demo, account dashboard, and theme guide routes
+- Render the public user profile route (`/users/:id`), including a user's
+ following list and (via brewery comments) links back to commenter profiles
- Manage cookie-backed website session state
- Call the .NET API for login, registration, token refresh, confirmation, and
brewery/location data
diff --git a/web/frontend/app/features/breweries/components/detail/comments/CommentItem.stories.tsx b/web/frontend/app/features/breweries/components/detail/comments/CommentItem.stories.tsx
index 539c4354..ce47e50f 100644
--- a/web/frontend/app/features/breweries/components/detail/comments/CommentItem.stories.tsx
+++ b/web/frontend/app/features/breweries/components/detail/comments/CommentItem.stories.tsx
@@ -8,6 +8,7 @@ const commentItemDescription = `A single comment row on the brewery detail page:
const comment: FillerComment = {
id: '1',
user: 'malt_kettle',
+ userAccountId: 'malt_kettle',
initials: 'MK',
rating: 5,
time: '2 days ago',
diff --git a/web/frontend/app/features/breweries/components/detail/comments/CommentItem.tsx b/web/frontend/app/features/breweries/components/detail/comments/CommentItem.tsx
index 370b502d..1f49ef56 100644
--- a/web/frontend/app/features/breweries/components/detail/comments/CommentItem.tsx
+++ b/web/frontend/app/features/breweries/components/detail/comments/CommentItem.tsx
@@ -1,4 +1,5 @@
import { Heart, HeartSolid } from 'iconoir-react';
+import { Link } from 'react-router';
import StarRating from '../../shared/StarRating';
import type { FillerComment } from '../../../utils/filler-brewery-detail';
@@ -19,7 +20,9 @@ const CommentItem = ({ comment, onToggleLike }: CommentItemProps) => {
- {comment.user}
+
+ {comment.user}
+
{comment.time}
diff --git a/web/frontend/app/features/breweries/routes/brewery-detail.tsx b/web/frontend/app/features/breweries/routes/brewery-detail.tsx
index e715c2f2..eae5ef02 100644
--- a/web/frontend/app/features/breweries/routes/brewery-detail.tsx
+++ b/web/frontend/app/features/breweries/routes/brewery-detail.tsx
@@ -28,13 +28,14 @@ export const loader = async ({ request, params }: Route.LoaderArgs) => {
brewery,
loggedIn: auth !== null,
username: auth?.username ?? null,
+ userAccountId: auth?.userAccountId ?? null,
};
};
const initials = (username: string) => username.slice(0, 2).toUpperCase();
const BreweryDetail = ({ loaderData }: Route.ComponentProps) => {
- const { brewery, loggedIn, username } = loaderData;
+ const { brewery, loggedIn, username, userAccountId } = loaderData;
const [liked, setLiked] = useState(false);
const [likeCount, setLikeCount] = useState(FILLER_BREWERY_META.likeCount);
@@ -57,6 +58,7 @@ const BreweryDetail = ({ loaderData }: Route.ComponentProps) => {
{
id: crypto.randomUUID(),
user: username ?? 'you',
+ userAccountId: userAccountId ?? '',
initials: username ? initials(username) : 'YO',
rating: yourRating,
time: 'just now',
diff --git a/web/frontend/app/features/breweries/utils/filler-brewery-detail.ts b/web/frontend/app/features/breweries/utils/filler-brewery-detail.ts
index 554900a3..690aa184 100644
--- a/web/frontend/app/features/breweries/utils/filler-brewery-detail.ts
+++ b/web/frontend/app/features/breweries/utils/filler-brewery-detail.ts
@@ -88,6 +88,7 @@ export const FILLER_BEERS: FillerBeer[] = [
export interface FillerComment {
id: string;
user: string;
+ userAccountId: string;
initials: string;
rating: number;
time: string;
@@ -100,6 +101,7 @@ export const FILLER_COMMENTS: FillerComment[] = [
{
id: '1',
user: 'malt_kettle',
+ userAccountId: 'malt_kettle',
initials: 'MK',
rating: 5,
time: '2 days ago',
@@ -110,6 +112,7 @@ export const FILLER_COMMENTS: FillerComment[] = [
{
id: '2',
user: 'stoutfan_88',
+ userAccountId: 'stoutfan_88',
initials: 'SB',
rating: 4,
time: '1 week ago',
@@ -120,6 +123,7 @@ export const FILLER_COMMENTS: FillerComment[] = [
{
id: '3',
user: 'ale_annie',
+ userAccountId: 'ale_annie',
initials: 'AL',
rating: 4,
time: '3 weeks ago',
diff --git a/web/frontend/app/features/users/components/profile/tabs/FollowingTab.tsx b/web/frontend/app/features/users/components/profile/tabs/FollowingTab.tsx
index 53552452..6d60e4ae 100644
--- a/web/frontend/app/features/users/components/profile/tabs/FollowingTab.tsx
+++ b/web/frontend/app/features/users/components/profile/tabs/FollowingTab.tsx
@@ -1,3 +1,4 @@
+import { Link } from 'react-router';
import EmptyState from '../EmptyState';
import type { FillerFollowing } from '../../../utils/filler-user-profile';
@@ -31,7 +32,16 @@ const FollowingTab = ({ following, onToggleFollow }: FollowingTabProps) => {
-
{f.name}
+ {f.userAccountId ? (
+
+ {f.name}
+
+ ) : (
+
{f.name}
+ )}
{f.meta}