Skip to content

README.md

Latest commit

 

History

History
145 lines (108 loc) · 4.88 KB

README.md

File metadata and controls

145 lines (108 loc) · 4.88 KB
Raw

Angular 2 HN

A progressive Hacker News client built with React

View App

PRs Welcome Build Status

⚡ Fast: Service Worker App Shell + Dynamic Content model to achieve faster load times with and without a network.

📱 Responsive: Completely responsive UI that can be installed to your mobile home screen to provide a native feel.

🚀 Progressive: installable, offline-capable PWA.

Stack

The app was originally written in Angular and has been rewritten in React with no change in behaviour:
UI React 18 + TypeScript
Build / dev server Vite 5
Routing React Router v6
Styling SCSS (three themes: Default, Night, Black (AMOLED))
Unit / component tests Vitest + React Testing Library
End-to-end tests Playwright
PWA vite-plugin-pwa (Workbox)
Data node-hnapi over native fetch

Getting started

npm ci
npm run dev       # dev server on http://localhost:5173
npm run build     # type-check and build to dist/
npm run preview   # serve the production build (service worker included)

Tests

npm run lint            # ESLint (with Prettier compatibility)
npm test                # Vitest unit and component tests
npm run test:coverage   # the same suite with a V8 coverage report
npm run test:e2e        # Playwright end-to-end tests against the production build

The Playwright suite stubs the Hacker News API with fixtures (e2e/fixtures.ts) so it is deterministic and can run offline. CI (.github/workflows/ci.yml) runs lint, unit tests, the build and the e2e suite on every pull request.

Project layout

src/
  api/            fetch-based Hacker News API client
  components/     shared presentational components (Loader, ErrorMessage)
  context/        SettingsContext (theme, font size, list spacing, link behaviour)
  core/           app chrome: Header, Footer, Settings modal
  feeds/          feed item row
  item-details/   recursive comment tree
  models/         TypeScript models (Story, Comment, User, PollResult, Settings)
  pages/          routed pages: FeedPage, ItemDetailsPage, UserPage
  styles/         SCSS themes and shared variables/mixins
  utils/          pure helpers (formatCommentCount)
  routes.tsx      route table mirroring the original Angular routes
e2e/              Playwright specs and API fixtures

Offline support

vite-plugin-pwa generates a Workbox service worker at build time: the app shell is precached and every navigation falls back to index.html, while Hacker News API responses are served with a NetworkFirst strategy (24h expiry) so previously visited feeds and items keep working offline.

Manifest

With Chromium based browsers for Android (Chrome, Opera, etc...), Angular 2 HN includes a Web App Manifest that allows you to install to your homescreen.

Themes

Built in theme engine!

Current themes:

  • Default
  • Night
  • Black (AMOLED)

The theme follows prefers-color-scheme on first load and is then persisted to localStorage.

Mobile Preview

Laptop Preview

Areas of improvement

  • Realtime updating using the Firebase SDK (may need to add option to settings so the service worker can still rely on REST endpoints)
  • Server side rendering

Feel free to send me feedback on twitter or file an issue! Feature requests are always welcome.

Contributors

A million thanks to some awesome people :)