Functional News

A side-project by Stel Abrego

What?

This is a clone of Hacker News.

Feature parity:

Feature	Hacker News	Functional News
Signup	✅	✅
Login	✅	✅
Submit Articles	✅	✅
Upvote Articles	✅	✅
See "Hottest" Articles	✅	✅
See Newest Articles	✅	✅
Comment on Articles	✅	✅
See Article Comments	✅	✅
Amazing Autogenerated Usernames	⛔	✅
Comment on Comments	✅	⛔
Upvote Comments	✅	⛔
Post a question	✅	⛔
See Job Postings	✅	⛔

Why?

I made this mostly to showcase my dev skills. But it would be cool if people used it! :) Ping me if you'd like to see a feature added.

How?

I'm glad you asked! Here are the tools I used to make this web app come together:

• Clojure: The language used to create the web app
• SCSS: The instructions used to style the interface
• PostgreSQL: The database used to store the app state
• NixOS: The operating system used to host the app on a VM in the cloud

Clojure

The star of the show! Here is the structural overview of the Clojure code:

.
|- deps.edn (Clojure tooling headquarters, declare dependencies and useful aliases)
|- bb.edn (Babashka headquarters, used to run scripts for REPL, Sass, and Postgres tasks)
|- dev
   |- user.clj (Code that executes at the beginning of a REPL session when developing)
|- src/codes/stel/functional_news
   |- handler.clj (Reitit router location, and all of the router's handlers)
   |- state.clj (Using next.jdbc, interact with Postgres and get/update the current app state)
   |- views.clj (Using hiccup, create html responses to be consumed by the handlers)
   |- util.clj (General functions go here to be used by all other namespaces)
|- test/codes/stel/functional_news
   |- state_test.clj (Some tests for the state)
   |- handler_test.clj (Some tests for the handlers)

SCSS

Making things pretty! Here is the structural overview of the SCSS code:

.
|- resources
   |- scss
      |- main.scss (Monolithic stylesheet for all app styling)
      |- _minireset.scss (A browser styling reset from the css wizard @jgthms)
   |- public/assets/css
      |- main.css (Compiled SCSS, ready to be served to the browser)
   |- svg
      |- love.svg (A simple heart SVG from feather icon used for the upvote button)

Postgres

Abolish the state! Wait no not that state! Here is the structural overview of the PostgreSQL code:

.
|- resources
   |- sql
      |- schema.sql (The SQL used to initialize the necessary tables in the PostgreSQL database, as well as initialize functions used for the "hot" algorithm)

By Stel Abrego 2021