{"id":13632424,"url":"https://github.com/clintonwoo/hackernews-remix-react","last_synced_at":"2025-04-04T23:09:55.073Z","repository":{"id":40788376,"uuid":"454562506","full_name":"clintonwoo/hackernews-remix-react","owner":"clintonwoo","description":"Hacker News clone written with universal TypeScript, using React and Remix.","archived":false,"fork":false,"pushed_at":"2024-07-11T03:20:03.000Z","size":702,"stargazers_count":493,"open_issues_count":3,"forks_count":35,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-03-28T22:14:23.852Z","etag":null,"topics":["clone","hacker-news","hn","javascript","nodejs","react","remix","remix-run","serverless","ssr","typescript"],"latest_commit_sha":null,"homepage":"https://remix.hnclone.win","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/clintonwoo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-01T21:49:44.000Z","updated_at":"2025-03-23T17:37:29.000Z","dependencies_parsed_at":"2024-07-11T04:39:06.792Z","dependency_job_id":"93cd991d-5e46-4037-8bd8-0317e54cc615","html_url":"https://github.com/clintonwoo/hackernews-remix-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clintonwoo%2Fhackernews-remix-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clintonwoo%2Fhackernews-remix-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clintonwoo%2Fhackernews-remix-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clintonwoo%2Fhackernews-remix-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clintonwoo","download_url":"https://codeload.github.com/clintonwoo/hackernews-remix-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247261612,"owners_count":20910108,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clone","hacker-news","hn","javascript","nodejs","react","remix","remix-run","serverless","ssr","typescript"],"created_at":"2024-08-01T22:03:02.794Z","updated_at":"2025-04-04T23:09:55.058Z","avatar_url":"https://github.com/clintonwoo.png","language":"TypeScript","readme":"\u003ch2 align=\"center\"\u003eHacker News Clone Remix/React\u003c/h2\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/clintonwoo/hackernews-remix-react/stargazers\"\u003e\u003cimg alt=\"GitHub Repo stars\" src=\"https://img.shields.io/github/stars/clintonwoo/hackernews-remix-react?style=social\"\u003e\u003c/a\u003e \n  \u003ca href=\"https://github.com/clintonwoo/\"\u003e\u003cimg alt=\"GitHub Followers\" src=\"https://img.shields.io/github/followers/clintonwoo.svg?style=social\u0026label=Follow\"\u003e\u003c/a\u003e \n  \u003ca href=\"https://github.com/clintonwoo/hackernews-remix-react/issues\"\u003e\u003cimg alt=\"GitHub Issues\" src=\"https://img.shields.io/github/issues/clintonwoo/hackernews-remix-react.svg\"\u003e\u003c/a\u003e \n  \u003ca href=\"https://github.com/clintonwoo/hackernews-remix-react/pulls\"\u003e\u003cimg alt=\"GitHub Pull Requests\" src=\"https://img.shields.io/github/issues-pr-raw/clintonwoo/hackernews-remix-react.svg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nThis is a clone of Hacker News written in TypeScript using Remix and React.\n\nIt is intended to be an example or boilerplate to help you structure your projects using production-ready technologies.\n\nThe project implements the publicly available parts of the Hacker News site API, with some remaining functionality implemented in-memory.\n\n\u003cp align=\"center\" margin-bottom=\"0\"\u003e\n  \u003ca href=\"https://remix.hnclone.win\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Hacker News Clone Demo\" width=\"600\" height=\"auto\" src=\"docs/hn-screenshot-seal.webp\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://remix.hnclone.win\"\u003eLive Demo\u003c/a\u003e\n\u003c/p\u003e\n\n## Overview\n\n### Featuring\n\n- Remix (Server side rendering framework)\n- React (Declarative UI)\n- ESBuild (via Remix, sub-second production builds)\n- TypeScript (Static typing)\n- ESLint (Code checking)\n- Authentication via Cookies (plain JS)\n- Jest (Test runner)\n- Prettier (Code formatter)\n- Docker (Container builder)\n\n### Benefits\n\n**UI**\n\n- Website works with JavaScript disabled (`Remix`)\n- Nested routes allow building complex UI applications that are also SSR capable (`Remix`)\n- Data fetching for client and server uses the same loader code (`Remix`)\n- Most apps can be built leveraging web fundamentals (form/anchor tag) requiring no state management library (`Remix`)\n- 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`)\n- Declarative UI (`React`)\n- Minimalistic client-side UI rendering (`Remix`)\n- Pre-fetch page assets (`Remix`)\n- JS Code splitting (`Remix`)\n- Loading state spinners not required by default (`Remix`)\n\n**Server**\n\n- Server Side rendering (`Remix`)\n- Universal TypeScript/JavaScript (`Web standards`)\n- Server can build a single JS file for optimized deployments (`Remix`)\n- Deployable on FaaS (Functions as a Service), edge workers or on your own NodeJS server (`Remix`)\n- Asset bundler (`ESBuild` via `Remix`)\n\n**Dev/Test**\n\n- Hot module reloading (`remix`)\n- Snapshot testing (`Jest`)\n- JS/TS best practices (`eslint`)\n\n## Architecture overview\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Hacker News clone architecture overview diagram\" width=\"600\" height=\"auto\" src=\"docs/architecture.png\"\u003e\n\u003c/p\u003e\n\nRemix emphasises web primitives and fundamentals. So requests are made generally using Remix's `\u003cLink\u003e`s and `\u003cForm\u003e`s which add some extra functionality on top of the regular `\u003ca\u003e` and `\u003cform\u003e` tags.\n\nRemix `routes` folder correlates to route-matching UI views with layouts and endpoints for GET (loader) or all other HTTP verb methods (action). You can have endpoints with no UI and UI with no endpoints, or mixed.\n\nRemix takes care of the build system (using ESBuild), which works incredibly quickly and is a pleasure to work with. Remix implements code-splitting, HTTP headers, asset bundling and various optimizations to make the site run fast in real-world scenarios.\n\nRemix can run in a number of runtime environments so the architecture for your app could be widely different depending on your requirements. You could deploy it on an edge network (like Cloudflare Workers) or run it with NodeJS inside a cloud VM or VPS, for example.\n\n### How to build and start\n\nStart with `npm install`.\n\nYou can build and start with file watching using `npm run dev`.\n\nOr you can do a regular build and start using `npm run build` and `npm run start`.\n\n### One Command Setup \u0026 Run\n\nYou can download and run the repo with one command to rule them all:\n\n`git clone https://github.com/clintonwoo/hackernews-remix-react.git \u0026\u0026 cd hackernews-remix-react \u0026\u0026 npm install \u0026\u0026 npm run build \u0026\u0026 npm run dev`\n\n## Contributing\n\nFile an issue for ideas, conversation or feedback. Pull requests are welcome.\n\n## Community\n\nAfter you ★Star this project, follow [@ClintonDAnnolfo](https://twitter.com/clintondannolfo) on Twitter.\n","funding_links":[],"categories":["TypeScript","Examples"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclintonwoo%2Fhackernews-remix-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclintonwoo%2Fhackernews-remix-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclintonwoo%2Fhackernews-remix-react/lists"}