A React & react-router-powered implementation of Hacker News using its Firebase API.

Overview

react-hn

A React & react-router-powered implementation of Hacker News using its Firebase API.

react-hn screenshot

Live version: https://insin.github.io/react-hn

Features

  • Supports display of all item types: stories, jobs, polls and comments
  • Basic user profiles
  • Collapsible comment threads, with child counts
  • "Realtime" updates (free via Firebase!)
  • Last visit details for stories are cached in localStorage
  • New comments are highlighted:
    • Comments since your last visit to an item
    • New comments which load while you're reading an item
    • New comments in collapsed threads
  • Automatic or manual collapsing of comment threads which don't contain any new comments
  • Manual highlighting of the X most recent comments to catch up on threads you were reading elsewhere
  • Stories with new comments are marked on list pages
  • Stories can be marked as read to remove highighting from new comments
  • "comments" sections driven by the Changed Items API
  • Story listing pages are cached in sessionStorage for quick back button usage and pagination in the same session
  • Configurable settings:
    • auto collapse - automatically collapse comment threads without new comments on page load
    • show reply links - show "reply" links to Hacker News
    • show dead - show items flagged as dead
    • show deleted - show comments flagged as deleted in threads
  • Delayed comment detection - so tense! Who will it be? What will they say?

Feature requests are welcome!

Building

Install dependencies:

npm install

npm scripts

  • npm start - start development server
  • npm run build - build into the dist/ directory
  • npm run lint - lint src/
  • npm run lint:fix - lint src/ and auto-fix issues where possible

MIT Licensed

