01 / Overview
Journal is a modern React news application designed to feel like a premium digital magazine instead of a generic news feed. It combines global headlines, technology news, article detail pages, search, saved articles, and a polished editorial layout.
The project focuses on typography, responsive grids, reusable article cards, loading states, bookmark persistence, and secure API handling through a serverless proxy.
02 / My Role & Tech
My Role
Sole Developer. I redesigned and rebuilt the UI, upgraded the React architecture, implemented Redux data flows, added saved articles, handled NewsAPI integration, and created the serverless proxy.
Stack
03 / UI/UX Decisions
The goal was to make the app feel like a refined editorial product, with strong hierarchy and comfortable reading.
- • Magazine-style responsive grid
- • Hero, featured, and compact article card variants
- • Playfair Display for headlines and Inter for body text
- • Skeleton loaders for smoother perceived performance
- • Dark mode designed for reading, not just inverted colors
- • Saved articles page for return usage
04 / Technical Challenges
API Security
NewsAPI production usage can expose client-side key issues. I added a serverless api/news.js proxy so frontend requests go through an internal endpoint and the API key stays server-side.
Complex UI States
The app needs to handle loading, empty search results, broken images, missing content, and saved-article states. I created reusable SkeletonCard, EmptyState, and ImageWithFallback components to keep the UI stable.
Content Cleanup
NewsAPI often returns truncated text like [+1234 chars]. I added a utility to clean article content before rendering it in the detail view.
05 / What I Learned
Journal strengthened my understanding of production-style frontend polish: API proxying, state-driven UI, reusable layout systems, and editorial visual design. It also taught me how much perceived quality comes from small details like typography, spacing, skeleton states, and graceful fallbacks.
Frontend engineer building fast, reliable marketplace experiences across product, platform, and performance.