A clone of Hacker News written in TypeScript using Remix and React

Overview

Hacker News Clone Remix/React

GitHub Repo stars GitHub Followers GitHub Issues GitHub Pull Requests

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.

Hacker News Clone Demo

Live Demo

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 via Remix)

Dev/Test

  • Hot module reloading (remix)
  • Snapshot testing (Jest)
  • JS/TS best practices (eslint)

Architecture overview

Hacker News clone architecture overview diagram

Remix emphasises web primitives and fundamentals. So requests are made generally using Remix's s and

s which add some extra functionality on top of the regular and tags.

Remix 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.

Remix 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.

Remix 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.

How to build and start

Start with npm install.

You can build and start with file watching using npm run dev.

Or you can do a regular build and start using npm run build and npm run start.

One Command Setup & Run

You can download and run the repo with one command to rule them all:

git clone https://github.com/clintonwoo/hackernews-remix-react.git && cd hackernews-remix-react && npm install && npm run build && npm run dev

Contributing

File an issue for ideas, conversation or feedback. Pull requests are welcome.

Community

After you ★Star this project, follow @ClintonDAnnolfo on Twitter.

Comments
  • Set title on discussions

    Set title on discussions

    Clicking a comments link on the front page leads to a page with a title of 'Item | Hacker News Clone'.

    On the real thing, the title is set to the same as the storylink text.

    opened by jspraul 1
  • Use `<Link/>` to take advantage of Remix navigation

    Use `` to take advantage of Remix navigation

    Looks like all your links (see item-title.tsx) are using the standard <a/> tag, instead of <Link/>. This is causing the browser to reload the entire page on every navigation. By using the <Link/> component, Remix will issue a client-side fetch, then render the item page.

    opened by kiliman 1
  • Setup command typo

    Setup command typo

    Hi, Wanted to point out that the folder and project name both have a typo in the setup command. react and remix should be reversed.

    Here is the diff (don't get access right to make a PR) : -git clone https://github.com/clintonwoo/hackernews-react-remix.git && cd hackernews-react-remix && npm install && npm run dev

    +git clone https://github.com/clintonwoo/hackernews-remix-react.git && cd hackernews-remix-react && npm install && npm run dev

    Cheers.

    opened by 0xLodz 1
  • Deleting Cookies

    Deleting Cookies

    Description

    I am trying to rebuild the Hacker news web app, without using a database, and store user information (username) in cookies. Using a model similar to yours, I am currently able to add the username to the cookie header, but I am unable to delete. Here is the code for the login page, specifically the action that adds the cookie:

    export async function action({ request }) {
      const session = await getSession(request.headers.get("Cookie"));
      const form = await request.formData();
      const username = form.get("name");
      const Password = form.get("password");
    
      // Login succeeded, send them to the home page.
      return redirect("http://localhost:3000/", {
        headers: {
          "Set-Cookie": username,
        },
      });
    }
    

    And here is the logout page:

    import { ActionFunction, redirect } from "@remix-run/node";
    import { getSession, destroySession } from "~/sessions";
    
    export const loader: ActionFunction = async ({ request }) => {
      const session = await getSession(request.headers.get("Cookie"));
      //await destroySession(session);
      return redirect("/login", {
        headers: { "Set-Cookie": await destroySession(session) },
      });
    };
    

    Is there anything that I might be missing?

    opened by jguepjop 2
  • add github ISSUE_TEMPLATE files

    add github ISSUE_TEMPLATE files

    What is the change?

    1. add bug_report.md to bug-report.yml to enable Github's form based issue template
      • https://youtu.be/qQE1BUkf2-s?t=23
    2. add config.yml file to help direct users to the helpful pages

    Motivation

    • encourage's bug reporter's to put more care into their bug report before submission
    • this may help maintainer's receive more detailed & higher quality bug report's
    • adds helpful tips for user's during the process of creating a bug/issue report

    Demo of Change

    this PR is similar to this one I created here for another repo recently

    • https://github.com/antvis/G6/blob/master/.github/ISSUE_TEMPLATE/bug_report.yml
    opened by cliffordfajardo 2
Owner
Clinton D'Annolfo
Passionate about writing high quality code for well designed and architected applications. Available to work (US resident). Tweet me @ClintonDAnnolfo
Clinton D'Annolfo
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 83 Jan 6, 2023
A demo app of the Hacker News website clone, which shows Next.js 12's experimental React Server Components support

A demo app of the Hacker News website clone, which shows Next.js 12's experimental React Server Components support

Vercel 681 Jan 6, 2023
Hacker News - This project was created using Vite, React, GraphQL and Apollo Client.

Hacker News A application to get your favorites links made using Apollo Client In Progress ?? Table of contents Table of contents ?? About ?? Techs ??

Brenda Profiro 5 Jun 29, 2022
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 Dec 17, 2022
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 10 Nov 24, 2022
Remix-graphql - Utilities for using GraphQL with a Remix app

remix-graphql Remix and GraphQL can live together in harmony ❤️ This package con

Thomas Heyenbrock 178 Jan 2, 2023
The IM+ application with registration area, news area, financial controlThe IM+ application with registration area, news area, financial control

The IM+ application with registration area, news area, financial controlThe IM+ application with registration area, news area, financial control

null 0 Feb 1, 2022
Alan ai news application - Conversational Voice Controlled News App

NewsReader NewsReader is a conversational voice controlled news application that

Chirag Jain 2 Jun 11, 2022
Project Remix Blog - A Simple blog built with Remix (A Full Stack React Framework) and Prisma DB

Project Remix Blog - A Simple blog built with Remix (A Full Stack React Framework) and Prisma DB

Devanshu Vashishtha 1 Jan 2, 2022
Remix-code-snippets - Speed up your Remix development with dynamic code snippets

remix-code-snippets Speed up your Remix development with dynamic code snippets.

Dylan Blokhuis 1 Dec 29, 2021
Remix Fundamentals: Get a jumpstart on Remix with this workshop

?? Remix Fundamentals Build Better websites with Remix Remix enables you to buil

Kent C. Dodds 130 Dec 10, 2022
Remix-cloudflare-prisma - An example of prisma working on cloudflare pages with Remix

Remix Cloudflare Prisma Example Developed by Jacob Paris Remix Docs Cloudflare P

Jacob Paris 70 Dec 26, 2022
Remix-seo - Collection of SEO utilities like sitemap, robots.txt, etc. for a Remix Application

Remix SEO Collection of SEO utilities like sitemap, robots.txt, etc. for a Remix

Balavishnu V J 128 Dec 21, 2022
Remix Auth is a complete open-source authentication solution for Remix.run applications.

Remix Auth Simple Authentication for Remix Features Full Server-Side Authentication Complete TypeScript Support Strategy-based Authentication Easily h

Sergio Xalambrí 1.2k Dec 27, 2022
A Fullstack Discord Clone written in Typescript.

Valkyrie A Discord clone written in TypeScript. Live Demo (Note: File Upload is disabled on the public demo to reduce hosting cost) Video Features Mes

null 224 Dec 30, 2022
A fun, simple wordle clone written in JavaScript & TypeScript.

A fun clone of the popular wordle game by the NY Times. Inspired by Reactle & Wordle clone in JavaScript. TypeScript & JavaScript versions included

Gerald Maduabuchi 8 Jun 17, 2022
Facebook Clone - A simple, responsive Facebook Clone made using Typescript and React.

Facebook Clone A simple, responsive Facebook Clone made using Typescript and React. I chose vitejs as a build tool for this project (Thanks @karanprat

Ayushi Gupta 98 Dec 18, 2022
News App created using React and NewsAPI

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 141 Jan 1, 2023
The CryptoVerse is a Cryptocurrency web application developed using Reactjs for providing the latest updates, value statistics, market cap, supply and news regarding the Cryptocurrency market.

CryptoVerse - A Crptocurrency Web Application Getting Started with Create React App This project was bootstrapped with Create React App. Available Scr

Eesha Srivastava 5 Oct 26, 2022