Vue Templates Logo Vue Templates
Hackernews Nuxt Ts screenshot

Hackernews Nuxt Ts

Author Avatar Theme by Nuxt community
Updated: 10 May 2019
171 Stars

Typescript Version of HackerNews Nuxt

Github

Categories

Express Nuxt

Overview

Nuxt Hacker News TSHackerNews is a clone built with Nuxt.js and TypeScript. It serves as a showcase for best practices in developing real-life modern isomorphic web applications with Nuxt. The clone includes integrations with various tools such as TsLint for linting, Prettier for code formatting, Jest for testing, Axios for enhanced HTTP calls, and Storybook for component development.

Features

  • Server Side Rendering & Caching
  • Code Splitting
  • Single-file Vue Components
  • Real-time List Updates with FLIP Animation
  • Prefetch/Preload JS, DNS, and Data
  • Critical Path CSS
  • PWA experience using PWA Module with almost zero configuration
  • PRPL (Push, Render, Pre-cache, Lazy-load) pattern
  • Hot reloading development environment
  • TSLint and Prettier integration
  • TypeScript 3 support
  • Storybook Integration (Coming Soon)
  • Snapshot and Unit Tests with Jest and Vue-Test-Utils (Coming Soon)

Installation

To install the Nuxt Hacker News TSHackerNews, follow the steps below:

  1. Make sure you have Node.js version 6 or higher installed on your machine.
  2. Clone the repository to your local machine.
  3. Open a command line interface and navigate to the project directory.
  4. Run the following command to install the required dependencies:
npm install
  1. After the installation is complete, you can start the development server by running:
npm run dev
  1. Open your web browser and access the application at the specified address.

Summary

Nuxt Hacker News TSHackerNews is a clone of the popular Hacker News website. It is built with Nuxt.js and TypeScript, and serves as a showcase for best practices in developing modern isomorphic web applications. The clone includes various features such as server-side rendering, code splitting, real-time list updates with animation, prefetching and preloading of assets, and much more. It also integrates with popular tools like TsLint, Prettier, Jest, Axios, and Storybook for enhanced development experience.