Issues
  • Investigate support for Universal/Isomorphic rendering

    Investigate support for Universal/Isomorphic rendering

    In the application shell architecture, we try to encourage server-side rendering for fast first paint as much as possible. Even if just for the "shell"/common user interface.

    In our current version of react-hn in master, we still rely on client-side rendering to display any content. We can probably do way better here so a static render gives us something useful on the screen.

    I would love to see what we can do to explore Universal rendering support and what perf gains this would bring. We would want this to play as nicely as possible with our Service Worker caching but..good to get a start on a PR to see what a V0 take on this would look like.

    cc @jackfranklin @garbee @zenorocha who may be interested in helping with this or have a few pointers :cake:

    performance 
    opened by addyosmani 19
  • Upgrade to nwb 0.11.0 & fixes #39 (concat vendor/app scripts)

    Upgrade to nwb 0.11.0 & fixes #39 (concat vendor/app scripts)

    This patchset upgrades us to the latest version of nwb and also moves us over to async loading in the single bundle generated by vendorBundle: false.

    opened by addyosmani 17
  • Upgrade to be a Progressive Web App

    Upgrade to be a Progressive Web App

    I've been investigating how we could turn ReactHN into a Progressive Web App with some offline support using Service Workers.

    Some of the specific benefits this would bring include quicker time-to-interactive (if I make a few architectural changes), faster first paint/load for subsequent visits and a slightly more pleasant 'add to homescreen' experience for folks using react-hn on mobile (e.g Chrome on Android). The latter can be accomplished using a Web App Manifest. I'd be happy to PR one in (they look like this).

    There's https://github.com/GoogleChrome/sw-precache for generating a Service Worker of files to precache so we can move towards instant loading on repeat visits and offline support. I've used this successfully in a bunch of projects. Given we're using WebPack here, we could also use offline-plugin by @nekr to ease some support for SW in. I guess that's something you could try incorporating into https://github.com/insin/nwb/blob/master/src/createWebpackConfig.js if interested via the webpack config object.

    Happy to chat more if interested in the updates needed to make this happen.

    Btw: Because we're using Firebase as the backend, we'll need to spend a while figuring out how to properly make those responses work offline as Firebase is currently limited to offline providing offline support for the current session - not once the user has returned to the app or launched the fullscreen PWA.

    offline-support 
    opened by addyosmani 14
  • Offline support in Firefox

    Offline support in Firefox

    I was impressed with the demo @addyosmani did at IO 2016. Offline support works perfectly in Chrome. I cannot get it working in latest FF 46, although according to Jake Archibald's status page the service workers support in FF as good as in Chrome. Maybe the libraries that were used (sw-toolkit and sw-precache) have some issues or it is the lack of testing in FF?

    I noticed that both offline features don't work:

    • refreshing the home page in offline mode
    • opening the cached comments page.
    opened by sejoker 11
  • Add support for server-side rendering Top Stories & Comments

    Add support for server-side rendering Top Stories & Comments

    Please don't merge in just yet. This work requires some discussion about the UX

    This set of changes adds server-side rendering for both Top Stories (index) and comment threads. It enables React HN to deliver content quickly, especially useful for flakey/slow networks or where our vendor/app bundle hasn't been fully loaded yet (sometimes a few seconds on slow connections). It works with JavaScript disabled too.

    Demo: https://react-hn-ssr.appspot.com Video: https://www.youtube.com/watch?v=E1YNRc3Kfag&feature=youtu.be Lighthouse scores: 100/100

    How

    I investigated a few different ways SSR could be added over in #27. The approach I landed on moves most of the work over into Express, with minimal changes to our React code to support 'preboot' data and hydration. We populate the view in componentWillMount (server/client) and hydrate in componentDidMount (client).

    Originally, I tried to do full server-side rendering using the Firebase SDK. This involved a large number of network requests to be resolved for stories and comments, which ended up taking anywhere up to a minute. In a normal server environment, we would start adding in a caching layer here to avoid each visit having to incur this cost.

    Thankfully, there exists a third-party (unofficial) Hacker News API we can call, which does support caching and provides story and comment data in a slightly more friendly format. Because the data format is different enough to what we currently rely on in the rest of our React components (in particular, our templates), I decided to replicate the output in EJS templates allowing us to get the same look and feel once output.

    Some screenshots from WebPageTest

    First meaningful paint happening at 0.6s on cable with SSR compared to 2.1s with our current build:

    screen shot 2016-06-09 at 14 30 41

    Hydration to real-time content, occurring at roughly the same time as our current build:

    screen shot 2016-06-09 at 14 32 15

    http://www.webpagetest.org/video/compare.php?tests=160609_TS_1H8W,160609_SD_1H8Y if you'd like to look at the data directly.

    UX

    Perhaps the biggest change this PR adds is a change to the ReactHN UX. If you navigate to the demo with JS off/on a throttled connection, content will load/display quickly and eventually 'update' to real-time. On a fast connection, you'll see the server-rendered content and then very shortly after the hydrated real-time experience. It's a little like FOUC. This only happens for the first page of top story results (after which the experience is per usual), however I'm interested in hearing what others think about the experience. Is it okay? Does it feel unnatural? If the latter, there are a few options we have, such as delaying hydration until a future time (based on an interval). Alternative ideas are also welcome.

    opened by addyosmani 10
  • [Firefox] Navigation > Comments page is slow to load

    [Firefox] Navigation > Comments page is slow to load

    I haven't been able to repro this in other browsers, but in Firefox (desktop) the top-level Comments page takes a long time to return any data. It works fine with all our other views.

    Video: http://recordit.co/uKni7RWp9n Versions tested: FF 46, 47, 50

    Oddly, it works absolutely fine in Firefox for Android (stable).

    Similarly odd, testing locally, we have no issues loading this page as quickly as any other in FF50:

    screen shot 2016-06-28 at 13 36 50

    Paging @wanderview in case he has more information available that would help with repros.

    bug 
    opened by addyosmani 9
  • Adds isomorphic/server-side React application-shell rendering

    Adds isomorphic/server-side React application-shell rendering

    Demo URL: https://react-hn.appspot.com

    tl;dr: we can now server-side render the UI, which also enables it to be visible with or without JavaScript enabled

    This set of changes formalises the work done in #27 (huge thanks to @jackfranklin and @psimyn) for helping us get it started. The end product can now be trivially deployed to Google App Engine.

    @jackfranklin: some of the specific changes I added to your branch were bringing back SSR-friendly hostname parsing, the componentDidMount fix, slightly tighter equality checks and updates to the build pipeline which enable us to deploy to GAE.

    cc @insin @NekR

    opened by addyosmani 8
  • Fix: Issue#34, solution for links overflowing in comments section

    Fix: Issue#34, solution for links overflowing in comments section

    #34

    https://www.w3.org/TR/css-text-3/#overflow-wrap

    'overflow-wrap' has apparently replaced 'word-wrap' in css3 specifications. adding 'word-wrap' for legacy support.

    opened by cryogenic-ric 7
  • Is worth to use sockets?

    Is worth to use sockets?

    I've seen the progressive load, but is fast anyway. Isn't sockets an overkill?

    opened by totty90 6
  • Live link down

    Live link down

    Live link appears to have gone dead today (3/20).

    Intended?

    opened by cdurth 6
  • Add link to best stories

    Add link to best stories

    Adresses #37 & #76

    opened by yossizahn 0
  • Remove trailing spaces

    Remove trailing spaces

    (ノ◕ヮ◕)ノ*:・゚✧

    opened by ghost 0
  • Adds dark theme

    Adds dark theme

    Added dark theme to settings panel #54

    screen shot 2017-12-05 at 4 55 22 pm

    opened by KrSiddharth 0
  • Why does show the first page items, then show blinking dots, then show the items again?

    Why does show the first page items, then show blinking dots, then show the items again?

    On my machine, in Google Chrome, react-hn very quickly shows the full front page of Hacker News, with all its items, but then it shows blinking dots, and then shows the items again.

    I assume the quick display is because of SSR. But why can't those items stay on the screen until everything is loaded? It looks terrible and slow the way it works now, but could appear very snappy if the SSR-rendered page just seemed to stay on the screen.

    opened by garyrob 0
  • Add templates for server-side rendering

    Add templates for server-side rendering

    • replaces templates made from string concatenation
    • allows comments nested deeper than 2 levels
    opened by tryzniak 0
  • Add .eslintrc for text editors/plugins that rely on it

    Add .eslintrc for text editors/plugins that rely on it

    Some editors/plugins (vim) rely on .eslintrc to be present in the root of a project so I added it linking to the eslint-config-jonnybuchanan config.

    opened by tryzniak 0
  • Move eslint-config-jonnybuchanan from deps to devDeps

    Move eslint-config-jonnybuchanan from deps to devDeps

    Hi! eslint-config-jonnybuchanan should probably belong to devDependencies to I moved it there.

    opened by tryzniak 0
  • workbox-sw@0.0.2: Failed to load resource: net::ERR_UNSAFE_REDIRECT

    [email protected]: Failed to load resource: net::ERR_UNSAFE_REDIRECT

    [email protected] doesn't load with Chrome.

    The script resource is behind a redirect, which is disallowed.
    unpkg.com/[email protected] Failed to load resource: net::ERR_UNSAFE_REDIRECT
    
    opened by bbigras 0
  • Fix small typo in .Settings CSS rule

    Fix small typo in .Settings CSS rule

    Removed a second % from the width property

    opened by kiley0 0
  • Add lang attributes to html tag

    Add lang attributes to html tag

    Adds a default lang="en" attribute to the html tags, which was bringing down the accessibility score.

    opened by reccanti 0
