feat(nx-dev): add downloadable resources page and React book blog post

(cherry picked from commit 160b4cc)

Author: juristr

astro-docs/src/components/layout/Header.astro

@@ -262,6 +262,75 @@ const currentVersion = versions.find((v) => v.current);
                 >Discord</span
               >
             </a>
+            <a
+              href={`${nxDevUrl}/resources-library?filterBy=book`}
+              class="flex items-center gap-3 px-2 py-2 rounded-md no-underline hover:bg-slate-50 transition-colors dark:hover:bg-slate-800/60"
+            >
+              <svg
+                class="w-5 h-5 text-slate-400 dark:text-slate-500"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"
+                ></path>
+              </svg>
+              <span
+                class="text-sm font-medium text-slate-900 dark:text-slate-200"
+                >Books</span
+              >
+            </a>
+            <a
+              href={`${nxDevUrl}/resources-library?filterBy=case-study`}
+              class="flex items-center gap-3 px-2 py-2 rounded-md no-underline hover:bg-slate-50 transition-colors dark:hover:bg-slate-800/60"
+            >
+              <svg
+                class="w-5 h-5 text-slate-400 dark:text-slate-500"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
+                ></path>
+              </svg>
+              <span
+                class="text-sm font-medium text-slate-900 dark:text-slate-200"
+                >Case Studies</span
+              >
+            </a>
+            <a
+              href={`${nxDevUrl}/resources-library?filterBy=whitepaper`}
+              class="flex items-center gap-3 px-2 py-2 rounded-md no-underline hover:bg-slate-50 transition-colors dark:hover:bg-slate-800/60"
+            >
+              <svg
+                class="w-5 h-5 text-slate-400 dark:text-slate-500"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
+                ></path>
+              </svg>
+              <span
+                class="text-sm font-medium text-slate-900 dark:text-slate-200"
+                >Whitepapers</span
+              >
+            </a>
           </div>
           <!-- Right Column -->
           <div class="space-y-4">
