Threadit

Threadit is a production-oriented mock community forum frontend inspired by forum-style social networks. It does not use Reddit names, logos, assets, or copied UI. All data is generated and persisted in the browser with a replaceable mock service layer.

Architecture

• app/: Next.js App Router entrypoints, metadata, error boundaries, robots, sitemap.
• src/components/ui/: shadcn-style primitives built with Tailwind tokens.
• src/features/: feature slices for auth, feed, posts, comments, communities, profile, search, chat, notifications, settings, moderation, premium, and submit.
• src/hooks/: TanStack Query hooks and optimistic mutation wiring.
• src/mocks/: deterministic factories and mock API/persistence layer.
• src/stores/: Zustand persisted client state.
• src/types/: strict domain models, including discriminated Post unions.
• tests/: Vitest unit tests and Playwright E2E smoke tests.

Tech Stack

Next.js App Router, React, TypeScript strict mode, Tailwind CSS, shadcn-style UI primitives, Lucide Icons, Zustand, TanStack Query, React Hook Form, Zod, date-fns, next-themes, Sonner, dnd-kit, Recharts, Vitest, React Testing Library, and Playwright.

Commands

npm install
npm run dev
npm run typecheck
npm run lint
npm run test
npm run build
npm run test:e2e

Routes

Implemented through typed route parsing:

• /, /popular, /latest, /all
• /login, /register, /forgot-password, /reset-password, /email-verification, /two-factor, /backup-code
• /search, /search/ai, /submit
• /communities, /communities/create
• /c/[community], /c/[community]/about, /c/[community]/wiki, /c/[community]/comments/[postId]
• /u/[username], /u/[username]/posts, /u/[username]/comments, /u/[username]/saved, /u/[username]/hidden
• /settings/account, /settings/profile, /settings/privacy, /settings/feed, /settings/notifications, /settings/chat, /settings/accessibility
• /notifications, /inbox, /chat, /chat/[conversationId]
• /custom-feeds, /custom-feeds/[feedId]
• /premium, /achievements
• /moderator/[community], /moderator/[community]/queue, /moderator/[community]/users, /moderator/[community]/modmail, /moderator/[community]/settings, /moderator/[community]/automoderator, /moderator/[community]/scheduled, /moderator/[community]/insights
• /404, /error

Data Model

Core types include User, Community, CommunityRule, Post, TextPost, ImagePost, GalleryPost, VideoPost, LinkPost, PollPost, AmaPost, Comment, Vote, Award, Achievement, Trophy, Notification, ChatConversation, ChatMessage, CustomFeed, Report, ModeratorAction, ModmailConversation, AnalyticsMetric, UserSettings, and PremiumSubscription.

Post is a discriminated union by type.

Mock API

src/mocks/mock-api.ts exposes service-style functions for feeds, search, post/comment creation, voting, saving, joining, following, chat, notifications, settings, moderation, premium, and dev tools. Components do not import mock JSON directly.

Data is generated by src/mocks/factories.ts using a fixed seed:

• 50 users
• 25 communities
• 150 posts
• 500 comments
• 30 chat conversations
• 200 messages
• 80 notifications
• 30 awards
• 40 achievements
• 20 moderation reports
• 20 modmail conversations
• 90 analytics days
• 10 custom feeds

Mock state persists in localStorage under threadit:mock-db:v1. The dev panel can reset it, toggle latency/errors, trigger notifications, trigger chat, simulate rate limiting, and simulate session expiration.

Personas

The development panel supports: Guest, Normal user, Premium user, Moderator, Community admin, and Suspended user.

Implementation Phases

1. Project setup and dependencies.
2. Design tokens and UI primitives.
3. Types and deterministic mock data.
4. Mock API and persistence.
5. Mock auth/persona flows.
6. Responsive layout.
7. Feed, posts, voting, saving, hiding.
8. Post detail and nested comments.
9. Community pages and creation flow.
10. Profile, search, chat, notifications.
11. Settings, premium, awards, achievements.
12. Moderator dashboard, queue, modmail, insights.
13. Tests, SEO helpers, accessibility states, README.

Accessibility Notes

The app uses semantic landmarks, skip-to-content, labelled icon buttons, visible focus styles, alt text for images, accessible form errors, keyboard-friendly tabs/buttons, and reduced-motion CSS. Modal focus trapping is intentionally lightweight in this mock and should be upgraded with Radix Dialog before production deployment.

Performance Notes

Feeds use cursor pagination through TanStack Query and render incremental pages. Mock data is generated in factories and queried through services. Media uses next/image; charts are isolated to moderation screens.

Replacing Mock API

Replace src/mocks/mock-api.ts with a REST or GraphQL client that preserves the same service function contracts. The UI hooks in src/hooks/use-threadit.ts are the integration boundary for cache keys, optimistic updates, and invalidation.

Current Limits

This is a broad frontend vertical slice rather than a full backend product. Payments, auth, uploads, AI search, video playback, realtime transport, and moderator automation are mocked.