implement Hackernews app

mjarosie · Jul 9, 2020 · 6029ca2 · 6029ca2
1 parent 6f14f64
commit 6029ca2
Show file tree

Hide file tree

Showing 6 changed files with 570 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -1,21 +1,36 @@
 # Elmish Getting Started
 
-This is a simple Fable application including an [Elmish](https://elmish.github.io/) counter. The repository is made for learning purposes and the generated Javascript output is not optimized. That said, the template shows you how easy it is to get started with Fable and Elmish using minimal configuration.
+This is a simple Fable application which enables you to browse Hackernews stories. It was implemented when completing an excercise in [Elmish Book](https://zaid-ajaj.github.io/the-elmish-book/#/chapters/commands/elmish-hackernews).
+
+The app uses [HackerNews API](https://github.com/HackerNews/API) and retrieves 4 different types of stories:
+
+- new
+- top
+- best
+- jobs
+
+Stories are loaded lazily - you can retrieve 10 more stories to be displayed with a button at the bottom of the page.
 
 ## Building and running the app
 
 First of all, start with installing the project's npm dependencies
+
 ```bash
 npm install
 ```
+
 Once this is finished, you can then build and compile the project:
-```
+
+```bash
 npm run build
 ```
+
 You can start developing the application in watch mode using the webpack development server:
-```
+
+```bash
 npm start
 ```
+
 After the first compilation is finished, navigate to http://localhost:8080 in your browser to see the application.
 
 ### VS Code

diff --git a/dist/index.html b/dist/index.html
@@ -1,9 +1,15 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
   <head>
     <title>Fable</title>
     <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.min.css" />
+    <link rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
+      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
+      crossorigin="anonymous" />
     <link rel="shortcut icon" href="fable.ico" />
   </head>
   <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,16 +2,19 @@
   "private": true,
   "scripts": {
     "start": "webpack-dev-server",
-    "build": "webpack"
+    "build": "webpack",
+    "serve": "http-server ./dist"
   },
   "dependencies": {
+    "date-fns": "^2.14.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.1.2",
     "fable-compiler": "^2.4.16",
     "fable-loader": "^2.1.8",
+    "http-server": "^0.12.3",
     "webpack": "^4.38.0",
     "webpack-cli": "^3.3.6",
     "webpack-dev-server": "^3.7.2"