About TechTrends

TechTrends is a mashup web app that reveals what’s trending in the tech world and where, based on real-time GitHub activity and Hacker News discussions. It helps tech enthusiasts discover interesting topics, emerging technologies, relevant news, and recently created code. By combining data from two major developer platforms, TechTrends aims to inspire exploration of what’s hot, where it’s happening, and why it matters.

My Mashup site

What is a Mashup site?

A mashup is a type of web app that combines data or functionality from two or more external sources to create something new and useful. Instead of building everything from scratch, it reuses existing APIs and blends them into a seamless, interactive experience. A good mashup feels like a single app, even though it's built by combining several services behind the scenes.

This mashup uses the following APIs

  • GitHub REST API
  • Hacker News API THN logotype - The Hacker News
  • MediaWiki Action API Wikipedia logotype

GitHub is the world’s largest platform for developers to host, review, and collaborate on code. It provides access to millions of repositories and open source projects. Using the GitHub REST API, we can fetch real-time data such as trending repositories, author details, programming languages, and star counts.

Hacker News is a social news platform focused on technology, startups, and programming. It is run by Y Combinator and allows users to post, upvote, and comment on tech-related articles. With the Hacker News Firebase API, we can retrieve posts, comments, timestamps, and article metadata in real time.

Wikipedia is a free, collaborative online encyclopedia with content created and maintained by volunteers. It contains structured and unstructured information across nearly every topic. I used the MediaWiki Action API to query terms used in GitHub's repo data to get a new search result in a popup/modal (see the rainbow-colored language button in almost any GitHub repo card).

About the Programmer

I'm Sara Sjödin Scolari, a developer passionate about turning complex data into clear, meaningful experiences. This mashup was created as a hands-on exploration of how APIs can be securely combined, visualized, and styled using modern web technologies. It gave me the opportunity to deepen my skills in areas like responsive design, accessibility, and build automation with tools like Parcel, SCSS, and vanilla JavaScript — all without using frontend frameworks.

Portrait of Sara Sjödin Scolari
I'm Sara, a passionate developer.

Flowcharts – Site Overview and Module Logic

General Site Functionality

Flowchart showing the general functionalities of the TechTrend mashup site
A high-level overview of how the site loads, handles user actions, triggers API calls, and renders results.

JavaScript Module Flow

Flowchart showing how some JavaScript modules are imported and executed in the app
A technical view of how JS modules are loaded, initialized, and separated by DOM dependency.

API Structures

GitHub

  
  📂 GitHub API link searching for "Java"
  ├── total_count: (number - total matching repositories)
  ├── incomplete_results: (boolean - true if some results are missing)
  └── items: (array of repository objects)
      ├── id: (number - unique repo ID)
      ├── node_id: (string - global GraphQL ID)
      ├── name: (string - repo name, e.g. "react")
      ├── full_name: (string - "owner/repo", e.g. "facebook/react")
      ├── owner: (object)
      │   ├── login: (string - username)
      │   ├── id: (number)
      │   ├── avatar_url: (string - image URL)
      │   └── html_url: (string - link to profile)
      ├── html_url: (string - link to repo)
      ├── description: (string - repo description)
      ├── fork: (boolean - true if it's a fork)
      ├── created_at: (string - ISO 8601 date)
      ├── updated_at: (string - ISO 8601 date)
      ├── pushed_at: (string - ISO 8601 date)
      ├── stargazers_count: (number - stars)
      ├── watchers_count: (number - watchers)
      ├── language: (string - main language, e.g. "Java")
      ├── forks_count: (number)
      ├── open_issues_count: (number)
      ├── license: (object or null)
      │   └── name: (string - license name)
      └── topics: (array of strings - requires preview header to show)
  
  

Hacker News

  
  📂Algolia API link searching for "Java"
  ├── hits: (array of objects)
  │   ├─  _highlightResult
  │   │     ├── author: object
  │   │     ├── title: object
  │   │     └── url: object
  │   ├── _tags: (array of strings)
  │   ├── author: (string)
  │   ├── children: (array of numbers)
  │   ├── created_at: (string - ISO 8601 date)
  │   ├── created_at_i: (number - Unix timestamp)
  │   ├── num_comments: (number)
  │   ├── objectID: (string)
  │   ├── points: (number)
  │   ├── story_id: (number)
  │   ├── title: (string)
  │   ├── updated_at: (string - ISO 8601 date)
  │   └── url: (string)
  ├── hitsPerPage: (number - max 20 hits per page)
  ├── nbHits: (number - total results that match the search)
  ├── nbPages: (number - total max pages = 50)
  ├── page: (number - current page index)
  ├── params: (string - search string parameters)
  ├── processingTimeMS: (number - milliseconds to process search)
  └── query: (string - the actual search word used)
  
  

Wikipedia

  
  📂 Wikipedia API link searching for "Java"
  ├── batchcomplete: (string - "true" if batch is complete)
  ├── continue: (object - for pagination)
  │   └── sroffset: (number - offset for next page)
  └── query
      └── search: (array of search result objects)
          ├── ns: (number - namespace, 0 = main/articles)
          ├── title: (string - article title)
          ├── pageid: (number - unique ID for the page)
          ├── size: (number - page size in bytes)
          ├── wordcount: (number - number of words)
          ├── snippet: (string - HTML fragment of matched text)
          ├── timestamp: (string - ISO 8601 date last edited)
  
  

My conclusions

Breaking up the code according to separate concerns helps with clarity and maintenance, but can create challenges with state management and dependencies.

The first time you create a certain type of site involves many challenges, from design details to better understanding user needs.
It’s all about adapting and iterating.

The time planning may not have been realistic, but it’s been an incredibly valuable learning experience. Sure, it’s taken longer, but the journey has been insightful and fun.

Behind the scenes

I gained valuable insights into how and when a web application loads its resources, especially after working on flowcharts (see images above) to better understand the loading process and the flow of data.

I’m also really pleased that I took the time to dive deeper into planning ARIA attributes, inline SVG animations, social meta tags, and began expanding my knowledge of implementing modals. Not everything is visible in the final product, but maybe in the next one?