Skip to content

UX/UI improvements for Use Cases Explorer#17263

Draft
konopkja wants to merge 7 commits intoethereum:devfrom
konopkja:ux-improvements-use-cases
Draft

UX/UI improvements for Use Cases Explorer#17263
konopkja wants to merge 7 commits intoethereum:devfrom
konopkja:ux-improvements-use-cases

Conversation

@konopkja
Copy link
Copy Markdown
Contributor

@konopkja konopkja commented Feb 10, 2026 •
edited by wackerow
Loading

Summary

Design and UX improvements for the Use Cases Explorer page introduced in #17197. These changes build on top of that PR's branch.

  • Card icons: Contextual lucide icons for each of the 32 use case cards
  • Category filter: Replaced pill buttons with TabNav component (matching /events/ page pattern) with per-category icons and counts
  • Modal redesign: Custom markdown parser with structured sections (The Opportunity, Ideas, Examples, Resources), section heading icons, HTML entity decoding
  • Ideas as the USP: Renamed "Ideas" to "What You Could Build", purple-tinted numbered cards with hover states, sorted by description presence
  • Copy improvements: Page title changed to "What to Build on Ethereum", sharper subtitle and meta tags targeting builder audience
  • Simplified page structure: Removed redundant section heading + description paragraph, tightened spacing
  • Renamed "Use cases" to "Project ideas" across nav menu and breadcrumbs
  • Responsive fixes: Single-column Ideas grid on mobile, overflow-safe modal layout

Files changed

File Change
UseCaseCard.tsx Added 32-entry icon map, icon container in card layout
CategoryFilter.tsx Rewritten to use TabNav with icons and counts
UseCaseExplorer.tsx Category counts, same-row filter+search layout
UseCaseModal.tsx Full rewrite: markdown parser, structured sections, purple idea cards
page.tsx Removed section h2+description, tightened spacing
common.json Renamed nav labels to "Project ideas"
page-use-cases.json Updated title, subtitle, meta tags

Test plan

  • Verify cards display correct icons for each use case title
  • Verify category filter tabs show icons and counts, left-aligned
  • Open modals for various use cases — check section parsing, idea cards, link rendering
  • Test on mobile viewport — ideas grid should be single column
  • Verify breadcrumbs show "Project ideas" instead of "Use cases"
  • Verify nav menu shows "Project ideas"
  • Check no horizontal scrollbar in modal on any viewport

🤖 Generated with Claude Code

https://deploy-preview-17263.ethereum.it/developers/use-cases

pblvrt and others added 6 commits January 29, 2026 17:31
@pblvrt
feat: add use cases explorer page at /developers/use-cases
be41cd8 
Integrates with UseCaseLab API to display 33 Ethereum use cases across 6 categories (Society, Finance, Consumer, Enterprise, Digital, Physical).

Features:
- Fetches data from explorer.usecaselab.org/api
- Search filtering by title and problem statement
- Category filtering
- Modal with use case details and link to UseCaseLab
@pblvrt
feat(use-cases): fetch full markdown content from UseCaseLab API
4e071dd 
- Add markdown endpoint fetch alongside categories API
- Render markdown content in modal using react-markdown
- Add @tailwindcss/typography for prose styling
@pblvrt
feat(nav): add use cases explorer to Build > Get Started menu
ddbdfc7
@pblvrt
feat(use-cases): disable caching for fresh API data
e15e8d9
@pblvrt @claude
fix(use-cases): filter out use cases with invalid API data
07323a0 
Skip use cases where problemStatement is missing or contains
"undefined", which causes empty-looking cards on the page.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@claude
feat(use-cases): UX/UI improvements for Use Cases Explorer page
a87417e 
Design improvements building on top of ethereum#17197:

- Add contextual lucide icons to each use case card
- Replace category filter with TabNav component (matching /events/ pattern)
  with category icons and counts
- Redesign modal: custom markdown parser, structured sections with icons,
  purple-tinted numbered Idea cards ("What You Could Build")
- Improve copy: rename page to "What to Build on Ethereum", sharpen subtitle
  and meta tags for builder audience and SEO
- Remove redundant section heading and description, tighten spacing
- Rename "Use cases" to "Project ideas" across nav and breadcrumbs
- Fix HTML entity decoding in modal content
- Fix responsive layout: single-column Ideas grid on mobile

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@netlify
Copy link
Copy Markdown

netlify Bot commented Feb 10, 2026 •
edited
Loading

✅ Deploy Preview for ethereumorg ready!

Name Link
🔨 Latest commit 6820cde
🔍 Latest deploy log https://app.netlify.com/projects/ethereumorg/deploys/698b8ebe44a80000083c6812
😎 Deploy Preview https://deploy-preview-17263.ethereum.it
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse		 7 paths audited
Performance: 56 (🟢 up 1 from production)
Accessibility: 94 (no change from production)
Best Practices: 100 (no change from production)
SEO: 100 (no change from production)
PWA: 59 (no change from production)
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions github-actions Bot added content 🖋️ This involves copy additions or edits dependencies 📦 Changes related to project dependencies tooling 🔧 Changes related to tooling of the project translation 🌍 This is related to our Translation Program labels Feb 10, 2026
@konopkja konopkja mentioned this pull request Feb 10, 2026
Draft
6 tasks
@claude
fix: restore "Use cases" label for Use tab, sort cards alphabetically
6820cde 
- nav-use-cases-label stays "Use cases" (Use tab section header)
- nav-use-cases-explorer-label remains "Project ideas" (Build tab link)
- Sort use case cards alphabetically by title across all views

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@wackerow
Copy link
Copy Markdown
Member

wackerow commented Feb 11, 2026

@konopkja #17197 isn't merged yet, but this PR targets dev branch (effectively replacing that PR)... Did you mean to target that PR instead, or replace that PR entirely?

@konopkja
Copy link
Copy Markdown
Contributor Author

konopkja commented Feb 11, 2026 •
edited
Loading

@konopkja #17197 isn't merged yet, but this PR targets dev branch (effectively replacing that PR)... Did you mean to target that PR instead, or replace that PR entirely?

honestly i wasnt sure whats the best approach in this context, just wanted to cleanup the design a bit

wackerow
wackerow reviewed Feb 23, 2026
View reviewed changes
Copy link
Copy Markdown
Member

@wackerow wackerow left a comment

Choose a reason for hiding this comment

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

Few quick notes:

  • data-layer for data fetch
  • Input rounded corners
  • No filter feedback, see https://dev.ethereum.org/developers/tutorials
  • Hover effect without links in modal
  • bullets for list?
  • New component theming
  • new packages? "react-markdown" SimpleMarkdown.. not sure what the typescript package is used for
  • Limmited exposure in /developers/ section
  • Links to this from other pages

@wackerow wackerow marked this pull request as draft February 26, 2026 20:34
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 29, 2026

This issue is stale because it has been open 30 days with no activity.

@github-actions github-actions Bot added the Status: Stale This issue is stale because it has been open 30 days with no activity. label Mar 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@wackerow wackerow wackerow left review comments

@pettinarip pettinarip Awaiting requested review from pettinarip pettinarip is a code owner

@minimalsm minimalsm Awaiting requested review from minimalsm minimalsm is a code owner

At least 0 approving reviews are required to merge this pull request.

Assignees

No one assigned

Labels

content 🖋️ This involves copy additions or edits dependencies 📦 Changes related to project dependencies needs translations Status: Blocked 🛑 This is blocked Status: Stale This issue is stale because it has been open 30 days with no activity. tooling 🔧 Changes related to tooling of the project translation 🌍 This is related to our Translation Program

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@konopkja @wackerow @pblvrt