Hacker News Clone Remix/React
This is a clone of Hacker News written in TypeScript using Remix and React.
It is intended to be an example or boilerplate to help you structure your projects using production-ready technologies.
The project implements the publicly available parts of the Hacker News site API, with some remaining functionality implemented in-memory.
Overview
Featuring
- Remix (Server side rendering framework)
- React (Declarative UI)
- ESBuild (via Remix, sub-second production builds)
- TypeScript (Static typing)
- ESLint (Code checking)
- Authentication via Cookies (plain JS)
- Jest (Test runner)
- Prettier (Code formatter)
- Docker (Container builder)
Benefits
UI
- Website works with JavaScript disabled (
Remix
) - Nested routes allow building complex UI applications that are also SSR capable (
Remix
) - Data fetching for client and server uses the same loader code (
Remix
) - Most apps can be built leveraging web fundamentals (form/anchor tag) requiring no state management library (
Remix
) - Data management is simple resulting in smaller codebase and client JS bundle sizes, approx ~30-50% smaller for this HN clone project compared to the GraphQL HN clone (
Remix
) - Declarative UI (
React
) - Minimalistic client-side UI rendering (
Remix
) - Pre-fetch page assets (
Remix
) - JS Code splitting (
Remix
) - Loading state spinners not required by default (
Remix
)
Server
- Server Side rendering (
Remix
) - Universal TypeScript/JavaScript (
Web standards
) - Server can build a single JS file for optimized deployments (
Remix
) - Deployable on FaaS (Functions as a Service), edge workers or on your own NodeJS server (
Remix
) - Asset bundler (
ESBuild
viaRemix
)
Dev/Test
- Hot module reloading (
remix
) - Snapshot testing (
Jest
) - JS/TS best practices (
eslint
)
Architecture overview
Remix emphasises web primitives and fundamentals. So requests are made generally using Remix's
s and