General Site Functionality
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.
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 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).
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.
📂 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)
📂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 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)