The Signal: A News App Prototype
UX/UI Engineering • Claude Design • React/Vite
- For:
- Portfolio
- Role:
- UX Designer/Engineer
- Programs:
- Claude Design/Code, React/Vite, GitHub Pages
- Published:
- July 2026
A categorized tech news reader, designed in Claude Design, built with Claude Code and React/Vite, deployed to GitHub Pages.
The Signal is a static prototype of a tech news app, organized into six categories (AI, Startups, Hardware, Software, Security, Space) with article data sourced from NewsAPI.org. It's an end-to-end exercise: design in Claude Design, implementation in Claude Code, ship on GitHub Pages.
Live Demo:
Design Process
Rather than polishing screens in isolation, I worked in layers:
Structure First
Every one of the seven screens (Home, Search, Article, About, Topic, Login, Categories, Media) uses the same fixed-header / scrollable-content pattern, so it reads as a native app instead of a stack of static mockups. Standardizing this early meant new screens inherited the interaction model for free.
Content Depth Second
I upgraded the article dataset with longer copy, split into a feed teaser and a full multi-paragraph article view, and kept featured picks per category in sync with the new content.
Data QA
I caught two broken article images in Hardware, and made sure the fix propagated: the removed articles included the category's featured pick, so that reference had to be reassigned, not just deleted.
Polish Last
I redesigned the empty Media state (centered play icon, muted gray), and switched the login avatar from a filled icon to an outline to match the rest of the masthead.
Working structure → content → polish meant later changes slotted into existing decisions instead of fighting them.
The Build Challenge
The trickiest part wasn't the UI, it was getting a Vite + React app correctly hosted on GitHub Pages so it could be embedded on my site. Vite's default asset paths assume root-domain deployment, which breaks under a Pages project subpath (/news-app/). Getting the base config, routing, and the
gh-pages
deploy script aligned took more iteration than any single screen did.
Next Steps
The current version is a static prototype, the roadmap from here:
Live Data
I want to swap the static dataset for live calls to NewsAPI.org. This isn't a drop-in change: NewsAPI's free tier blocks client-side requests from browsers, so a static GitHub Pages site can't call it directly. That means adding a lightweight proxy (a serverless function, e.g. on Vercel or Cloudflare Workers) to sit between the app and the API.
More Features
The prototype should expand beyond the current read-only prototype: real search against live results, saved/bookmarked articles, and category filtering that reflects actual API query params rather than pre-baked data.
Develope A Deeper Claude Design Fluency
I want to keep iterating in Claude Design on more complex interaction states (loading, error, pagination) now that the core screens and pattern language are established.
Takeaway
This project was as much about the Claude Design → Claude Code → deployed-artifact pipeline as it was about the app itself: a design system that holds up across screens, a data layer that doesn't silently break when content changes, and a build that actually survives contact with static hosting.