Install the articles package

Run pnpm add @fullstackdatasolutions/articles in your Next.js project root.

Add the Tailwind source directive

Add @source \"./node_modules/@fullstackdatasolutions/articles/src\" to your globals.css so Tailwind CSS v4 picks up the package's class names.

Create your articles config

Export an ArticlesConfig object with siteUrl, siteName, and pageSize from a config file in your project.

Wire up the articles index page

Create app/articles/page.tsx, import ArticlesPage and generateArticlesIndexMetadata from the package, pass your config to both, and export metadata from the page.

Add sitemap integration

Import getArticleSitemapEntries in your sitemap.ts and spread the result alongside your static page entries.

Copy the comments API routes

Copy the provided comments API route files into your app's API directory and configure NextAuth session if you want reader comments enabled.

Drop in your first article

Create public/articles/[slug]/article.md with frontmatter fields including title, excerpt, author, tags, date, and featuredImage. The package picks it up automatically on next build or dev reload.

I Rebuilt the Same Blog System Four Times. So I Packaged It.

Add Snyk vulnerability scanning

Create a Snyk account, copy the Snyk API token into a SNYK_TOKEN GitHub Actions secret, and add a Snyk workflow that runs on pull requests with an appropriate severity threshold.

Run Snyk across monorepo packages

For a monorepo, add separate Snyk steps for each package directory such as backend and frontend so vulnerable dependencies are detected in every package before merge.

Connect SonarQube Cloud

Create a SonarQube Cloud project for the repository, generate a SONAR_TOKEN, store it as a GitHub Actions secret, and add sonar-project.properties at the repo root.

Add the SonarQube GitHub Actions workflow

Add a workflow that checks out full git history, installs dependencies, runs tests with coverage, and executes SonarSource/sonarqube-scan-action so pull requests receive a Quality Gate result.

Enable Kilo Code Review

Create a Kilo account, install the KiloConnect GitHub App, select the repositories to review, and configure the Code Review Agent with model, review style, focus areas, max review time, and optional custom instructions.

Configure Dependabot limits

Add .github/dependabot.yml with one npm ecosystem entry per package directory, set open-pull-requests-limit to 1, and group related dependency updates where useful.

Require PR checks before merge

Configure branch protection rules so Snyk, SonarQube Cloud, and code review checks must pass before changes can merge into main or develop.

Article 3 of 3 in the CI/CD series: add dependency vulnerability scanning with Snyk, static analysis with SonarQube Cloud, AI code review with Kilo, and Dependabot configured so it does not flood your board.

How I Added Snyk, SonarQube Cloud, and Kilo Code Review to Every PR in My Monorepo

Install Husky, lint-staged, and commitlint

Add Husky, lint-staged, @commitlint/cli, and @commitlint/config-conventional at the monorepo root, then wire Husky with a prepare script so hooks are installed automatically after dependency installation.

Configure lint-staged for frontend and backend files

Add lint-staged rules that route backend TypeScript files to the backend ESLint and Prettier configs, and frontend TypeScript, JavaScript, JSX, and MJS files to the frontend configs.

Add a pre-commit hook for typecheck and linting

Create .husky/pre-commit to run frontend typecheck, backend typecheck, and pnpm exec lint-staged. If any command fails, the commit is blocked before it reaches the remote branch.

Enforce conventional commit messages

Create .husky/commit-msg with commitlint and add a .commitlintrc.json that limits commit types, allows flexible subject case, and caps the commit header length for readable history.

Add AI-focused ESLint guardrails

Enable rules such as no-console, @typescript-eslint/no-explicit-any, @typescript-eslint/no-floating-promises, @typescript-eslint/no-unused-vars, and no-return-await so predictable AI-generated TypeScript mistakes fail before commit.

Create GitHub Actions workflows for each app

Add backend and frontend workflow files that run on push and pull_request, use paths filters for the relevant app directories, and call a reusable CI workflow with working-directory, node-version, and pnpm-version inputs.

Add a pull request template

Create .github/pull_request_template.md with fields for change summary, test steps, screenshots or recordings, and a short checklist for human review items that automation cannot fully verify.

Require passing checks before merge

Configure the repository so the app-specific GitHub Actions status checks must pass before merging. The resulting gate blocks code that fails typecheck, lint, tests, or build.

A practical walkthrough of the Husky pre-commit hooks and GitHub Actions CI setup I built for my NestJS + Next.js monorepo: TypeScript typecheck, lint-staged, reusable workflows, and a PR template that actually enforces quality. Part 2 of a 3-part CI/CD series.

How to Add TypeCheck, Lint, Tests, and Build to Every PR with Husky and GitHub Actions

Install Testing Dependencies

Run npm install with Jest, ts-jest, testing libraries, and supertest. These provide the foundation for reliable unit and integration tests.

