Fix: add missing slugs to project entries to prevent /projects/undefi…#673
Conversation
📝 WalkthroughWalkthroughThe PR fixes a navigation bug where clicking certain project cards redirected to Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~15 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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 Tip CodeRabbit can approve the review once all CodeRabbit's comments are resolved.Enable the |
There was a problem hiding this comment.
🧹 Nitpick comments (7)
src/helper/projects.js (6)
283-285: Fix inconsistent indentation/formatting in the object structure.The
slugandnameproperties have inconsistent indentation compared to other project entries. They should be indented to match the rest of the object properties (likedescription,link, etc.).🧹 Proposed formatting fix
{ - - slug: 'agora-blockchain', - name: 'Agora Blockchain', + slug: 'agora-blockchain', + name: 'Agora Blockchain', description:🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/helper/projects.js` around lines 283 - 285, Fix the inconsistent indentation for the Agora Blockchain project object: align the `slug: 'agora-blockchain'` and `name: 'Agora Blockchain'` property lines to match the same indentation level used by the other properties (e.g., `description`, `link`) in the same object entry so the object's property alignment is consistent.
328-329: Inconsistent indentation for slug and name properties.Same formatting issue - properties lack proper indentation.
🧹 Proposed formatting fix
{ - slug: 'monumento', - name: 'Monumento', + slug: 'monumento', + name: 'Monumento', description:🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/helper/projects.js` around lines 328 - 329, Fix the inconsistent indentation of the object properties by aligning the properties inside the project object literal (e.g., the properties "slug" and "name" in the Monumento entry) to match the surrounding object indentation style; update the indentation so each property is indented the same amount as the other properties in that object to keep formatting consistent.
337-340: Inconsistent indentation and malformed object opening brace.The object opening brace is on a separate line from the array comma, and the
slug/nameproperties lack proper indentation.🧹 Proposed formatting fix
- - { - slug: 'social-street-smart', - name: 'Social Street Smart', + { + slug: 'social-street-smart', + name: 'Social Street Smart', description:🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/helper/projects.js` around lines 337 - 340, Fix the malformed object opening and inconsistent indentation in the projects array: move the opening brace to the same line as the preceding comma (so the object starts with "{ slug: ..."), indent the properties (slug and name) to match the surrounding objects, and ensure the closing brace and trailing comma follow the project's existing formatting pattern; locate the object starting with the stray "{" and adjust formatting in the projects array (e.g., the entry for 'social-street-smart').
316-319: Inconsistent indentation and malformed object opening brace.The object opening brace is on a separate line from the array comma, and the
slug/nameproperties lack proper indentation.🧹 Proposed formatting fix
- - { - slug: 'resonate', - name: 'Resonate', + { + slug: 'resonate', + name: 'Resonate', description:🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/helper/projects.js` around lines 316 - 319, The object literal for the project entry with slug 'resonate' / name 'Resonate' is misformatted: move the opening brace up to the same line as the preceding comma and fix indentation so the slug and name properties are indented to match other entries in the projects array (the object containing slug: 'resonate' and name: 'Resonate' should follow the same brace placement and property indentation style as the other project objects in src/helper/projects.js).
297-298: Inconsistent indentation for slug and name properties.Same formatting issue as above - properties lack proper indentation.
🧹 Proposed formatting fix
{ - slug: 'eduaid', - name: 'EduAid', + slug: 'eduaid', + name: 'EduAid', description:🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/helper/projects.js` around lines 297 - 298, The object literal containing the properties slug and name (e.g., slug: 'eduaid', name: 'EduAid') has inconsistent indentation; fix by aligning these property lines with the surrounding object formatting (match indentation used for other objects in the file), ensuring the slug and name keys are indented the same as adjacent properties and follow project object style used elsewhere (adjust in the object where slug and name are defined).
307-308: Inconsistent indentation for slug and name properties.Same formatting issue - properties lack proper indentation.
🧹 Proposed formatting fix
{ - slug: 'openchat', - name: 'OpenChat', + slug: 'openchat', + name: 'OpenChat', description:🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/helper/projects.js` around lines 307 - 308, The object for the OpenChat project has inconsistent indentation for the slug and name properties; update the formatting of the object containing slug: 'openchat' and name: 'OpenChat' so those properties align with the surrounding object property indentation (match the indentation style used by other project entries in the file, e.g., the same number of spaces before "slug" and "name" in the projects array/object).src/app/projects/[slug]/page.jsx (1)
36-39: Consider adding optional chaining for consistency withgenerateMetadata.The
ProductPagefunction accessesparams.slugdirectly without optional chaining, whereasgenerateMetadata(Line 23) usesparams?.slug. For consistency and defensive coding, consider applying the same pattern here.🧹 Proposed consistency fix
export default function ProductPage({ params }) { // Unwrapping params for Next.js 15+ if needed, but in 14 it's usually direct. // We'll treat it as synchronous access since it's an object in generateStaticParams context usually - const product = projects.find((p) => p.slug === params.slug); + const product = projects.find((p) => p?.slug === params?.slug);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/projects/`[slug]/page.jsx around lines 36 - 39, ProductPage accesses params.slug directly which is inconsistent with generateMetadata's defensive params?.slug; update ProductPage to use optional chaining when reading params (e.g., use params?.slug) before passing into projects.find to avoid runtime errors when params is undefined, and ensure any downstream logic (ProductPage and the projects.find callback) handles a possibly undefined slug gracefully.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/app/projects/`[slug]/page.jsx:
- Around line 36-39: ProductPage accesses params.slug directly which is
inconsistent with generateMetadata's defensive params?.slug; update ProductPage
to use optional chaining when reading params (e.g., use params?.slug) before
passing into projects.find to avoid runtime errors when params is undefined, and
ensure any downstream logic (ProductPage and the projects.find callback) handles
a possibly undefined slug gracefully.
In `@src/helper/projects.js`:
- Around line 283-285: Fix the inconsistent indentation for the Agora Blockchain
project object: align the `slug: 'agora-blockchain'` and `name: 'Agora
Blockchain'` property lines to match the same indentation level used by the
other properties (e.g., `description`, `link`) in the same object entry so the
object's property alignment is consistent.
- Around line 328-329: Fix the inconsistent indentation of the object properties
by aligning the properties inside the project object literal (e.g., the
properties "slug" and "name" in the Monumento entry) to match the surrounding
object indentation style; update the indentation so each property is indented
the same amount as the other properties in that object to keep formatting
consistent.
- Around line 337-340: Fix the malformed object opening and inconsistent
indentation in the projects array: move the opening brace to the same line as
the preceding comma (so the object starts with "{ slug: ..."), indent the
properties (slug and name) to match the surrounding objects, and ensure the
closing brace and trailing comma follow the project's existing formatting
pattern; locate the object starting with the stray "{" and adjust formatting in
the projects array (e.g., the entry for 'social-street-smart').
- Around line 316-319: The object literal for the project entry with slug
'resonate' / name 'Resonate' is misformatted: move the opening brace up to the
same line as the preceding comma and fix indentation so the slug and name
properties are indented to match other entries in the projects array (the object
containing slug: 'resonate' and name: 'Resonate' should follow the same brace
placement and property indentation style as the other project objects in
src/helper/projects.js).
- Around line 297-298: The object literal containing the properties slug and
name (e.g., slug: 'eduaid', name: 'EduAid') has inconsistent indentation; fix by
aligning these property lines with the surrounding object formatting (match
indentation used for other objects in the file), ensuring the slug and name keys
are indented the same as adjacent properties and follow project object style
used elsewhere (adjust in the object where slug and name are defined).
- Around line 307-308: The object for the OpenChat project has inconsistent
indentation for the slug and name properties; update the formatting of the
object containing slug: 'openchat' and name: 'OpenChat' so those properties
align with the surrounding object property indentation (match the indentation
style used by other project entries in the file, e.g., the same number of spaces
before "slug" and "name" in the projects array/object).
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 483f4d91-bbd0-45fc-bb09-90468748c140
📒 Files selected for processing (2)
src/app/projects/[slug]/page.jsxsrc/helper/projects.js
Addressed Issues:
Fixes #672
Screenshots/Recordings:
Before:

After:

Additional Notes:
The issue occurred because several project objects in src/helper/projects.js did not include a slug property. Since the project pages use dynamic routing (/projects/[slug]), missing slugs caused navigation to /projects/undefined.
This PR fixes the issue by:
Adding missing slug fields to the affected project entries.
Ensuring all projects used in routing have valid slugs.
This prevents invalid routes from being generated and ensures all project cards navigate to the correct page.
AI Usage Disclosure:
Check one of the checkboxes below:
Checklist
Summary by CodeRabbit