Role

website

Tech

Carlito


I was the first engineer on the team and developed the first fully functioning web application which was already used by major clients of the public sector. We then scaled to a team of 8 engineers in the course of two years. Most of the APIs and frontend apps I developed there are still in use daily and serve a huge customer base.


Cloud-based photogrametry platform for the construction industry

Founded

Photogram


I've developed this tool prior to the existence of monorepo tools like NX. It is essentially opinionated tool to develop React and Node.js applications within a monorepository, using TypeScript.

It was used by all my startups and some agencies. As soon as NX become more stable, we switched from Cantara to NX, but it served us well for many years.


TypeScript, Node.js & React Monorepo Devtools

GitHub

Cantara

3-dimensional, generative soundscapes platform and editor for better focus and sleep

Soundescape.io


A Visual Gatsby.js Jamstack Website Builder with a ZIP export functionality.

<div class="video-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/QbT6fpgY210?si=dU0sD4vvRwZsFsNx?controls=0&mute=1&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>


Year

Status

Statikk


A web based loopstation for musicians of every type. Find out more in the Github repo.

The successor of the Soundcycle project is called [_Ciclo_](https://github.com/scriptify/ciclo), which is a revamped version of the app.

![Ciclo Screenshot](/images/project/Ciclo.png)

This was my first larger web app project. It also taught me a lot about the web audio API.


Try it out

Soundcycle / Ciclo


This was my very first startup experience.

We aimed to create AirBnB Experiences before AirBnB Experiences existed. We got some funding from the local government, as we won the first prize in a startup competition.

After two years of developing a P2P platform for experience bookings with a fully working payment system that distributed funds across experience providers, we had to close down. It was the first time I realized what they actually mean by "build it, and they will come" and why that's not a good idea. We just didn't have a good enough distribution strategy.

I learned a ton in those two years, both from the technical and from the business side of things.


role

Realife

# sountility
### a collection of useful utility libraries for the webaudio-api

This repository contains many different packages which I created in order to use them in my audio software projects. Initially, those packages were all split and had there own repository. But as you can probably immagine, it's a pain to maintain them in that way. As soon as I realized that, I tried to find a way how I could manage them more easily. And sountility is a good answer for me.

## Packages
### Here's a list of all packages with a short description.
#### [webaudio-chnl](./packages/webaudio-chnl/README.md)
I needed something with a LOT of audio effects integrated which can be manipulated in many different aspects. And I needed to use this in many different ways: Every native AudioNode should be able to connect to it as it would be a normal AudioNode, but also other Chnls should be able to connect to another Chnl.
So I could simply and intuitively create audio graphs with a set of effects.
No matter if I connect a song, mic input or even a synthesizer.
#### [webaudio-effect-unit](./packages/webaudio-effect-unit/README.md)
Sometimes you want to include some effects or other audioprocessors in an audio graph which can be enabled and disabled.
E.g. a lowpass which can be toggled by the user.
This is currently not directly possible with the Web Audio API.
So The effect unit does this for you.
Additionally, when you create an audio effect with the EffectUnit, you always define clear interfaces which manipulate the effect. Together with some metadata you provide, this can be very powerful, especially if you have a set of effects and a User Interface where the values of those effects should be editable.
#### [webaudio-effect-units-collection](./packages/webaudio-effect-units-collection/README.md)
An effects collection based on the webaudio-effect-unit.
#### [audiobufferchnl](./packages/audiobufferchnl/README.md)
This package extends the chnl module and adds the possibility to turn a webaudio BufferSourceNode into a chnl.
#### [audiochnl](./packages/audiochnl/README.md)
It's an extension of the chnl module: This module is made for playing, pausing, stopping and manipulating Audio-objects.
#### [audiolooper](./packages/audiolooper/README.md)
An audiolooper let's you loop your audiotracks in a very simple and intuitive way.
The looping algorithm keeps the tracks automatically in sync.
#### [recordy](./packages/recordy/README.md)
This module abstracts away the logic needed to record audio in your browser.
Since it's based on the chnl module, a lot of effects can be added to the input.
#### [soundcyclejs](./packages/soundcyclejs/README.md)
This library combines all of the modules of the __sountility__ collection and creates a full-featured looping library.
#### [wmstr](./packages/wmstr/README.md)
The scope of this module is to manage the input of many audio-channels in one instance.
It's just a simple extension of the chnl module, with the only difference that you can record all the input to it and output the recorded data directly to a file.
#### [wrecorder](./packages/wrecorder/README.md)
This is a fork of mattdiamonds recorderjs. Due the fact that he dropped support on this project, i forked my own copy to have the possibility to fix bugs and add customizations.

## Build instructions
It's easy to build a sountility package.
Just use the following command:
```bash
npm run start:prod -- <package-name>
```
Replace _package-name_ with one of the packages mentioned above.


Sountility


This is the predecessor of the [Cantara](/project/Cantara) devtools project.


Crana


Connect your Google Photos and Spotify Account, select a photo album and a Spotify playlist, and the web app will create an interactive photo album with music from the time the photo was taken. Intended as a Christmas present.


Combine Google Photos and your Spotify Account to create a Photobook!

github

Spotify Photobook


As a client project during my time as a freelancer, I was developing an Electron-based sports betting software that used Puppeteer to scrape data from all relevant sports betting sites and place bets automatically when it found relevant value bets. It is still in use and running today.
This made me pretty good at Electron and Web Scraping in general.


Automated value bet detector and executor

Sportsbetting Bot

# Recordy
## Recording for browsers - the easy way
This module abstracts away the logic needed to record audio in your browser.
Since it's based on the [Chnl](https://github.com/scriptify/Chnl) module, a lot of effects can be added to the input. For information about this aspect just have a look a the documentation of Chnl.
You can treat any Recordy-instance as a Chnl, because Recordy is extending Chnl.
To record the input, I'm using a fork of the popular recorder.js library from Matt Diamond, [wrecorder](https://github.com/scriptify/Wrecorder), which allows us to record the output of WebAudio-nodes. Big thanks for this awesome work!

__Attention__: Since the [webaudio-effect-unit](https://github.com/scriptify/webaudio-effect-unit) has reached v.1.1.0, the way how the effects work has changed. Have a look at it's repository for more details. Make sure to do this BEFORE you update. If you have difficulties or questions, just open an issue! I am always glad if I can help. :smile:

## Installation
The package is hosted on npm. You can consume it with any package manager supporting npm packages.
```bash
npm i recordy -S
```

## Usage
### Creating an instance
```javascript
new Recordy(audioCtx)
```

To create a Recordy-instance, you have to pass exactly one argument to the constructor: an AudioContext object.
Now, you can request audio input(have a look at the example for more information).

### Getting input
```javascript
.getInput()
```

This method needs to be executed before you can start recording. It asynchronously requests audio input. So the return value is a __Promise__, which returns a __boolean__ value. This value evaluates to true if the request for the microphone/audio-input was successfully and to false if it wasn't.

### Start recording
```javascript
.startRecording()
```

This method is really self-explanatory.
Recody will record until you call the .stopRecording(...) method.

### Stop recording
```javascript
.stopRecording(asAudioObject)
```

This methods stops a previously started recording.
It accepts exactly one parameter: a __boolean__.
If this boolean evaluates to true, this method will return a Promise which returns an Audio-object with the recorded track.
Otherwise, it returns a Promise which returns the plain binary data(blob) of the recorded track.

### Outputting to the speakers
```javascript
.toSpeaker(gainValue)
```

Recordy allows you to directly output the audio-input to the speakers, so you could directly hear the effects you apply etc. The method accepts exactly one parameter: The volume of the output. This can be a number from 0 - 1. If you set a value of 0 it's muted, if you set a value of 1 it's the maximal possible volume.
__ATTENTION:__ Due to the lack of support of advanced and latency-free audio protocols like ASIO(...) in the actual browsers, there's a quite high latency between input and output (it's clearly noticeable).
Therefore, it's muted by default.


# Example

This is a simple example which records an one second long track. The track gets returned as an Audio-object so it can be directly played. Also, the input is directly outputted to the speakers with a gain of 0.4.
In addition, some functionality of the Chnl module was applied: The bitcrusher effect was enabled.

```javascript
const audioCtx = new AudioContext();
const r = new Recordy(audioCtx);

r.getInput()
  .then(val => {
    r.startRecording();

    window.setTimeout(() => {
      r.stopRecording(true)
        .then(audio => {
          audio.play();
        });
    }, 1000);
    r.toSpeaker(0.4);
    r.effects.bitcrusher.enable();
  });
```


An NPM package to record audio in your browser and apply various effects to it

Recordy

<div style="text-align: center;">
    <img src="https://github.com/scriptify/NEAR/blob/master/docs/near-header.png?raw=true" />
</div>

(This project was originally created as an application to an university)

# The problem
People often complain about the fact, that humanity in general is getting more and more unsocial because of the wide spread use of distracting smartphones, which keep us from talking to the person sitting next to us in the bus or having a chat with that interesting person in the subway during the daily way to work. And I think that this problem is indeed there. I want to help everyone to have some great conversations during the train ride, the bus ride, at the airport and so on. And I don't think that technology on its core is the problem. It's how people use it. We can use it to play satisfying games, alone, to scroll through our Twitter feed, alone. Or we could use it to come in touch with people with similar interests in a more direct and simpler way than ever. Through the correct use of technology. So I would like to use the digital world to bring people back in its physical counterpart, in a very unobtrusive and direct way. I'm particularly interested in solving this problem because as a frequent user of public transport, I face this problem very often in my everydaylife. And it would be just too nice to have an interesting chat every time I am in a bus, waiting for a train or just sitting somewhere alone. And the more you talk to people, the opener you become. So that's also a very important aspect: Using technology to create a widespread conversation culture never seen before in the real world. And the opener the people, the better the world we live in. That's why I've chosen to solve this problem.

# The solution: NEAR
The solution to this problem is an easy to use web application (with a focus on mobile devices).
## The concept
When a user wants to have a chat with someone, she simply opens up the web application in a browser and logs in. During this step, some information about the user is necessary, like the name, interests and a profile picture. After logging in, the current position of the user is used to find people nearby. Now, the user can select another user she would like to have a talk with. The selected user then receives a request, which can be accepted or denied. If accepted, the users can have a short chat in the "digital world" to agree upon a place to meet. After that, the conversation in the real, physical world can start.
## How did I come up with it?
I think that software allows us to solve problems in a way that was unimaginable before we had the possibility to create software like today. The only border is your imagination. And this problem is no exception. With a concept like this, problems can be solved in a very efficient way and maybe revolutionize this specific process. I think that there's no better solution for this problem than a technological one. Additionally, implementing the concept as a webapp makes it easyly accessible for everyone without the tedious process of installing an app. Working by default on a wide variety of devices, you can directly start talking to people.
## The implementation of a prototype
I have developed a prototype which implements most of the features described in the concept.
I deployed it for testing purpose, you can access is via this URL: https://near-webapp.herokuapp.com/
### Usage
Here I will describe how NEAR can be used to find people nearby and have a chat with them. The tutorial doesn't explain how to proceed after finding a conversation partner, as this is something the users have to do for their own.

#### Step 1: Open up the webapp by navigating to https://near-webapp.herokuapp.com/ with your favorite browser.
<div style="margin: 0 auto;">
    <img src="https://github.com/scriptify/NEAR/blob/master/docs/steps/step-1.png?raw=true" width="330" />
</div>

#### Step 2: Enter some information about yourself.
<div style="margin: 0 auto;">
    <img src="https://github.com/scriptify/NEAR/blob/master/docs/steps/step-2.png?raw=true" width="330" />
</div>

#### Step 3: Click on the button at the bottom ("Find people near you").

#### Step 4: Allow the web app to track your current GPS position, so that people near you can be detected.
<div style="margin: 0 auto;">
    <img src="https://github.com/scriptify/NEAR/blob/master/docs/steps/step-4.png?raw=true" width="330" />
</div>

#### Step 5: Select a person to have a chat with.

Now you can see all the people nearby using NEAR at the moment.

<div style="margin: 0 auto;">
    <img src="https://github.com/scriptify/NEAR/blob/master/docs/steps/step-5.png?raw=true" style="width: 330px; height: auto;" />
</div>

This is what other users see:
<div style="margin: 0 auto;">
    <img src="https://github.com/scriptify/NEAR/blob/master/docs/steps/step-5-2.png?raw=true" style="width: 330px; height: auto;" />
</div>

Let's have a talk with Laura. To ask her if she would like to have a chat, just tap the according user.

#### Step 6: Confirm (or not).
<div style="margin: 0 auto;">
    <img src="https://github.com/scriptify/NEAR/blob/master/docs/steps/step-6.png?raw=true" style="width: 330px; height: auto;" />
</div>

#### Step 7: Wait for an answer.
<div style="margin: 0 auto;">
    <img src="https://github.com/scriptify/NEAR/blob/master/docs/steps/step-7.png?raw=true" style="width: 330px; height: auto;" />
</div>

The other user needs to confirm if she would like to have a talk:
<div style="margin: 0 auto;">
    <img src="https://github.com/scriptify/NEAR/blob/master/docs/steps/step-7-2.png?raw=true" style="width: 330px; height: auto;" />
</div>

#### Step 8: After the other user accepted your request, agree upon a place to meet.
<div style="margin: 0 auto;">
    <img src="https://github.com/scriptify/NEAR/blob/master/docs/steps/step-8.png?raw=true" style="width: 330px; height: auto;" />
</div>

#### Step 9: (Hopefully) Have a nice talk!

You can also test it yourself if you ask a friend to use NEAR next to you (because right now, the number of people using it is limited).

### Technologies used
For the fronted, the following technologies were used:
- React as the view library
- MobX for state management
- Babel for transpiling ESNext to browser compatible ES5
- Webpack for module bundling

For the backend, I've used those technologies:
- node.js
- MongoDB as the database (via Mongoose)
- socket.io for realtime server-client communication

As this is a prototype, there would be still some work to do to bring up a ready-for-production application, but the chosen technologies are a solid foundation for that.

Currently, I use unsplash to get the displayed profile images based upon the selected gender (as it is just a prototype).
### Missing features / roadmap
Here's a list of the missing features whose absence makes it a prototype:
- Login / Register
    - Currently, user accounts are only persisted temporarily in the database. As soon as you close the app or loose the connection, you account gets deleted. In the future, users should be able to create a permanently saved profile and also login through their social media accounts.
- Interests-categories
    - Instead of using pure text to determine what your interests are, predefined categories should be used. The user should specify at least 5 categories she or he is interested in and also specify how important this specific category is for the user from a scale of e.g. 1-5. The reason for this is quite straightforward: NEAR could match your interests with the people near you and emphasize people with similar interests.
- User-Ratings
    - At the end of a conversation, each user should be able to give the other user a rating: A number ranging from 1 (a very bad conversation partner) to 5 (an excellent conversation partner). This rating would then show up in the list of users near you. This has two key advantages: 
        1. Selecting a conversation partner is now also based on the experiences other users made with this user.
        2. It acts as an additional motivation to have nice and constructive conversations.
    
        I would say that this feature is an experimental one, as it could potentially have the opposite effect: Users feeling under pressure because of their rating/the rating becoming the highest priority, instead of having a good conversation or meeting new interesting people.

- Leveraging the full power of Progressive Web Apps (PWAs)
    - In the age of the modern web, PWAs offer a lot of functionalities, which were previously exclusively available for native apps. Those functionalities can bring the user experience of web applications to another level. Especially useful for NEAR would be:
        - Push Notifications
            - Whenever you come in an area with people who share the same interests like you do, you get notified.
            - If someone you previously had a good conversation with is nearby, you get notified.
            - ...
        - Add-to-homescreen
            - Users could add NEAR to their homescreen, making it faster accessible.
- Better desktop version
    - Currently, if you open up NEAR on a bigger screen, it doesn't use the available space efficiently and isn't very user-friendly. Although NEAR will be mainly used on smartphones, PC users should still be able to use NEAR in an user-friendly manner.

Of course there would be a wide variety possible features I didn't mention here. But from my perspective, those are the most important ones. From a technical point of view, many decisions would still have to be made, but I won't go into detail about that now.
## Is NEAR the best possible solution?
I don't know if NEAR is the best solution to this problem, but it's the best solution which came into my mind, as it is a very efficient and unobtrusive way to get in touch with people nearby. But I think the only way to really find out if NEAR is the best solution to this problem is becoming it widely spread on the world and heavily used by a huge number of people. So the journey doesn't end here.

Find people NEAR you: A React and node.js based app using location tracking.

NEAR


A friend of mine, who's way more into crypto than me, talked me into doing an NFT project together. Honestly, I was pretty hesitant at first because NFTs always seemed a bit sketchy to me.

I ended setting up the whole online sales process on the Cardano Blockchain, which was kind of a wild ride since there weren't many dev tools or libraries around at that time. We also made this cool SVG generator that whipped up the actual NFTs.

The whole thing turned out to be a pretty fun journey. I got to learn a ton about how most crypto projects work, and it turns out, this whole 'decentralized' buzz was not always what it's advertised to be. In the end, what you have is an immutable, decentralized shared database, which is accessed from centralized server instances. Besides immutability and transaction tracking, we already had similar P2P concepts with Torrents or now IPFS (and yes, I know the difference very well, but if we are honest, NFTs in that form are not the right use case for crypto).

Anyway, we ended up selling over 4000 NFTs, which I'd call a success.


Projects

Carlito

Photogram

Cantara

Soundescape.io

Statikk

Soundcycle / Ciclo