Configure Jest with 80% Coverage Thresholds

Create jest.config.ts with coverageThreshold set to 80% for branches, functions, lines, and statements. Use collectCoverageFrom to target source files and exclude tests and bootstrap code.

Add Test Scripts to package.json

Create test and test:coverage scripts that run Jest locally and in CI. This ensures coverage checks are enforced automatically.

Write Failing Tests First

Before asking AI for implementation, write a test that describes the behavior you want. Be specific about inputs, outputs, and edge cases.

Ask AI to Make Tests Pass

Show the failing test to the AI and ask it to write code that makes the test pass. The test becomes the specification the AI must satisfy.

Run Coverage Check and Merge

Execute test:coverage before merging. If coverage drops below 80%, the build fails. No override, no exceptions — the gate is automatic.

AI generates plausible code fast. Tests are the only signal that it's actually correct. Here's how to set up Jest, coverage thresholds, and CI gates before you touch a single line of AI-generated code.

Don't Write a Line of AI Code Until Your Tests Are Green

I just finished The Pragmatic Programmer. Published in 1999 — no AI, no cloud. It hits harder now than when it was written. Here's why every principle in that book matters more, not less, in the age of AI.

The Pragmatic Programmer Is More Relevant Now Than When It Was Written

Start a New Chat for Each Task

Create a fresh chat for every distinct task instead of piling requests into one long conversation. This keeps Claude's attention focused and prevents context degradation.

Use Agents for Sub-tasks

Ask Claude to break tasks into sub-agents and handle each separately. This keeps your main context lean and prevents the main thread from being contaminated by rabbit holes.

Compress at Natural Breakpoints

When a task completes or context reaches 50% full, ask Claude to summarize decisions and state, then start a new chat with just that summary. This preserves signal and ditches noise.

Use Plan Mode Before Execution

Request a plan before implementation. Review it, flag issues, then approve. This catches wrong direction early instead of undoing hundreds of lines of code.

Apply Token-Efficient Rules Globally

Copy or fork Claude Token Efficient Rules into your configuration to reduce verbose output and get tighter, more direct responses by default.

Use Serena for IDE-level Workflows

Register Serena as an MCP server in your IDE to manage context handoffs cleanly without pasting large code chunks into Claude's chat.

Leverage VoltAgent Subagent Library

Use pre-built subagents from VoltAgent Awesome Claude Code Subagents instead of building agents from scratch. They are already scoped correctly.

You're not hitting Claude's limits because of the plan — you're hitting them because of your workflow. Here are the 7 techniques I used to dramatically increase my output on the $20 plan.

I'm on Claude's $20 Plan. Here's How I Made It Feel Like I Have No Limits.

You don't need an MBA to go solo. You need the right books in the right order. Here's the 7-phase self-study track that gives technical founders the business fundamentals to actually win.