Releases(v1.7.1)
Owner
Jonny Buchanan
Programmer/web developer from Northern Ireland living in Australia, making things with JavaScript and Flutter
Jonny Buchanan
A react based hacker news clone / client

Hacker News Redesign In an effort to learn to react here is a react based hacker news clone from scratch using the official open Hacker News's API .(N

Rocktim Saikia 64 Sep 10, 2021
A React & react-router-powered implementation of Hacker News using its Firebase API.

react-hn A React & react-router-powered implementation of Hacker News using its Firebase API.

Jonny Buchanan 2.2k Sep 21, 2021
React features to enhance using Rollbar.js in React Applications

React features to enhance using Rollbar.js in React Applications

Rollbar 20 Sep 17, 2021
React Query for Firestore, that you can actually use in production, on every screen.

React Query + Firestore const { data } = useDocument('users/fernando') It's that easy. ?? This library provides the hooks you need for querying Firest

Amine Bl 56 Sep 16, 2021
Winamp 2 reimplemented for the browser

Webamp A reimplementation of Winamp 2.9 in HTML5 and JavaScript with full skin support. As seen on TechCrunch, Motherboard, Gizmodo, Hacker News (1, 2

Jordan Eldredge 8.1k Sep 16, 2021
İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

İnstagram Clone.You can sign in, sign up, upload image, make comment ?? Used ReactJS, Material UI, Firebase, Firestore Database

null 18 Aug 31, 2021
İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

?? instagram-clone This is a instagram clone. You can sign in, sign up, upload image, make comment ?? ⚡ LIVE To check out the live demo of this app AB

null 14 Jun 6, 2021
A Full Stack Amazon Clone which created using ReactJS with full E-Commerce Functionality!!

A Full Stack Amazon Clone which created using ReactJS with full E-Commerce Functionality!!

Özge Coşkun Gürsucu 22 Sep 15, 2021
News Web App 📰 built using React ⚛️ and NewsAPI 🚀 which Fetches latest news.

Inshorts Clone using React ⚛️ News Web App ?? built using React ⚛️ and NewsAPI ?? Fetches latest news. ?? Checkout the live Website here! ?? NOTE ?? N

Nikhil Pawar 8 Aug 15, 2021
A Slack Clone which built with ReactJS. You can sign in with your Google Account and send realtime posts. Click demo to try it by yourself!

A Slack Clone that you can sign in with your Google Account, add new channels and send realtime messages to them.

Özge Coşkun Gürsucu 14 Aug 27, 2021
🕊 Twitter Clone with React, Firebase

?? Twitter Clone with React, Firebase

GW 1 Sep 19, 2021
This is a Facebook Messenger clone.You can comminicate to other at realtime.Used ReactJS, Material UI, Firebase, Firestore Database

?? facebook-messenger This is a facebook messenger clone.You can comminicate to other at realtime ?? ⚡ LIVE To check out the live demo of this app ABO

null 18 Sep 8, 2021
Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge - Building Netflix Using React

Building Netflix from Scratch Using React (Custom Hooks, Context, Portals), Firebase, Compound & Styled Components (10 Hour Tutorial Here: https://www

Karl Hadwen 1.7k Sep 15, 2021
Fakeflix – Netflix open source clone, not the usual clone that you can find on the web.

Fakeflix – Netflix open source clone, not the usual clone that you can find on the web.

Davide Mandelli 3.3k Sep 24, 2021
A whatsapp clone progressive web application built with react nodejs and firebase

WhatsappyApp is a whatsapp clone progressive web application built with react nodejs and firebase it allows you to send messages talk with people and serach for them and many more.

Alaa Eddine Boubekeur 552 Sep 20, 2021
Netflix Clone. Search and find your favorite movie with coming from TMDB API. Also you can watch the trailers 📽️ 🍿 Used ReactJS, Material UI, Firebase, Firestore Database

Netflix Clone. Search and find your favorite movie with coming from TMDB API. Also you can watch the trailers ??️ ?? Used ReactJS, Material UI, Firebase, Firestore Database

null 9 Jun 22, 2021
FireCMS is a headless CMS and admin panel based on Firebase, built by developers for developers.

FireCMS is a headless CMS and admin panel based on Firebase, built by developers for developers.

null 312 Sep 22, 2021
A Gmail Clone which built with ReactJS and Redux.

A Gmail Clone which built with ReactJS and Redux. You can sign in with your Google Account, compose a new e-mail and send realtime emails to the project.

Özge Coşkun Gürsucu 24 Aug 22, 2021
Super convenient analytics provider for React

React Analytics Provider Super convenient analytics provider for React ?? Typescript support ??‍??‍??‍?? GA4 support ?? Currently maintaining 1. Getti

null 38 Sep 15, 2021