Project

General

Profile

Actions

ClientProject #3269

open

[FE] Not found and 404 page

Added by Nazmul Hossain Shovon 7 months ago. Updated 7 months ago.

Status:
Complete
Priority:
High
Target version:
Start date:
09/17/2025
Due date:
09/17/2025 (about 7 months late)
% Done:

100%

Estimated time:
2:00 h
Spent time:

Description

This PR improves the user experience for "not found" and empty product list scenarios across the app:
404 Page Redesign:

  • Replaces the default Next.js error page with a custom 404 page (Page404) featuring updated font sizes and styles.
  • Adds a breadcrumb and clear navigation options ("Go to homepage" and "Contact us").
  • Font adjustments for better readability on different screen sizes.

Unified NotFound Component:

  • Introduces a reusable NotFound component (with icon) for empty product lists.
  • Replaces previous inline "No products found" messages in all product section components (all-stock, home, korean-stock, stock-list, truck-stock) with the new NotFound component.
  • Ensures consistent design and messaging when no products are available.

How to Test

404 Page:

  • Visit any non-existent route (e.g., /random-url).
  • Confirm the custom 404 page appears with correct fonts, breadcrumb, and navigation buttons.

Empty Product Lists:

  • Use filters or search parameters that yield no results in any product section (e.g., All Stock, Home, Korean Stock, Stock List, Truck Stock).
  • Confirm the new NotFound component displays with the icon, message, and "Go to homepage" button.

Responsiveness:

  • Check both the 404 page and NotFound component on different screen sizes to verify font adjustments and layout.

Navigation:

  • Test the "Go to homepage" and "Contact us" buttons to ensure they route correctly.

Note:
No business logic was changed—only UI/UX for not found states. All previous error handling should remain functional.

Actions #1

Updated by Nazmul Hossain Shovon 7 months ago

  • % Done changed from 0 to 50

ref:
https://github.com/pqsjapan/frontendV1.1/commit/31c894cf24769ca05fc0ad08632edff090d04996

Summary of Key Changes:

  • Introduced a reusable NotFound component with custom icon and messaging for empty product states.
  • Replaced inline "No products found" messages in all ProductSection components with the new NotFound component.
  • Removed unnecessary Suspense wrapper for ProductSection in page.tsx since NotFound is now handled internally.
  • Added a new NotFoundIcon SVG component for visual feedback.
Actions #4

Updated by Nazmul Hossain Shovon 7 months ago

  • Description updated (diff)
Actions #5

Updated by Nazmul Hossain Shovon 7 months ago

  • Description updated (diff)
Actions #6

Updated by Nazmul Hossain Shovon 7 months ago

ref:
https://github.com/pqsjapan/frontendV1.1/commit/20971d7708626b336c2f9bdd2c8bac8e32b85f95

Summary of key changes:

  • Refactored product section components to handle empty product lists by returning directly, simplifying conditional rendering.
  • Updated NotFound component to use a new TryAgainLink instead of a homepage link.
  • Added TryAgainLink component, which provides a "Try Again" button that preserves the type search param if present.
  • Minor UI tweaks to Page404 for consistency and font cleanup.
Actions #7

Updated by Md.Sajib Ahmed 7 months ago

  • Status changed from In Progress to Complete

Here is the PR link

Actions

Also available in: Atom PDF