Actions
ClientProject #3269
open[FE] Not found and 404 page
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.
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.
Updated by Nazmul Hossain Shovon 7 months ago
- % Done changed from 50 to 100
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.
Updated by Md.Sajib Ahmed 7 months ago
- Status changed from In Progress to Complete
Here is the PR link
Actions