The Business Education Every Technical Solo Founder Is Missing (And Doesn't Know It)

AI writes code. It doesn't know if that code is good. The engineers who understand first principles — algorithms, architecture, systems thinking — are the ones who will thrive. Here's why skipping the fundamentals is now more dangerous than ever.

AI Will Make You Faster. It Won't Make You Better. That's the Problem.

Design Schema for Client Needs, Not Database Structure

Create types that reflect how clients consume data, not database tables. Think in user journeys instead of 1:1 database mappings.

Use Code-First GraphQL with Nexus and Prisma

Define schema in code using Nexus to auto-generate SDL. This eliminates dual maintenance between schema files and resolvers.

Implement Relay Cursor-Based Pagination

Use the Relay connection spec with edges, nodes, and pageInfo to provide a standard pagination pattern all clients can rely on.

Solve N+1 with DataLoader

Batch database queries by using DataLoader to combine multiple single requests into one efficient query per request cycle.

Set Query Complexity Limits

Implement query complexity scoring and reject queries exceeding your maximum. This prevents clients from writing expensive queries.

Enable Persisted Queries in Production

Cache query documents by hash on the server and only allow query execution via persisted query hashes, reducing payload size and attack surface.

Disable Introspection in Production

Turn off introspection in production environments so external parties cannot map your entire schema and discover vulnerabilities.

Implement Federation with Schema Registry

Use a schema registry tool like WunderGraph Cosmo to validate subgraph composition before deployment and prevent breaking changes.

GraphQL best practices for schema design, federation, performance, and security. A practical guide for developers building production GraphQL APIs in 2024.

GraphQL Best Practices: The Definitive Developer Guide

A candid look at the marketing-engineering divide and how artificial intelligence is finally bridging the gap.

Why Technical Founders Struggle with Marketing (And How AI Can Help)

Discover why tech companies must prioritize employees and customers over shareholders. Learn actionable strategies for sustainable growth and long-term success.

Why Tech Companies Must Prioritize Employees and Customers for Long-Term Success

Create Supergraph Previews in Pull Requests

Add a GitHub action to generate preview URLs for each PR. This lets team members see changes in action before merging to main.

Configure Graph Feature Flags

Set up feature flags in Cosmo Studio to toggle GraphQL fields and types on or off without redeploying. Gradually roll out new features to user groups.

Enable Graph Pruning for Unused Fields

Review field usage analytics in Cosmo and use the Graph Pruning tool to remove unused types and fields. This lightens your API and improves performance.

Explore the latest innovations in GraphQL management with WunderGraph's three new features: Supergraph Previews, Graph Feature Flags, and Graph Pruning. Learn how these tools can streamline your development process and enhance API efficiency.

An Inside Look at Three New WunderGraph Features for 2024

Configure Your Subgraphs for Subscriptions

Ensure each subgraph in your federation supports the necessary subscription fields and can emit events to the event broker.

Set Up the WunderGraph Cosmo Router

Configure the router to handle EDFS by specifying your event broker (NATS) and subscription settings in your configuration.

Define Subscription Fields in Your Schema

Create subscription fields in each subgraph that specify what data events clients can subscribe to across your federation.

Implement Resolvers That Emit Events

Create resolvers in your subgraphs that can handle subscription requests and publish events to the centralized event broker.

Optimize Event Payload Size

Keep event payloads small and relevant to reduce network traffic and improve real-time delivery performance.

Test and Monitor EDFS Performance

Use Cosmo's built-in analytics tools to test your EDFS implementation, monitor query performance, and identify bottlenecks.

Discover how to effectively manage Event-Driven Federated Subscriptions (EDFS) with WunderGraph Cosmo. Learn implementation strategies and best practices for scalable, real-time GraphQL APIs.

Managing Subscriptions and EDFS Effectively with WunderGraph

Learn why highly opinionated coding standards can transform your software development process, enhancing speed and quality. Discover practical steps for implementation and overcoming common challenges.

Your Coding Standards Should Be Highly Opinionated, Not Your Developers

Discover the benefits of wholistic application design for SaaS development. Learn how data-driven planning, REST and GraphQL APIs, and optimized databases can create efficient, scalable applications. Explore practical steps, tools, and best practices for aligning your design closely with user needs and reducing code complexity.

Wholistic Application Design: A Data-Driven Approach to Building Better Applications

In the rapidly evolving landscape of software development, integrating Artificial Intelligence (AI) into GraphQL development processes is proving to be a game-changer.

Transforming GraphQL Schema Design with AI

Discover how AI tools like GPTLint are transforming GraphQL development by automating linting and enforcing coding standards. Learn from experts at the GraphQL Champ Meetup about integrating AI into your workflow for better consistency, efficiency, and customization. Embrace the future of development with AI-powered tools.

Integrating AI into Your Development Workflow: Lessons from the GraphQL Champ Meetup

Explore the essentials of GraphQL governance and learn how to simplify complex GraphQL APIs in our comprehensive guide. Master the best practices for streamlined API management and enhance your GraphQL strategy with our expert insights. Perfect for software engineers, managers, and CTOs.

Mastering GraphQL Complexity: A Guide to Effective Governance

Discover how to get your company to adopt AI or any new technology. This comprehensive guide covers the human element, pain points, and a step-by-step strategy for tech adoption. Ideal for software engineers and tech leads.

How to Get Your Company to Adopt AI

Discover how to get your company to adopt new technology. This comprehensive guide covers the human element, pain points, and a step-by-step strategy for tech adoption. Ideal for software engineers and tech leads.

How to Get Your Company to Adopt New Technology

How to convince your team to adopt GraphQL. Covers stakeholder management, handling resistance, identifying pain points, and running a proof of concept. For software engineers and tech leads.

How to Get Your Company to Adopt GraphQL (Or Any New Technology)

Access the Schema Registry in Cosmo Studio

Log in to Cosmo Studio and navigate to the Schema Registry tab to view your federated graph schema and all subgraph schemas.

View and Download Schemas

Copy or download your federated graph schema as a GraphQL SDL file for sharing with your team or using in tooling.

Review Schema Update History

Browse the schema update tracking to see when changes were made and by whom, maintaining an audit trail of schema evolution.

Run Schema Checks Before Deployment

Execute schema checks on proposed changes to validate composition and prevent breaking changes before merging.

Analyze Check History

Review past schema checks to understand what issues were found and how they were resolved, learning from previous iterations.

Use OpenAI Integration for Error Fixes

When schema checks fail, Cosmo can suggest potential fixes using OpenAI integration, speeding up error resolution.

Explore the revolutionary world of Cosmo OSS, a frontrunner in GraphQL service management. Dive deep into its robust architecture, innovative OpenAI integration, and promising features that are set to redefine GraphQL APIs. Join us as we unravel the future of efficient and intelligent GraphQL service management with Cosmo OSS.

Cosmo OSS: The Revolutionary Tool Transforming GraphQL Service Management

WunderGraph Cosmo Router review: 10x faster than Apollo Router in benchmarks. Deep dive into its architecture, label matchers, federated graph support, and self-hosting options.

The Cosmo Router: Next-Gen GraphQL Federated Router

Configure API Keys and Authentication

Set up API keys in the Cosmo control plane and assign roles and permissions to control who has access to your GraphQL services.

Enable Schema Checks to Prevent Breaking Changes

Configure schema validation in your CI/CD pipeline to catch composition errors and breaking changes before they reach production.

Implement Query Complexity Limits

Set maximum query complexity scores in the router to prevent clients from executing expensive queries that could degrade performance.

Set Up Role-Based Access Control

Use directives and the control plane to define role-based access rules for different subgraphs and fields in your federated graph.

Monitor Queries and Errors with Telemetry

Enable OpenTelemetry integration to track queries, mutations, errors, and latency for real-time security monitoring and auditing.

Self-Host for Data Sovereignty

Deploy Cosmo on your own infrastructure to ensure your data remains in your chosen jurisdiction, meeting GDPR and CCPA requirements.

Explore the revolutionary features of WunderGraph Cosmo in the world of Federated GraphQL. Dive into its robust architecture, unmatched security features, and the benefits of data sovereignty and self-hostability. Discover how Cosmo is reshaping enterprise security, offering a future-proof solution for modern businesses.

WunderGraph Cosmo: Pioneering Federated GraphQL Security and Data Sovereignty

Set Up the Cosmo Control Plane

Deploy or connect to a Cosmo control plane that manages federation configuration and schema composition across all your subgraphs.

Register Your Subgraphs

Publish your Apollo Federation v1 or v2 subgraph schemas to the schema registry using the wgc CLI.

Validate Schema Composition

Run schema checks on your proposed changes to ensure they compose correctly before merging to production.

Deploy the Cosmo Router

Run the open-source Cosmo router in front of your subgraphs. It automatically fetches the latest schema composition every 10 seconds.

Monitor Router Health

Use Cosmo's analytics dashboard to track query performance, error rates, and subgraph health across your federated graph.

WunderGraph Cosmo open federation explained: Apollo Federation v1 and v2 compatible, fully open source, no vendor lock-in. How the control plane, router, and schema registry work together.

Cosmo an Open Source GraphQL Federation Platform

Explore the complex relationship between AI, economics, and social inequality. Will the future be a utopia of automated ease or a dystopia of corporate monopoly? Dive into the ethical, economic, and technological factors that will shape our world.

Will AI Lead to Utopia or Dystopia? The Surprising Role of Economics

Explore the humorous yet eye-opening debate between MongoDB and traditional relational databases like PostgreSQL. This sarcastic take reveals common misconceptions and offers a balanced perspective. Ideal for software engineers and tech managers.

Quick Hack: If You Know Nothing About Databases, Always Choose MongoDB and Say Relational Databases Don't Scale

WunderGraph Cosmo introduction: a complete GraphQL API management platform for federated graphs. How it compares to Apollo GraphOS, and why enterprises are switching.

An Introduction to WunderGraph Cosmo: The Future of Federated Graphs in Enterprise

Explore the humorous world of 'Code Libertarianism' in this satirical take on code governance and software development. Uncover the chaos of coding without rules and the real cost of 'freedom'. Embrace the anarchy or learn why code governance matters — the choice is yours!

Code Governance? We're All Code Libertarians Here! Embrace the Freedom to Fail

Explore the comprehensive guide to Inigo's security and error handling features, for managers of GraphQL services. This informative and engaging article delves into Inigo's innovative solutions, offering insights into query protection, access control, error tracing, and more. Discover how Inigo simplifies complex tasks and enhances security in the world of GraphQL.

Securing and Managing GraphQL Services: A Guide to Inigo's Security and Error Handling Features

Explore the unexpected connection between mass tech layoffs and the rise of GraphQL. This in-depth analysis reveals how tragedy is leading to innovation, with personal insights into the tech industry's resilience and the potential of a global super graph.

Layoffs, Lessons, and GraphQL: How Tech's Loss is Leading to GraphQL's Gain

Explore the power of GraphQL analytics with Inigo, a leading tool providing query-level granularity and real-time insights.

Latest

I Rebuilt the Same Blog System Four Times. So I Packaged It.

How I Added Snyk, SonarQube Cloud, and Kilo Code Review to Every PR in My Monorepo

How to Add TypeCheck, Lint, Tests, and Build to Every PR with Husky and GitHub Actions

Don't Write a Line of AI Code Until Your Tests Are Green

The Pragmatic Programmer Is More Relevant Now Than When It Was Written