@@ -445,7 +514,11 @@ const currentVersion = versions.find((v) => v.current);
     const tryNxCloudBtn = document.getElementById('header-try-nx-cloud-btn');
 
     docsHomeLink?.addEventListener('click', () => {
-      sendCustomEvent('documentation-click', 'header-navigation', 'documentation-header');
+      sendCustomEvent(
+        'documentation-click',
+        'header-navigation',
+        'documentation-header'
+      );
     });
 
     contactBtn?.addEventListener('click', () => {

astro-docs/src/content/docs/getting-started/nx-cloud.mdoc

@@ -4,7 +4,7 @@ description: Get started with using Nx Cloud and improve your PRs time to green.
 filter: 'type:Features'
 ---
 
-{% youtube src="https://youtu.be/4VI-q943J3o" title="Fast CI for monorepos" width="100%" /%}
+{% youtube src="https://www.youtube.com/watch?v=cDBihpB3SbI" title="Nx and Nx Cloud" width="100%" /%}
 
 CI is challenging and it's **not your fault**. It's a fundamental issue with how the current, traditional CI execution model works. Nx Cloud adopts a new **task-based** CI model which allows you to overcome slowness and unreliability of the current VM-based CI model.
 _(Dive deeper into the [task based CI execution model](https://nx.dev/blog/reliable-ci-a-new-execution-model-fixing-both-flakiness-and-slowness))_

docs/blog/2025-10-28-react-enterprise-book.md

@@ -0,0 +1,57 @@
+---
+title: 'Book - React for Enterprise: Timeless Architecture for Enterprise Apps'
+slug: react-enterprise-book
+authors: ['Juri Strumpflohner']
+tags: [nx, react, enterprise, architecture]
+cover_image: /blog/images/articles/hero-enterprise-react-brainly.avif
+description: 'Learn how to bring order, automation, and long-term velocity to large React codebases with the new React Enterprise book by Przemysław Nowak from Brainly, written in collaboration with Nx.'
+---
+
+When React first appeared, it was presented as a lightweight UI library, not just another opinionated frontend framework. This flexibility and freedom of choice appealed to many. Since then, a lot has changed, but several important questions remain. How should you structure a large React codebase? Where should business logic reside? How can you maintain consistency across numerous teams without slowing them down?
+
+[Brainly](https://brainly.com/) is one of the world's largest educational platforms and has faced these exact challenges when scaling their React codebase. This new book - _React for Enterprise: Timeless Architecture for Enterprise Apps_ by Przemysław Nowak (Principal Engineer at Brainly), created in collaboration with Juri Strumpflohner (Nx) - distills their real-world lessons into battle-tested architectural patterns built on top of Nx.
+
+## Why Architecture Matters
+
+As React applications grow, the challenges shift from "how to build a component" to "how to maintain consistency across hundreds of components built by different teams." Without clear architectural guidelines:
+
+- Business logic scatters across components, hooks, and utility files
+- Dependencies between modules become tangled and unpredictable
+- Code review focuses on style rather than structural integrity
+- Onboarding new developers takes weeks instead of days
+
+The React Enterprise book shows how to solve these problems with a combination of architectural patterns and automated enforcement. By codifying your standards into Nx generators and boundary rules, your architecture becomes self-sustaining.
+
+The patterns in this book are built on Przemysław Nowak's work with [Brainly Gene](https://github.com/brainly/gene), an enterprise React framework that has scaled to support multiple product teams, millions of users, and continuous deployment cycles. Combined with Nx's proven capabilities in monorepo management and developer tooling, you get a comprehensive guide for React teams tired of architectural drift and ready to turn chaos into velocity.
+
+## What You'll Learn
+
+The book outlines a practical, tool-supported approach to scaling React in real organizations:
+
+- **Architectural layers** that separate concerns and prevent technical debt
+- **Module boundaries** that enforce dependencies and keep codebases maintainable
+- **Nx tooling** to automate standards, generate consistent code, and maintain architecture over time
+- **Real-world patterns** from production systems serving millions of users
+- **CI/CD integration** that validates your architecture on every commit
+
+## Who This Book Is For
+
+This book is for engineers in large organizations navigating complex architectures built by multiple teams, and for teams managing long-lived React products that need to stay maintainable as they scale. It's equally valuable for greenfield projects: starting with the right foundations now means avoiding architectural rework later.
+
+Tech leads, principal engineers, and architects actively shaping React standards across their organization will find practical guidance for building internal frameworks and aligning teams without slowing them down. But individual developers will benefit too, gaining insight into how architectural decisions impact daily work and why certain patterns emerge in large-scale systems.
+
+Whether you're maintaining legacy code, cleaning up technical debt, or building a new product from scratch, this book provides a principled, tool-supported approach to React at scale.
+
+---
+
+👉 [Download the free React Enterprise book (PDF)](https://bit.ly/3J3cern)
+
+---
+
+Learn more:
+
+- 🧠 [Nx Docs](/docs)
+- 👩‍💻 [Nx on CI](/docs/getting-started/nx-cloud)
+- ⬇️ [Other books and resources](/resources-library)
+- 💬 [Nx Official Discord Server](https://go.nx.dev/community)
+- 📹 [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)

docs/blog/images/articles/hero-enterprise-react-brainly.avif

@@ -36,6 +36,7 @@
     "@nx/nx-dev-ui-sponsor-card": "workspace:*",
     "@nx/nx-dev-ui-fence": "workspace:*",
     "@nx/nx-dev-ui-blog": "workspace:*",
+    "@nx/nx-dev-ui-resources": "workspace:*",
     "@nx/nx-dev-ui-ai-landing-page": "workspace:*",
     "@nx/nx-dev-ui-brands": "workspace:*",
     "@nx/nx-dev-ui-cloud": "workspace:*",

docs/blog/images/articles/hero-enterprise-react-brainly.png

@@ -0,0 +1,58 @@
+import { DefaultLayout } from '@nx/nx-dev-ui-common';
+import type { ReactElement } from 'react';
+import { NextSeo } from 'next-seo';
+import { ResourceContainer } from '@nx/nx-dev-ui-resources';
+import { Resource } from '@nx/nx-dev-ui-resources';
+
+export async function getStaticProps() {
+  const fs = require('fs');
+  const path = require('path');
+
+  const resourcesPath = path.join(process.cwd(), 'public/data/resources.json');
+  const resourcesData = fs.readFileSync(resourcesPath, 'utf8');
+  const resources: Resource[] = JSON.parse(resourcesData);
+
+  return {
+    props: {
+      resources,
+    },
+  };
+}
+
+interface ResourcesPageProps {
+  resources: Resource[];
+}
+
+export function ResourcesPage({ resources }: ResourcesPageProps): ReactElement {
+  return (
+    <>
+      <NextSeo
+        title="Resources Library - Nx"
+        description="Download whitepapers, books, case studies, and cheatsheets to learn more about Nx and modern development practices."
+        openGraph={{
+          url: 'https://nx.dev/resources-library',
+          title: 'Resources Library - Nx',
+          description:
+            'Download whitepapers, books, case studies, and cheatsheets to learn more about Nx and modern development practices.',
+          images: [
+            {
+              url: 'https://nx.dev/socials/nx-media.png',
+              width: 800,
+              height: 421,
+              alt: 'Nx: Smart Repos · Fast Builds',
+              type: 'image/jpeg',
+            },
+          ],
+          siteName: 'Nx',
+          type: 'website',
+        }}
+        canonical="https://nx.dev/resources-library"
+      />
+      <DefaultLayout hideBackground={false}>
+        <ResourceContainer resources={resources} />
+      </DefaultLayout>
+    </>
+  );
+}
+
+export default ResourcesPage;

nx-dev/nx-dev/package.json

@@ -0,0 +1,101 @@
+[
+  {
+    "id": "angular-enterprise-patterns",
+    "title": "Enterprise Monorepo Angular Patterns",
+    "description": "The official Angular enterprise book from the Nx team. Learn proven patterns and best practices for building enterprise-grade Angular applications in a monorepo.",
+    "category": "book",
+    "coverImage": "/images/resources/book-angular-enterprise.avif",
+    "downloadUrl": "https://go.nx.dev/angular-patterns-ebook",
+    "publishDate": "2024-01-01"
+  },
+  {
+    "id": "react-enterprise-architecture",
+    "title": "React for Enterprise: Timeless Architecture for Enterprise Apps",
+    "description": "Community resource: Learn timeless architecture patterns for building scalable React applications. By Przemyslaw Nowak (Brainly) in collaboration with the Nx Core Team.",
+    "category": "book",
+    "coverImage": "/images/resources/book-react-enterprise-nowak.avif",
+    "downloadUrl": "https://bit.ly/3J3cern",
+    "publishDate": "2025-10-23"
+  },
+  {
+    "id": "financial-institution-case-study",
+    "title": "Financial Institution Case Study",
+    "description": "$28B Fortune 500 financial institution reduces CI times by 79% with Nx Cloud.",
+    "category": "case-study",
+    "coverImage": "/images/resources/case-study-financial-institution.avif",
+    "downloadUrl": "https://go.nx.dev/financial-case-study",
+    "publishDate": "2024-11-26"
+  },
+  {
+    "id": "banking-case-study",
+    "title": "Banking Case Study",
+    "description": "$7B European bank cuts CI times by 62% and boosts team productivity.",
+    "category": "case-study",
+    "coverImage": "/images/resources/case-study-bank-eu.avif",
+    "downloadUrl": "https://go.nx.dev/banking-case-study",
+    "publishDate": "2024-11-26"
+  },
+  {
+    "id": "fast-ci-whitepaper",
+    "title": "Fast CI Whitepaper",
+    "description": "Learn how to optimize your CI pipeline for speed and efficiency with Nx Cloud.",
+    "category": "whitepaper",
+    "coverImage": "/images/resources/whitepaper-fast-ci.avif",
+    "downloadUrl": "https://bit.ly/4oeIjvK",
+    "publishDate": "2024-01-01"
+  },
+  {
+    "id": "nx-enterprise-pov",
+    "title": "Nx Enterprise Proof Of Value",
+    "description": "Discover how Nx Enterprise transforms development workflows and accelerates delivery at scale with a hands-on proof of value.",
+    "category": "whitepaper",
+    "coverImage": "/images/resources/whitepaper-nx-enterprise-pov.avif",
+    "downloadUrl": "https://bit.ly/43y7xfW",
+    "publishDate": "2024-01-01"
+  },
+  {
+    "id": "mini-angular-cheatsheet-2025",
+    "title": "Mini Angular Cheatsheet",
+    "description": "Quick reference guide for Angular development with essential commands and patterns.",
+    "category": "cheatsheet",
+    "coverImage": "/images/resources/cheatsheet-angular.avif",
+    "downloadUrl": "https://bit.ly/4oEaZ0Y",
+    "publishDate": "2025-01-01"
+  },
+  {
+    "id": "mini-react-cheatsheet-2025",
+    "title": "Mini React Cheatsheet",
+    "description": "Quick reference guide for React development with essential commands and patterns.",
+    "category": "cheatsheet",
+    "coverImage": "/images/resources/cheatsheet-react.avif",
+    "downloadUrl": "https://bit.ly/4qrv6B6",
+    "publishDate": "2025-01-01"
+  },
+  {
+    "id": "nx-cloud-one-pager-2025",
+    "title": "Nx Cloud One-Pager",
+    "description": "A concise overview of Nx Cloud features and benefits for CI/CD optimization.",
+    "category": "cheatsheet",
+    "coverImage": "/images/resources/cheatsheet-nx-cloud.avif",
+    "downloadUrl": "https://bit.ly/47Cq6SG",
+    "publishDate": "2025-01-01"
+  },
+  {
+    "id": "module-federation-quick-start",
+    "title": "Module Federation Quick Start Guide",
+    "description": "Get started with Module Federation for building micro-frontends with Nx.",
+    "category": "cheatsheet",
+    "coverImage": "/images/resources/cheatsheet-module-federation.avif",
+    "downloadUrl": "https://bit.ly/49jkrlM",
+    "publishDate": "2024-01-01"
+  },
+  {
+    "id": "nx-enterprise-overview-2025",
+    "title": "Nx Enterprise Overview",
+    "description": "A concise overview of Nx Enterprise features and benefits.",
+    "category": "whitepaper",
+    "coverImage": "/images/resources/whitepaper-nx-enterprise-overview.avif",
+    "downloadUrl": "https://bit.ly/43y5mJi",
+    "publishDate": "2025-01-01"
+  }
+]