Improve 404 Page for Unkey Dashboard #2276

Vardhaman619 · 2024-10-08T11:50:06Z

Preliminary Checks

I have reviewed https://unkey.com/docs for existing features that would solve my problem
I have searched for existing feature requests: https://github.com/unkeyed/unkey/issues
This issue is not a question, general help request, or anything other than a feature request directly related to Unkey. Please ask questions in our Discord community: https://unkey.com/discord.

Is your feature request related to a problem? Please describe.

The current 404 page of the Unkey Dashboard could benefit from enhancements to improve user experience. A well-designed 404 page can guide users back to relevant content and reduce frustration.

Describe the solution

Proposed Improvements

User-Friendly Messaging: Provide a clear message indicating that the page was not found, along with a friendly tone.
Navigation Options: Include links to the homepage, popular sections, or a search bar to help users find what they’re looking for.
Visual Design: Update the visual layout to make it more engaging and consistent with the overall branding of the dashboard.
Error Reporting: Optionally, provide a way for users to report the missing page for further investigation.

Describe alternatives you have considered (if any)

The Unkey website features a well-designed 404 page with excellent UI/UX. The dashboard should adopt a similar approach to maintain consistency across our platforms.

Additional context

Benefits:

Enhances user experience by reducing confusion.
Helps retain users by providing navigation options.
Aligns the 404 page with the branding of the app.

linear · 2024-10-08T11:50:10Z

ENG-1405 Improve 404 Page for Unkey Dashboard

chronark · 2024-10-08T14:41:22Z

Do you have a proposal of what specifically to show and how it should look like?

harshsbhat · 2024-10-08T15:17:25Z

Do you have a proposal of what specifically to show and how it should look like?

I think the same as landing page would be good right? Instead of Go to Homepage we can do Go to apis

( I don't plan to solve this. Just suggesting )

DeepaPrasanna · 2024-10-08T15:33:33Z

Just few thoughts:

The current 404 page does seems to provide clear message.
It already has the navigation options, the options in the nav bar
It seems pretty consistent too with the branding
About the missing pages reporting to unkey - the discord support option ?

chronark · 2024-10-08T16:00:31Z

the current unkey.com/404 page has a completely different design and does not fit the dashboard. copying it as is, is not an option

harshsbhat · 2024-10-08T16:03:20Z

the current unkey.com/404 page has a completely different design and does not fit the dashboard. copying it as is, is not an option

I forgot about the light mode. It would have worked if we just had a dark mode.

Vardhaman619 · 2024-10-09T13:36:23Z

@chronark I believe that, at the very least, a minimal but visually appealing 404 page should be implemented. My proposed design includes:

An illustration paired with the 404 message to make the page look more engaging.
Two buttons: one linking back to the dashboard's API section and another providing users the option to discuss any issues on Discord.
I'm not a designer myself, so I don't have a detailed UI/UX proposal, but after browsing 404 pages from many popular websites, this minimal approach feels like a good start.

What do you all think about this idea?

Vardhaman619 · 2024-10-09T13:37:48Z

chronark · 2024-10-09T15:40:41Z

I think we can do something minimalistic, we already have an EmptyPlaceholder component, which we could use to build this
something similar to this but different icon/text of course?

Vardhaman619 · 2024-10-10T10:34:02Z

I noticed that there's an existing 404 page implemented in […not-found]/page.tsx using the EmptyPlaceholder component. However, it currently only shows up for certain routes. We could enhance this page by updating the text and adding two buttons: one for "Go Back" and another for "Discuss Issue on Discord." This would improve the user experience, and we could make this 404 page available for all paths, from top-level to deeply nested routes.

What do you think about making these adjustments?

Existing 404 page ([...not-found]/page.tsx):

mrjayantbokade · 2024-10-11T04:18:25Z

/assign

Ashishkumar448 · 2024-10-11T11:05:12Z

/assign

chronark · 2024-10-11T12:38:47Z

+1 for discord button and moving the page to catch all 404s, not just some

Vardhaman619 · 2024-10-11T12:53:20Z

Great!
Should I start work on this? If so, let's assign it to me.

chronark · 2024-10-11T17:43:46Z

You mentioned the 404 page does only show up for some pages, can you show me a page where it doesn't show?
looks to me like this is just about adding the discord button, nothing else

Vardhaman619 · 2024-10-12T03:43:36Z

You mentioned the 404 page does only show up for some pages, can you show me a page where it doesn't show? looks to me like this is just about adding the discord button, nothing else

https://app.unkey.com/apis/404
https://app.unkey.com/404
https://app.unkey.com/authorization/roles/404

chronark · 2024-10-13T10:47:15Z

/award 150

oss-gg · 2024-10-13T10:47:17Z

Awarding Vardhaman619: 150 points 🕹️ Well done! Check out your new contribution on oss.gg/Vardhaman619

Vardhaman619 · 2024-10-13T11:43:50Z

/assign

oss-gg · 2024-10-13T11:43:54Z

Assigned to @Vardhaman619! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀

oss-gg · 2024-10-14T08:40:52Z

You already have an open issue assigned to you here. Once that's closed or unassigned, only then we recommend you to take up more.

ProductFactory2 · 2024-10-14T09:05:43Z

/assign

oss-gg · 2024-10-14T09:05:48Z

Assigned to @ProductFactory2! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀

lostinvsc · 2024-10-14T11:44:07Z

/assign

oss-gg · 2024-10-14T11:44:10Z

You already have an open issue assigned to you here. Once that's closed or unassigned, only then we recommend you to take up more.

aniket607 · 2024-10-14T11:44:56Z

/assign

oss-gg · 2024-10-14T11:45:00Z

Assigned to @aniket607! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀

aniket607 · 2024-10-14T12:13:09Z

@chronark How exactly do we need the 404's to be? Just a uniform UI across the app for all 404s using EmptyPlaceholder component with 2 buttons -one for back and one for Solve on Discord?

Sanylearn · 2024-10-14T16:08:26Z

/assign

oss-gg · 2024-10-14T16:08:28Z

This issue is already assigned to another person. Please find more issues here.

aniket607 · 2024-10-16T13:45:55Z

/assign

oss-gg · 2024-10-16T13:46:01Z

Assigned to @aniket607! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀

Vardhaman619 · 2024-10-16T16:40:40Z

/assign

oss-gg · 2024-10-16T16:40:42Z

This issue is already assigned to another person. Please find more issues here.

oss-gg · 2024-10-17T09:06:08Z

@ProductFactory2, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.

oss-gg · 2024-10-17T11:45:47Z