Hacker News モバイル版

Hacker News の公式Firebase APIから記事データを取得し、スマートフォン向けに読みやすいUIで一覧表示するWebアプリを制作しました。
Figmaで画面設計を行い、その設計に基づいて Next.js（App Router）+ Tailwind CSS で実装、Vercelにデプロイしています。

公開URL

制作の目的

Figmaで設計したモバイル向けUIを基にNext.jsとTailWind CSSで実装する。
API連携（データ取得）と状態管理を含む、実用的なフロントエンド実装の練習・成果物としてまとめる
作品集（ポートフォリオ）として提示できる形にする

使用技術

Next.js (App Router)
React
Tailwind CSS
Hacker News Firebase API
Vercel (デプロイ）
Github (ソース管理)

実装内容

Hacker News APIから記事データを取得して一覧表示
記事タイトルをタップすると、元記事（外部サイト）またはHacker Newsの該当ページへ遷移
「Read More」で追加取得し、一覧の末尾に記事を追記表示
ナビゲーション（TOP / NEW / BEST）を切り替えると、表示内容を更新して再取得

工夫した点

1) Read Moreの追加読み込み

「Read More」を押したタイミングで追加データを取得し、既存の表示の後ろに自然に積み上がるよう実装しました。
最初から大量取得せず、必要になった分だけ取得することで、体感速度とUIの分かりやすさを意識しています。

2) ナビゲーション切り替え時の更新

TOP / NEW / BEST の切り替えに応じて、取得先と表示内容が正しく切り替わるように状態管理を設計しました。
グローバルな状態（Context）を使い、選択中のカテゴリ変更に合わせて一覧を更新しています。

3) モバイルでの可読性

スマホでの読みやすさを優先し、余白・行間・文字サイズなどを整理しました。
また、デザインの一貫性が出るよう、global.cssにフォントサイズや行間、色などの共通値を登録して利用しています。

制作メモ/記録

制作ログ