Add blog post: architecture-in-2026-a-practical-guide.mdx#135
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThis PR adds a new blog post titled "Architecture in 2026: A Practical Guide" to the content directory. The article introduces software architecture concepts, provides TypeScript and React code examples demonstrating modern patterns, and concludes with a call to community engagement. ChangesBlog Post: Architecture in 2026
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
content/blog-post-2026-06-13/architecture-in-2026-a-practical-guide.mdx (1)
53-71: ⚡ Quick winConsider adding React import for code example clarity.
The React component example is missing an import statement for React. While modern React (17+) doesn't require importing React for JSX with the automatic JSX transform, including the import improves educational clarity and prevents confusion when readers copy this code into different setups.
📚 Suggested enhancement for standalone example
+import React from 'react'; + // Real-world application example interface Props { data: string[];🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@content/blog-post-2026-06-13/architecture-in-2026-a-practical-guide.mdx` around lines 53 - 71, The example Component is missing an explicit React import which can confuse readers copying the snippet into non-automatic JSX transform setups; add an import statement for React at the top of the snippet (so the file imports React before the interface Props and function Component declarations) to make the example standalone and clear.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@content/blog-post-2026-06-13/architecture-in-2026-a-practical-guide.mdx`:
- Around line 24-34: The function name useModernPattern violates React Hook
naming conventions; rename the function to something non-hook-prefixed (e.g.,
modernPattern or createModernPattern) and update all references to it (including
its returned object's apply method usage) so readers won't be misled into
thinking it is a React Hook; if you intended it to be a hook, instead implement
proper hook behavior (call React hooks inside and follow rules) and keep the
useModernPattern name.
- Line 7: The frontmatter image path points to a missing asset; either add
content/blog-post-2026-06-13/images/post-image.png (and the images/ directory)
or remove/update the image frontmatter entry so it doesn't reference a
nonexistent file; additionally rename the hook-like function useModernPattern()
to a non-hook name (e.g., modernPatternExample) to avoid implying React Hook
rules, and replace key={item} in the React list render with a stable unique key
(e.g., item.id or an index-based fallback) if data can contain duplicates to
prevent key collisions.
---
Nitpick comments:
In `@content/blog-post-2026-06-13/architecture-in-2026-a-practical-guide.mdx`:
- Around line 53-71: The example Component is missing an explicit React import
which can confuse readers copying the snippet into non-automatic JSX transform
setups; add an import statement for React at the top of the snippet (so the file
imports React before the interface Props and function Component declarations) to
make the example standalone and clear.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: da3cc070-cf69-4362-a778-6021de1bd6b6
📒 Files selected for processing (1)
content/blog-post-2026-06-13/architecture-in-2026-a-practical-guide.mdx
| date: '2026-06-13' | ||
| tags: ['Architecture', 'Frontend', '2026'] | ||
| published: true | ||
| image: './images/post-image.png' |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Check if the referenced image file exists in the repository.
# Test: Look for the image file at the expected path
fd -t f "post-image.png" content/blog-post-2026-06-13/
# Also check if an images directory exists
fd -t d "images" content/blog-post-2026-06-13/Repository: deepu0/frontend-junction
Length of output: 50
🏁 Script executed:
#!/bin/bash
set -euo pipefail
repo_root="$(pwd)"
img_path="content/blog-post-2026-06-13/images/post-image.png"
img_dir="content/blog-post-2026-06-13/images"
echo "Checking expected file: $img_path"
if [ -f "$img_path" ]; then
echo "FOUND: $img_path"
else
echo "MISSING: $img_path"
fi
echo "Checking images directory: $img_dir"
if [ -d "$img_dir" ]; then
echo "FOUND DIR: $img_dir"
echo "Directory contents (png only):"
fd -t f -e png . "$img_dir" || true
else
echo "MISSING DIR: $img_dir"
fi
echo "Searching for any post-image.png anywhere in repo (depth via fd):"
fd -t f -g '*post-image.png' 'post-image.png' . || trueRepository: deepu0/frontend-junction
Length of output: 460
🏁 Script executed:
#!/bin/bash
set -euo pipefail
file="content/blog-post-2026-06-13/architecture-in-2026-a-practical-guide.mdx"
echo "== File: $file =="
echo "== First 120 lines =="
nl -ba "$file" | head -n 140
echo
echo "== Extract code fences (```blocks) with line numbers =="
# Print line ranges for code blocks without dumping entire large blocks
awk '
BEGIN{inblock=0; start=0}
/^```/{
if(inblock==0){inblock=1; start=NR}
else{inblock=0; end=NR; print "code_block_lines:" start "-" end}
}
' "$file"Repository: deepu0/frontend-junction
Length of output: 235
🏁 Script executed:
#!/bin/bash
set -euo pipefail
file="content/blog-post-2026-06-13/architecture-in-2026-a-practical-guide.mdx"
echo "== First 120 lines (with numbers) =="
cat -n "$file" | head -n 120
echo
echo "== Code fences line ranges (``` blocks) =="
awk '
/^```/{
if(!inblock){inblock=1; start=NR}
else{inblock=0; end=NR; print start "-" end}
}
' "$file"Repository: deepu0/frontend-junction
Length of output: 3357
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== List key config files =="
ls -la package.json tsconfig*.json 2>/dev/null || true
ls -la vite.config.* next.config.* 2>/dev/null || true
ls -la .babelrc* babel.config.* 2>/dev/null || true
echo
echo "== React/JSX related grep =="
rg -n --hidden --no-ignore-vcs '"react"|"jsx-runtime"|"react-jsx"|"jsxImportSource"|"`@types/react`"|react-scripts|next/babel|vite' package.json tsconfig*.json 2>/dev/null || true
rg -n --hidden --no-ignore-vcs '"jsx"' tsconfig*.json 2>/dev/null || true
rg -n --hidden --no-ignore-vcs 'jsxImportSource|react-jsx|react-jsxdev|react-native-jsx' tsconfig*.json 2>/dev/null || true
echo
echo "== JSX runtime in Vite config (if any) =="
rg -n --hidden --no-ignore-vcs 'jsx' vite.config.* 2>/dev/null || true
echo
echo "== React version =="
node -e "const p=require('./package.json'); console.log('react:',p.dependencies?.react||p.devDependencies?.react);"Repository: deepu0/frontend-junction
Length of output: 499
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== tsconfig.json =="
cat -n tsconfig.json
echo
echo "== next.config.mjs =="
cat -n next.config.mjsRepository: deepu0/frontend-junction
Length of output: 3493
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Searching repo-wide for filename post-image.png"
fd -t f 'post-image.png' . || true
echo "Searching repo-wide for any *post-image.png (case-sensitive)"
fd -t f -g '*post-image.png' . || trueRepository: deepu0/frontend-junction
Length of output: 177
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Locate Velite schema / frontmatter config =="
ls -la .velite 2>/dev/null || true
echo
echo "== Search for frontmatter schema definitions (image/title/date) =="
rg -n --hidden --no-ignore-vcs "frontmatter|velite|schema|title:|published:|image" .velite content . || true
echo
echo "== Search for schema validation / existence checks for image =="
rg -n --hidden --no-ignore-vcs "image.*(exists|file|fs|stat|path)" .velite . || trueRepository: deepu0/frontend-junction
Length of output: 50495
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== velite.config.ts =="
cat -n velite.config.ts
echo
echo "== Check if content/blog/images exists (and sample image files) =="
ls -la content/blog/images 2>/dev/null || true
fd -t f 'blog_modern_css_2026.png' content/blog . || true
fd -t f 'blog_nextjs_15_actions.png' content/blog . || true
echo
echo "== Check if content/blog-post-2026-06-13/images exists =="
ls -la content/blog-post-2026-06-13 2>/dev/null || true
ls -la content/blog-post-2026-06-13/images 2>/dev/null || trueRepository: deepu0/frontend-junction
Length of output: 3973
🏁 Script executed:
#!/bin/bash
set -euo pipefail
target_dir="content/blog-post-2026-06-13"
target_file="content/blog-post-2026-06-13/architecture-in-2026-a-practical-guide.mdx"
echo "== Search for references to the file path =="
rg -n --hidden --no-ignore-vcs "$target_dir|$(basename "$target_file")" . || true
echo
echo "== Search for how post collections are loaded (Velite or content pipeline) =="
rg -n --hidden --no-ignore-vcs "velite\.|\.velite|defineCollection|collections\.|pattern:\s*'blog/|blog/\*\*/\*\.mdx|getPosts|getPost" . || true
echo
echo "== List velite collection config only (for patterns) =="
sed -n '1,120p' velite.config.tsRepository: deepu0/frontend-junction
Length of output: 3241
🌐 Web query:
What does velite s.image() do in its schema—does it validate that the referenced image file exists during build (Next.js/MDX content collections)?
💡 Result:
Yes, velite's s.image validates that the referenced image file exists at build time [1][2]. When you use s.image in your schema, it processes the image path (relative or absolute), verifies the file's existence, and performs the following actions during the build process [1]: 1. Validation: If the referenced file does not exist, it issues a File not exists error, which causes the build to fail (or log a warning depending on your configuration) [1][3][2]. 2. Processing & Transformation: It automatically copies the referenced image to your output assets directory (typically defined in your configuration) and generates metadata for it [1]. 3. Data Output: It returns an Image object that includes the public URL (src), dimensions (width, height), and blur data (blurDataURL, etc.), which makes it ideal for use with components like Next.js's Image component [1][2]. For relative paths, it resolves the file location based on the context of the content file being processed [1]. For absolute paths, you can use the absoluteRoot option in your velite configuration to specify the base directory for resolution [1][4].
Citations:
- 1: https://velite.js.org/guide/velite-schemas
- 2: https://dev.to/0012303/velite-has-a-free-content-layer-for-static-sites-heres-how-to-use-it-2e53
- 3: https://velite.js.org/reference/api
- 4: Path option for
s.image()zce/velite#110
Fix missing image asset referenced in MDX frontmatter
image: './images/post-image.png'./images/post-image.png resolves to content/blog-post-2026-06-13/images/post-image.png, but that file (and the images/ directory) isn’t present in the repo; with Velite’s image: s.image().optional() this will break content processing/build. Add the asset or remove/update the image field.
function useModernPattern()is hook-named but doesn’t follow/illustrate Hook rules; rename to avoid confusion.- React snippet uses
key={item}; ifdatacan contain duplicates, use a stable unique key instead.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@content/blog-post-2026-06-13/architecture-in-2026-a-practical-guide.mdx` at
line 7, The frontmatter image path points to a missing asset; either add
content/blog-post-2026-06-13/images/post-image.png (and the images/ directory)
or remove/update the image frontmatter entry so it doesn't reference a
nonexistent file; additionally rename the hook-like function useModernPattern()
to a non-hook name (e.g., modernPatternExample) to avoid implying React Hook
rules, and replace key={item} in the React list render with a stable unique key
(e.g., item.id or an index-based fallback) if data can contain duplicates to
prevent key collisions.
| ```typescript | ||
| // Example of modern architecture pattern | ||
| function useModernPattern() { | ||
| // Implementation example | ||
| return { | ||
| apply: () => { | ||
| console.log("Applying modern architecture pattern"); | ||
| } | ||
| }; | ||
| } | ||
| ``` |
There was a problem hiding this comment.
Function naming violates React Hook conventions.
The function useModernPattern uses the use prefix, which is a React convention reserved for custom Hooks. However, this function doesn't call any React hooks (like useState, useEffect, etc.) and doesn't follow Hook rules. This naming is misleading for readers learning React patterns.
🔧 Suggested fix to use conventional naming
-function useModernPattern() {
- // Implementation example
+function createModernPattern() {
+ // Implementation example
return {
apply: () => {
console.log("Applying modern architecture pattern");
}
};
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ```typescript | |
| // Example of modern architecture pattern | |
| function useModernPattern() { | |
| // Implementation example | |
| return { | |
| apply: () => { | |
| console.log("Applying modern architecture pattern"); | |
| } | |
| }; | |
| } | |
| ``` |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@content/blog-post-2026-06-13/architecture-in-2026-a-practical-guide.mdx`
around lines 24 - 34, The function name useModernPattern violates React Hook
naming conventions; rename the function to something non-hook-prefixed (e.g.,
modernPattern or createModernPattern) and update all references to it (including
its returned object's apply method usage) so readers won't be misled into
thinking it is a React Hook; if you intended it to be a hook, instead implement
proper hook behavior (call React hooks inside and follow rules) and keep the
useModernPattern name.
avinashkamat48
left a comment
avinashkamat48
left a comment
There was a problem hiding this comment.
The post frontmatter references image: ./images/post-image.png, but the PR only adds the MDX file and does not include content/blog-post-2026-06-13/images/post-image.png. If local images are resolved relative to each post, this will render a broken image or fail static image processing. Could you add the referenced asset or point the frontmatter at an existing image?
2 participants
Blog post about Architecture for Frontend Junction
Summary by CodeRabbit