Skip to content

feat: enhance 404 page with search, go back, and bug reporting#4335

Open
anushkaa2704 wants to merge 7 commits into
anurag3407:mainfrom
anushkaa2704:feat/404-page-enhancement
Open

feat: enhance 404 page with search, go back, and bug reporting#4335
anushkaa2704 wants to merge 7 commits into
anurag3407:mainfrom
anushkaa2704:feat/404-page-enhancement

Conversation

@anushkaa2704

@anushkaa2704 anushkaa2704 commented Jun 25, 2026

Copy link
Copy Markdown

User description

Summary

This PR enhances the 404 page by:

  • Added SearchInput pre-filled with the attempted path
  • Added Go Back button using navigate(-1)
  • Added Report Broken Link button
  • Displayed the attempted URL
  • Preserved the existing terminal animation and dashboard button

Acceptance Criteria

  • 404 page has 3 CTAs
  • Search uses useSearchParams
  • Bug report prefills the URL

Summary by CodeRabbit

  • New Features
    • Added the new Ceramic Minimal portfolio template to the template gallery.
    • Upgraded the 404 page with route-aware search, a back button, and a “Report Broken Link” action.
  • Bug Fixes
    • Improved broken-link reporting by pre-filling the report with the attempted URL and enhancing form validation, loading feedback, and success/error messaging.

CodeAnt-AI Description

Improve the 404 page and add a new portfolio template

What Changed

  • The 404 page now shows the URL that was visited, lets users search from that page, go back, or report the broken link.
  • Reporting a broken link now opens with the missing URL already filled in.
  • Added a new “Ceramic Minimal” portfolio template and made it available in the app.

Impact

✅ Easier recovery from broken links
✅ Faster bug reports from missing pages
✅ More portfolio template options

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

@codeant-ai

codeant-ai Bot commented Jun 25, 2026

Copy link
Copy Markdown

Skipping CodeAnt AI review — this PR changes more than 100 files, which usually means a migration, codemod, or vendored drop. Line-level review on diffs this large produces duplicate findings on the same rewrite pattern and drowns out anything that actually matters.

If you still want a review, comment @codeant-ai : review. For better signal, consider splitting the PR into smaller chunks.

@vercel

vercel Bot commented Jun 25, 2026

Copy link
Copy Markdown

@anushkaa2704 is attempting to deploy a commit to the Anurag Mishra's projects Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Jun 25, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

This PR adds the /templates/ceramic-minimal portfolio route, expands its layout into multiple data-driven sections, and adds searchable 404 handling with navigation and broken-link reporting.

Changes

Ceramic Minimal template

Layer / File(s) Summary
Hero and profile sections
frontend/src/components/portfolio/templates/Ceramic_Minimal/index.jsx
The template renders animated hero content plus About, Stats, and Skills sections from portfolio data.
Portfolio and contact sections
frontend/src/components/portfolio/templates/Ceramic_Minimal/index.jsx
The template adds Projects, Experience, Testimonials, and Contact sections with linked project actions and email contact.
Template route registration
frontend/src/App.jsx
CeramicMinimal is imported and added at /templates/ceramic-minimal in the router.

404 search and reporting

Layer / File(s) Summary
Bug modal defaults and submit flow
frontend/src/components/ReportBugModal.jsx
The modal accepts brokenUrl, pre-fills fields on open, validates title and description, submits via bugsApi.submitBug, and resets loading state around the request.
404 search and report controls
frontend/src/pages/NotFound.jsx
The not-found page tracks the attempted route and query string, animates terminal text, renders search and navigation controls, and opens ReportBugModal with the broken URL.

Estimated code review effort: 4 (Complex) | ~45 minutes

Possibly related PRs

Suggested labels: level:intermediate, type:feature, ui-revamp

Sequence Diagram(s)

sequenceDiagram
  participant Visitor
  participant NotFound
  participant SearchInput
  participant ReportBugModal
  participant bugsApi
  Visitor->>NotFound: visit missing route
  NotFound->>NotFound: derive attemptedPath and search
  Visitor->>SearchInput: edit query
  SearchInput->>NotFound: update search
  NotFound->>NotFound: sync query parameter
  Visitor->>NotFound: open broken-link report
  NotFound->>ReportBugModal: open with brokenUrl
  Visitor->>ReportBugModal: submit report
  ReportBugModal->>bugsApi: submitBug(title, description)
  bugsApi-->>ReportBugModal: return success or error
