Science Fetcher

Why?

This web-app holds a special place for me as it marks the beginning of my journey into development, dating all the way back to 2020. I've been lightly maintaining this, aiming to retain the majority of the original codebase (other than having to change the scraper). This approach allows me to maintain a tangible connection to where I started and serves as a point of comparison to measure how much progress I've made since those early days.

This web-app was created to fetch articles on the latest science news from Google News to aggregate science news in one place. Even though the web-app scrapes content from Google News, I wanted the articles to be provided in an alternative and more digestible manner. This is intended to be a demonstration of my full-stack development skills, being able to develop a frontend with the Bootstrap 4 CSS framework, and backend with Express.js powered by Fly.io.

How?

Frontend

The frontend was developed using HTML & CSS with the Bootstrap 4 framework alongside JavaScript for functionality. When selecting a topic, the script sends a GET request with an ID to the backend to retrieve a list and displays it on the page. On load, the home page checks if the client is visiting the site for the first time and remembers what topic was selected last in the session to display articles of. Icons are used from Font Awesome's icon kit.

Backend

The backend was developed using the Node.js runtime environment with Fly.io deploying the webapp. Express.js is used as the server framework with the Compression module serving all compressed static resources. When sending a GET request, the Axios and Cheerio modules are used on the backend to scrape content from the provided Google News URL, and send a list back to be displayed for the requested topic. Any unknown page renders a 404 HTML file to display to the user.

Changelog

2.2.2 (2023-09-03)

  • Moved app deployment to Fly.io
  • Changed API call to correctly use GET instead of POST
  • Changed internal scraping logic
  • Updated some frontend scripting logic
  • Updated HTML of some pages

2.2.1 (2020-12-29)

  • Changed toggler-icon border colors to be light
  • Removed og:image tag
  • Fixed formatting issue in changelog

2.2.0 (2020-09-02)

  • Added badge icons to topics
  • Changed toggler icons for topics and about page contents navigation bars
  • Improved articles: uses Bootstrap's media objects, image are on the left, and new spinner
  • Improved footer: darker background, added icons, added technologies section, and removed navigation section
  • Improved performance and security by adding noreferrer to external links
  • Improved performance by preloading scripts and styles
  • Improved contact page by centering text
  • Improved about page's "How?" paragraphs
  • Improved on-page anchors on about page in stylesheet
  • Fixed bug allowing topics to be selected with keyboard focusing
  • Fixed technology topic issue by using different link
  • Fixed bug that caused inability to leave 404 page when using about and contact links

2.1.1 (2020-08-27)

  • Added warning badge for technology topic yielding less results than expected
  • Changed contact and 404 card to not stretch to the entire page
  • Changed alt attribute to not be empty on load
  • Fixed exploit involving sending unwanted URLs to backend by adding escape code to URL and moving topic map to backend

2.1.0 (2020-08-26)

  • Added thumbnails to articles
  • Added feature to prevent fetching while already fetching
  • Changed topic selection to be a collapsible menu
  • Changed article to be clickable
  • Changed date to display time since posted
  • Changed article list and header to not stretch to the entire page
  • Changed about page navigation bar to not stretch to the entire page
  • Improved webscraping code: RSS feed is no longer used, error handling, and storing data in objects
  • Improved 404 page
  • Improved error handling for missing data (connection error)
  • Improved script: changed values for readability, cleaner display labels, and session storage improvement
  • Fixed open graph title for home page
  • Removed some obsolete styles in stylesheet

2.0.1 (2020-08-23)

  • Added sitemap link to footer on home page
  • Added error handling for connection error and missing data
  • Added more SEOs: removed X-Powered-By header and heading tag improvements
  • Improved favicons with compressed images, site names, and theme colors
  • Fixed security issue allowing access to all root files by allowing access to files only in public directory

2.0.0 (2020-08-21)

  • Redesigned entire site with Bootstrap 4
  • Added 6 topics to choose from: general, space, tech, biology, computing, and physics
  • Added date underneath article titles
  • Added footer to home page
  • Added and improved about page contents
  • Added feature to fetch articles when page loads
  • Added post request to backend for getting articles
  • Added local storage for removing first visit guide
  • Added session storage for remembering last selected button
  • Added 404 page to backend instead of redirecting to home page
  • Added more SEOs: favicons, social media, sitemap
  • Improved script.js (no more bundled code)
  • Improved fetching function to get articles from backend
  • Improved style.css to work with Bootstrap
  • Improved backend by serving compressed responses
  • Changed favicon design
  • Changed page titles
  • Removed obsolete meta tags

1.1.0 (2020-08-09)

  • Added text stroke and shadows to headers
  • Added gradient to site header
  • Added underline to links when hovered over

1.0.2 (2020-08-08)

  • Added non-secure to secure redirect
  • Added 404 to home page redirect

1.0.1 (2020-08-08)

  • Added canonical tags
  • Added shadow for navigation bar
  • Added feature to remove .html extension in URLs
  • Added comment for bundled info about script.js

1.0.0 (2020-08-07)

  • Clicking button fetches 15 articles with links
  • 3 pages: home, about (2 sections), and contact (mail to email)
  • Navigation bar fixed to the bottom