This project was created as part of my web development studies at Mid Sweden University. The focus was on mashups and API integration. Powered by JavaScript, SCSS, Parcel, and Git. It features responsive design, API mashups and automated deployment.
-
✅ API Integration: Integrated multiple APIs to fetch real-time data for programming languages and GitHub repositories.
-
✅ Modal Popups: Added modal popups to display additional information (e.g., programming languages and Wikipedia summaries).
-
✅ Responsive Design: The app is fully responsive, offering seamless use on both desktop and mobile devices.
-
🔍 Focus on Performance: Optimized load times by minimizing unnecessary API calls and implementing lazy loading where applicable.
-
🔍 Accessibility: Implemented ARIA attributes and ensured that the application is usable for screen reader users and keyboard navigation.
-
🔍 Modularity: The code is organized into modules for better maintainability and scalability.
- HTML: For structure and content.
- CSS / SCSS: For styling with responsive design using Flexbox and Grid.
- JavaScript: Main scripting language used to fetch API data and manipulate the DOM.
- Parcel: Used as the build tool to bundle assets and automate deployment.
- Netlify: For automated deployment of the web application.
-
Clone the repository:
git clone https://github.com/yourusername/techtrends.git -
Navigate to the project directory:
cd techtrends -
Install dependencies:
npm install -
Run the development server:
npm run dev
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.
This mashup uses the following APIs
- GitHub REST API
- Hacker News API
- MediaWiki Action API Wikipedia
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).
- ✅ Dependabot active
- ✅ Security policy configured
- ✅ Automatic CodeQL analysis
MIT – see LICENSE.md for details.