Loading
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main change: enhancing the 404 page with search, back navigation, and bug reporting.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Nitpick comments (1)
frontend/src/pages/NotFound.jsx (1)

111-115: 🎯 Functional Correctness | 🔵 Trivial | 💤 Low value

Search input updates the URL but never executes a search.

onChange={setSearch} only writes the value into ?query=; there's no submit handler or navigation to a search/results destination. Combined with the default value being attemptedPath (Line 24), the box is pre-filled with the broken path rather than a query and pressing Enter does nothing actionable. Confirm whether wiring the query to an actual search route (or removing the box) is intended before merge.

🤖 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 `@frontend/src/pages/NotFound.jsx` around lines 111 - 115, The SearchInput in
NotFound is only updating the query state via setSearch, so it writes to ?query=
without ever triggering a search or navigation. Update the NotFound flow to
either wire the input to a real search/results destination from SearchInput or
remove the control if it is not intended, and also avoid seeding the field with
attemptedPath so it does not prefill a broken path; use the NotFound and
SearchInput behavior as the main places to adjust.
🤖 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 `@frontend/src/components/portfolio/templates/Ceramic_Minimal/index.jsx`:
- Around line 139-156: The CTA links in Ceramic_Minimal currently render
unconditionally even when project.liveUrl or project.githubUrl is missing, so
update the project action section to guard those anchors or render them only
when the corresponding URL exists. Use the Ceramic_Minimal component’s project
CTA block and the liveUrl/githubUrl fields to conditionally show “Live” and
“Code” so empty destinations are never emitted.
- Around line 1-7: The CeramicMinimal component is calling usePortfolio()
without importing the hook, and it also shadows the dummy_data.json import with
a local data binding. Update CeramicMinimal to use one data source consistently:
either import usePortfolio and remove the JSON import, or keep the JSON data and
remove the hook usage, ensuring the component references a single unambiguous
data variable.

In `@frontend/src/pages/NotFound.jsx`:
- Around line 29-33: The NotFound page effect is updating the URL search params
with the default history push behavior, which creates a new browser history
entry on every search change. Update the setSearchParams call inside the
useEffect in NotFound.jsx to use replace semantics so it updates the current
entry instead of pushing, keeping back-navigation clean and preventing history
bloat.

---

Nitpick comments:
In `@frontend/src/pages/NotFound.jsx`:
- Around line 111-115: The SearchInput in NotFound is only updating the query
state via setSearch, so it writes to ?query= without ever triggering a search or
navigation. Update the NotFound flow to either wire the input to a real
search/results destination from SearchInput or remove the control if it is not
intended, and also avoid seeding the field with attemptedPath so it does not
prefill a broken path; use the NotFound and SearchInput behavior as the main
places to adjust.
🪄 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: 2b6c3785-67f5-4ad4-bca4-bdfd07dc2d5c

📥 Commits

Reviewing files that changed from the base of the PR and between 45fbc55 and d9bae41.

📒 Files selected for processing (4)
  • frontend/src/App.jsx
  • frontend/src/components/ReportBugModal.jsx
  • frontend/src/components/portfolio/templates/Ceramic_Minimal/index.jsx
  • frontend/src/pages/NotFound.jsx

Comment thread frontend/src/pages/NotFound.jsx
@anurag3407

Copy link
Copy Markdown
Owner

add screenshots

@anushkaa2704

anushkaa2704 commented Jul 5, 2026

Copy link
Copy Markdown
Author

@anurag3407 I've added screenshots for the enhanced 404 page and the Report Broken Link modal, kindly check.

image image

@codeant-ai

codeant-ai Bot commented Jul 10, 2026

Copy link
Copy Markdown

CodeAnt AI is running Incremental review

@codeant-ai

codeant-ai Bot commented Jul 10, 2026

Copy link
Copy Markdown

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

@codeant-ai codeant-ai Bot added the size:L This PR changes 100-499 lines, ignoring generated files label Jul 10, 2026
Comment thread frontend/src/pages/NotFound.jsx
Comment thread frontend/src/pages/NotFound.jsx
Comment thread frontend/src/pages/NotFound.jsx
@codeant-ai

codeant-ai Bot commented Jul 10, 2026

Copy link
Copy Markdown

CodeAnt AI Incremental review completed.

@anushkaa2704

Copy link
Copy Markdown
Author

@anurag3407 please check the pr and let me know if any issue exists

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:L This PR changes 100-499 lines, ignoring generated files

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants