yurisldk/realworld-react-fsd

This system is a React-based web application that has been refactored to use Webpack for build configuration and React Router v6 for navigation and data loading. It features a shared API layer with centralized authentication and error handling, alongside a suite of reusable UI components for loading and error states. The codebase enforces code quality through automated linting and testing hooks, while utilizing React Query for state management and MSW for client-side API mocking.

The shared UI library now includes three new components: a global progress bar that displays a simulated loading animation during navigation states, a spinner component for general loading indicators, and an async error card to display router-level errors. These additions provide consistent visual feedback for asynchronous operations and error handling across the application.

src/shared/ui · high confidence

Added new shared library modules to support application logic and routing. This includes a date formatting utility, a React Router middleware to load and cache the current user's data (including handling 401 errors and token clearing), and two new middleware functions for React Router: one to redirect authenticated users away from login pages, and another to require authentication for protected routes. Additionally, a shared context for the user state was introduced, along with a helper to extract error messages from React Router responses. A basic example test and test setup file were also added to the test directory.

src/shared/lib · high confidence

The application has removed the previous provider layer that wrapped the app with \BrowserRouter\, \QueryClientProvider\, and a custom \Router\ component. Specifically, \src/app/providers/QueryClientProvider.tsx\, \src/app/providers/RouterProvider.tsx\, and the composite \src/app/providers/index.tsx\ have been deleted. This eliminates the direct instantiation of \@tanstack/react-query\ and \react-router-dom\ within these provider components, likely as part of a broader refactoring to simplify the application's root setup or migrate to a different routing/state management approach.

src/app/providers · high confidence

Husky hooks have been added to automatically run linting and tests. On each commit, the staged files are linted via \yarn lint-staged\. On push, the test suite runs via \yarn test --no-coverage\, with coverage reporting disabled to improve feedback speed.

.husky · high confidence

The pages in src/pages have been refactored to use React Router v6's data APIs, replacing the previous approach. Each page now defines a loader function to fetch data and an action function to handle mutations (such as creating, updating, or deleting articles and comments, and toggling favorites or follows). The route configurations use the new \lazy\ and \middleware\ properties, and components utilize hooks like \useLoaderData\ and \useFetcher\ to manage state and interactions.

src/pages · high confidence

The application's routing and data-fetching architecture has been updated to use React Router v6. This introduces a new layout component that renders the global navigation and footer, while child routes are rendered via \<Outlet\>. A new loader function fetches the current user's data at the root level, making it available to all nested routes. The entry point now initializes the router and React Query client, replacing the previous setup.

src/app · high confidence

The project replaced the previous Vite-based build configuration with a Webpack setup, introducing a new \webpack.config.js\ that handles TypeScript, CSS, and asset processing. ESLint configuration was migrated from a CommonJS (\.cjs\) file to an ES module (\.eslintrc.js\) format, and Prettier configuration was similarly updated to a new \.prettierrc.js\ file. Additionally, a \dependency-cruiser\ configuration was added to enforce architectural rules and visualize the \src\ directory's dependency graph.

(repo-wide) · high confidence

The shared API module has been refactored to introduce a new authentication flow and improved error handling. A new \auth-storage\ module manages token persistence in localStorage, while \auth-fetch\ provides a standardized fetch wrapper that automatically attaches the authorization header. Error handling is now centralized in \handleApiError\, which invalidates expired tokens and processes validation errors into a consistent \ActionResult\ format. The previous \realworld.ts\ file containing hardcoded DTOs and a direct fetch implementation has been removed.

src/shared/api · medium confidence

The global type declarations for 'Id' and Vite client environment types have been removed from the codebase. Specifically, the 'types/app.d.ts' and 'types/vite-env.d.ts' files have been deleted, eliminating the global 'Id' string type and Vite client type references.

types · high confidence

The public/index.html template was updated to use a modern, self-hosted font stack and removed external CSS dependencies, while a new public/mockServiceWorker.js file was added to enable client-side API mocking via MSW.

public · high confidence

The project has been migrated from a Vite-based setup to a Webpack-based architecture, introducing a comprehensive suite of build and testing tools. Key updates include upgrading React to version 19.2.4 and React Router to 7.13.0, alongside significant updates to development dependencies such as Jest, ESLint, and Webpack. The configuration now includes support for CSS, SCSS, and image processing via Webpack plugins, and integrates testing libraries like Testing Library and MSW.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 53 → 58 (+5.9)
• Rubric changed (rubric-2026.08.19 → rubric-2026.09.15) — scores are not directly comparable.

• Code Health 84 → 93 (+8.2)
• Architecture 100 → 95 (-5.4)
• Maturity 63 → 67 (+3.8)
• Readiness 43 → 51 (+8.0)
• Security 55 → 75 (+19.5)
• Accessibility 54 → 54 (+0.0)

• Coverage not included — suite not readable by the collector
• Critical CVE: [GHSA redacted] (yarn.lock)
• Critical CVE: [GHSA redacted] (yarn.lock)
• Critical CVE: [GHSA redacted] (yarn.lock)
• Dependency hygiene not measured — dependency manifest found but not parsed for hygiene
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• …and 44 more

• Critical CVE: [GHSA redacted] (yarn.lock)
• Critical CVE: [GHSA redacted] (yarn.lock)
• Critical CVE: [GHSA redacted] (yarn.lock)
• Critical CVE: [GHSA redacted] (yarn.lock)
• Documentation: no installation or build instructions (README.md)
• Documentation: no usage examples (README.md)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• …and 62 more

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

yurisldk/realworld-react-fsd was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.