[FEAT]: Create 404 Page for Missing Product

[derianrddev]

📘 Description

Handle missing product case in ProductDetails by creating a dedicated 404 page. This page should inform the user that the product is not found and provide navigation options to return to the marketplace or homepage. The design should resemble the provided image.

✅ Acceptance Criteria

• Create a not-found.tsx page with the following elements:
  • An icon indicating the product is not found.
  • A bold header saying "Product Not Found."
  • Subtext: "Sorry, we couldn't find the product you're looking for. It might have been removed or doesn't exist."
  • Two buttons:
    • "Browse Marketplace": Redirects to the marketplace.
    • "Go Home": Redirects to the homepage.
• Update the ProductDetails component to redirect to this 404 page when the product is not found.

🌎 References

• Screenshot provided as reference for design.

• Next.js Documentation: Not Found Pages
• Icon

📜 Additional Notes

• Ensure navigation links for buttons are functional.

⚠ Please review the following guidelines before applying:

• Contribution Guidelines 💻
• Issues Guidelines ⚠️
• Git Guidelines 🐈‍⬛

[unnamed-lab]

May I take care of this?

[Gladchux14]

My name is Gladchux14.
I have worked and developed pixel-perfect websites , you can check out my Github https://github.com/Gladchux14

-I would tackle this issue by:

• Clone the forked repository and add main as upstream, checkout to a new branch and study it.
• create and develop a Not-found product page that is consistent with system design according the figma file.
• implement the routing to ensure user does not get lost when a product cannot be found but it is routed back to the Market place.
• raise an explicit PR and notify the maintainer.

I am a good fit for this issue because my background knowledge in Front-end web development, knowledge of Next-js ,Typescript and passion for creating seamless user-centered designs makes me suited for it. I aim to deliver high-quality result through my structured problem-solving approach.

ETA is 4-6hrs.

[Iwueseiter]

I’d like to resolve this.
I'm a frontend and smart contract developer with solid background in css, react, tailwind, nextjs, typescript, js, cairo and rust.
Here is how I will tackle this task:
I will create a file named not-found.tsx. I will modify ProductDetails component to handle the case where the product is not found by using useRouter from Next.js to redirect to the not-found page. I will make sure the desing matches the one that have been provided for reference.

ETA: 2 days

[greg-9000]

I'd be happy to do this.

[suhas-sensei]

Mind if I try this one? I have experience in frontend development and would like to implement the 404 page.

[respp]

[FEAT]: Create 404 Page for Missing Product #102

Hello @derianrddev! I am Renzo Barcos a Dojo Coding member⛩️ and am excited about the opportunity to make my first contributions to SafeSwap.

I’d be happy to take this issue. As a full-stack developer with strong technical programming skills, I specialize in creating clean, efficient, and scalable solutions.

For more: my website: www.renzobarcos.site

Steps to Resolve:

Steps to Resolve:

1) Understand the Requirements

• Review the reference design and Next.js 404 documentation.

2) Create the 404 Page

• Create a `not-found.tsx` file with an icon, "Product Not Found" header, subtext, and buttons ("Browse Marketplace" and "Go Home").
• Style the page to match the design.

3) Update ProductDetails

• Redirect to the 404 page if the product is missing.

4) Test

• Ensure the 404 page displays correctly and buttons navigate as expected.

5) Submit

• Test responsiveness, commit changes, and open a pull request.

--
Estimated Time: 1-2 days

Thank you for the opportunity to contribute!

[wugalde19]

I'd be happy to do this.Hi team SafeSwap,
I’m William from Costa Rica 🇨🇷 and I'm a member of the Dojo Coding community.
I am interested in contributing to this issue. I’ve worked over 8 years of experience as a Full-Stack engineer in several technologies (including the ones used on this project Typescript/JS)
I am currently looking for a project where I can contribute, create a great impact to the future users, and the ecosystem.

Profiles:
https://app.onlydust.com/u/wugalde19
https://github.com/wugalde19

After reading the exposed issue #102, the way I’d approach this is
Follow all the steps described under Acceptance Criteria in the issue description which are:

Create a not-found.tsx page with the following elements:
An icon indicating the product is not found.
A bold header saying "Product Not Found."
Subtext: "Sorry, we couldn't find the product you're looking for. It might have been removed or doesn't exist."
Two buttons:
"Browse Marketplace": Redirects to the marketplace.
"Go Home": Redirects to the homepage.
Update the ProductDetails component to redirect to this 404 page when the product is not found.
During the process I’ll be sharing ideas with the maintainers to see which approach or versions of the page you guys like the most.

During the entire process, I’ll be constantly informing and sharing updates about the progress made or any blocker or questions I might have.

I’m interested in learning more about your team and looking forward to contributing to this project.

[Supa-mega]

Could I take on this issue?

[Thosine-01]

Is it okay if I take this?

[Thosine-01]

Hi my name is Tomi. I am a frontend developer with experience in JavaScript, React, Node.js Tailwind CSS and  Chakra UI. I am passionate about building amazing things with code. I'd love to contribute to this issue.

[SebasHidalgo]

Hello, my name is Sebastián Hidalgo, I am a full stack developer and I would like to take this issue since I have experience using React and it is an easy and quick task to solve.