App development

Felidae

A news headlines scraper.

This is a Node.js scraper which sources data from Microsoft's Bing news in several categories (e.g. business, general), languages (e.g. English, German) and countries.

It is scheduled to run every few hours. The data is being saved in a PostgreSQL data base and can be retrieved using either a REST API or a GraphQL queries in a json and protobuf format.

Scraping is based on html page processing using known CSS selectors. It could easily stop working as soon as Microsoft decides to change CSS class names. The funny thing is... they never did that for the last >4 years in which the service has been running.

The origin of this scraper was to use it in the "Hangman: Guess the news" mobile game. It also proved useful for displaying current news about the planets of the Solar System in the ticker of the Solar nutshell (see: "Nutshell").

PostgreSQL, Node.js, TypeScript, GraphQL, Protobuf, OpenAPI

OpenAPI specification

GraphiQL

Try this query {headlines(lang:en,,sortby:id_desc){id,headline,timestamp,country}}


BOON Under construction

A PR platform for teams to communicate the newest developments.

A communication platform for teams to publish news about the developments delivered each sprint (or any type of time period).

Think of it as a type of a magazine, replacement for a demo meeting.

It allows to create various public and private workspaces. Within those workspaces users can create time frames (for example sprints), projects and teams, and then add posts related to those entities so that the visitors can read news grouped by them. Commenting on posts and reacting to them is possible.

Maintainers of workspaces receive tools to modify the look and feel (themes) of the application.

MongoDB, Node.js, Go, TypeScript, React.js, Material-UI

Sprint overview, default theme, light mode Sprint overview, default theme, light mode
Sprint overview, default theme, light mode

test

Sprint overview, default theme, light mode
Sprint overview, Default theme, dark mode
Sprint overview, Vintage Newspaper theme, light mode
Sprint overview, Vintage Newspaper theme, dark mode
Sprint overview, Frostic theme, light mode
Sprint overview, Frostic theme, dark mode
Comments section
Preferences
Project overview
Post page

Nutshell

Various automated slideshows (dashboards and presentations).

Grown from an initial requirement to present an overview of financial results on a TV screen, a Bloomberg like dashboard. But in reality it can cover any type of information from business through science to anything else.

The TV (or any larger screen) version provides a number of slides controlled via a player component with a slider which allows to select the slides, and a "Play/Pause" button to enable/disable automatic transitioning between the slides every N seconds.

It's easy to add new types of slideshows as the logic has been abstracted to the Slideshow class which just needs to be implemented with the specifics.

There are currently three types of demo nutshells to choose from: "Coinflow nutshell" - financial results of an imaginary steampunk company which offers both a TV version and a mobile version (designs based on Spotify and Trading212 apps), "Solar" - information about the planets of the Solar System (and uses the news headlines in the ticker scraped by the felidae service), and "Need for nutshell" - overview of the Need for Speed games franchise with some sales results.

React.js, TypeScript, Vite

Nutshell
Nutshell

Landing page

Nutshell
Coinflow slideshow
Coinflow slideshow
Coinflow slideshow
Coinflow slideshow - mobile version
Coinflow slideshow - mobile version
Coinflow slideshow - mobile version
Coinflow slideshow - mobile version
Solar system in a nutshell
Solar system in a nutshell
Need for nutshell
Need for nutshell
Need for nutshell

Dataviz for BW

React application setup based on a SAP BW oData connection proxied via a Node.js server.

A backend - frontend blueprint for creating an application with use of data from a SAP BW using an oData connection.

Contains a detailed documentation on how to set up the oData service on top of a SAP BW data warehouse.

SAP BW, oData, Node.js, TypeScript, React.js, D3.js


Navigation gauge Under construction

A simple for generating a video with a customized navigation gauge which plays a trip recorded on a .gpx file.

This tool can be used by users who record their trips on a .gpx file who later would like to present their location on a map in a video edited in a software like DaVinci Resolve.

The .gpx trip is visualized on the map and current positioning based on timestamps from the file is marked visually using user selected style

Then a video can be generated with green screen so that it can be places in a video editing software with transparency.

Target audience are content creators such as bikers or reviewers who would like to have the map location shown to viewers on their videos.

React.js, MapLibre, DaVinci Resolve

Nav gauge app

Upload a .gpx file, choose your styles and generate a video.


Hangman: Guess the news Under construction

A very well known Hangman game with a twist.

The twist is that players are guessing the actual current news headlines, rather than some entries from a fixed list of key phrases

A Flutter mobile app with a mascot called "News-o-Phil" waiting to be killed by your inability to guess current news. Phil did not make it to the prototybe yet, though.

Uses the felidae service to get the newest list of headlines to guess.

Flutter, Dart, Blender

Hangman: Guess the News - prototype
Hangman: Guess the News - prototype

Main menu - select news category and language.

Hangman: Guess the News - prototype
Hangman: Guess the News - prototype
Hangman: Guess the News - prototype
Hangman: Guess the News - prototype
Hangman: Guess the News - prototype
Phil with a newspaper
Player won - Phil is shocked
Player lost - Phil is gone

Company landing pages

Examples of animated landing pages for imaginary companies

One day I had this idea to create cool landing pages for imaginary companies everyday for a month.

I made all four of them. Then realised it's a bit of a waste of time.

Svelte, HTML, CSS


Portfolio website

This portfolio website has been made with Svelte.

Yep.

Svelte