Software

The following displays software projects I have built when being trained to become a full stack web developer.
On top are the bigger projects followed by medium-sized and smaller projects.

Social Network

screenshot of social Network Kite.Inc displaying some search results

Facebook-inspired single-page-application (SPA)

Tech stack: React & Redux, Node, Express, PostgreSQL, Socket.io, Amazon S3 and SES, CSS, HTML

Features: Registrierung, Login, persönliches Profil mit Bio- und Bild-Upload, Senden, Empfangen und Annehmen von Freundschaftsanfragen, Freundschaft beenden, Gespräche in einem Chat-Raum führen, Anzeige der letzten 3 registrierten Benutzer:innen, Suche nach Benutzer:innen mit Vor- und Nachnamen, Anzeigen von Freund:innen von Freund:innen, Abmelden

The code on GitHub

More info

Benutzer:innen können einem Sozialen Netzwerk beitreten, in diesem Fall einem für inklusive Kitesurfing-Communities.

A high priority is on conditional rendering, security issues (password hashing, protection against SQL-injection, CSRF- and XSS-attacks, reset code by email) and a differentiated error handling (different error messages get displayed, e.g. if the email is not in the database, the retyped password does not match the first password or the input fields are left empty) in the register, login, and reset password components.

Petition

screenshot of petition against algorithmic bias displaying the register site

Online-petition against algorithmic bias

Tech stack: Express handlebars, Node, PostgreSQL, jQuery, CSS, HTML

Features: Unterstützer:innen können sich registrieren, einloggen, ihre Profilinformationen aktualisieren, unterschreiben, die Unterschrift wieder zurückziehen, Mitunterzeichnende nach Ort sortiert anzeigen lassen, sich abmelden

The code on GitHub

More info

Diese Petition plädiert für die Unterzeichnung der Algo.Rules und gegen algorithmische Diskriminierung. Je nachdem, ob sich Benutzer:innen registrieren und unterschreiben, werden ihnen unterschiedliche Seiten angezeigt. Wenn sie unterzeichnen, werden andere Unterzeichnende, deren Homepages, ihr Alter und ihre Stadt angezeigt.

Ich habe viel über Datenfluss gelernt, die Arbeit mit Session-Cookies, Get- und Post-Routen und wie man sie mit Supertest testet. Ich habe auch mit promises, Passwort-Hashing und inserts, updates, upserts und deletes in der Datenbank gearbeitet. Besonders herausfordernd fand ich die Unterschrift mit canvas und das konditionale Bearbeiten des Benutzer:innen-Profils.

The site has a differentiated error-handling and is protected against SQL-injection, clickjacking, XSS- and CSRF-attacks.

up-arrow to jump to the top of the page

Imageboard

screenshot of imageboard graffiti and street art displaying landing page

Instagram-inspired single-page-application (SPA)

Tech stack: Vue, Node, Express, PostgreSQL, Amazon S3, Jest, CSS, HTML

Features: upload of images with title, description and username, each image can be clicked and displayed in large with more info and the possibility to comment and also delete the image, more images can be loaded

The code on GitHub

More info

Jede:r kann Bilder ihrer Wahl hochladen; das Thema dieses Imageboards ist Graffiti und Street Art.

I learned about Vue.js and working with state, un/mounting, dynamic routing, click handlers, event-emitters and watchers. The imageboard is protected against SQL-injection, clickjacking, XSS- and CSRF-attacks.

Kaleidoscope

screenshot of Kaleidoscope displaying the landing page with all the projects

My smaller and medium-sized projects

Tech stack: Express handlebars, CSS, HTML

Features: Display of all projects, description-site for each project

The code on GitHub

Resizable Panes

screenshot of resizable panes

Features: Resize pane with slider, display one image or the other

More info

2 images blending into each other, usually used for before-after-images. I used it to commemorate my great-grandmother Emilie Rau. If you click on the white slider in the middle and slide it to the left you will see more of the image on the right-hand side and vice versa. Programming-wise I used mousedown, mousemove and mouseup events and offset().left became a good friend. It was difficult to end the sliding within the boundaries of the pane.

Spotify Search

screenshot of spotify search, displaying search results for 'monae'

Features: Spotify-Datenbank über API durchsuchen, Album/Künstler:in mit verlinktem Cover und Namen anzeigen, mehr Daten durch Button oder Endlos-Scroll laden

More info

Still not having a Spotify account myself, nonetheless I programmed a user interface to search via an API the spotify database. When you search for an artist or album the first 20 search items are displayed with an image of the album and the name of the artist. If you've reached the bottom, you can click 'More' to load the next 20 items. I also added infinite scroll. I used jQuery, clickhandlers, several ajax 'GET'-requests, CSS flexbox and played with pseudo-selectors - fun! I found it quite difficult to figure out the order when to call which function and that they don't interfere with each other. In the end I managed and if you click on the link below you have an unlimited supply of search results - hopefully YOU have a spotify account...

screenshot of kitty carousel displaying one kitty sliding to the left and one another coming in from the right

Features: Watch kitties carouseling, pick a specific image to be displayed again

More info

4 kitty-images move from right to left in an endless loop, one image per second. You can also pick a specific image by clicking on the corresponding white dot. Timing and space was important to program the carousel, including the addition and removal of querySelectors, eventListeners and clickHandlers. It was the first time I worked with CSS-transitions. It's cute, ain't it? Click on the link to watch the kitties carouseling...

Ticker

screenshot of ticker running

Features: Get the latest news displayed, click if you are interested

More info

Tickers are a bit outdated, but a good programming exercise. Mine runs from right to left, and if you mouseover on one of the titles the ticker stops running, the hyperlink becomes blue and underlined and if clicked the desired information opens in a new tab. The programming is in vanilla JavaScript with event listeners, mouseovers, mouseouts, offsetWidth and AnimationFrames among other things. If you wanna deep dive into my ticker you get to read all my texts that got translated into English... In a later exercise we added a backend and fetched live data from existing twitter-accounts through the twitter-API using tokens.

Local Storage

screenshot of local storage project

Features: Write a message and save it in local storage, display and/or delete message

More info

Working with local storage was fun. If you write something in the text field and click the button 'Keep it a secret!' the text disappears and the button cannot be clicked again (to keep what was saved to local storage). The button left to this ('Tell me the secret!') reveals what was saved, even after the browser was closed. The last button ('I don't trust you anymore - forget my secret!') clears the local storage and the console. I worked with jQuery using click handlers and try-catch error-handling.

JSON-validator

screenshot of JSON-validator displaying vald JSON in green

Features: Test if data is JSON or not

More info

This simple validation test tells you if you have JSON or not. Simply copy-paste in the textfield and hit the 'Validate JSON' button. If you have JSON, the border of the textfield turns into green and a 'Valid JSON!' text blinks at the bottom of the textfield. If you don't have valid JSON, the border turns red and it will let you know that you do not have valid JSON. 'Clear textarea' to test some more... Done with jQuery with the parse()-method and flexbox and keyframes in CSS.

Connect 4

screenshot of connect four, both colors in the game

Features: 2 Spieler:innen können gegeneinander spielen, horizontale, vertikale oder diagonale Siege, Animation, wenn ein:e Spieler:in gewinnt, die Farbe des Gewinners wird angezeigt, erneut spielen

More info

I loved playing Connect 4 as a child - and I still do today! I never thought I would build one as a computer game. The hardest part was figuring out and programming the diagonal victories. You can either pick dark-red or pink to play. Every move is accompanied by a sound. When one color wins, the whole board expands and the winning color fills the screen. This animation I did with jQuery. Additionally, there is a winning-message blinking - I programmed this in CSS with animations and keyframes. The 'Play again' button restarts a new game - you should give it a shot!

Spiced Homepage

screenshot of spiced homepage

Features: Pop-up modal, hamburger menu with navigation sliding in from the right, also suited for smaller screens

More info

An exercise in building a homepage for Spiced with HTML, CSS and JavaScript/jQuery without flexbox or grid - quite challenging! I added a pop-up modal and a menu that slides in from the right. It is also designed for a smaller screen with @media screen. I used animations, click handlers and (dis)played (with) in/visibility.

Features: Search countries, use either mouse or keys

More info

Ich habe in meinem Leben viele Male inkrementelle Suchen verwendet und kannte diesen Begriff noch nicht einmal, bis ich eine programmieren sollte... Ich habe nie über all die verschiedenen Schritte nachgedacht, die dafür notwendig sind. Ich habe gelernt, wie man mit Mouseovers, Mousedowns und Tastenbefehlen arbeitet und wie man ein Suchergebnis hervorhebt - alles programmiert mit jQuery. Ich habe auch Fokus und Unschärfe verwendet, sollte die Aufmerksamkeit einer Benutzerin schwinden 😉, und schlussendlich war es mein erster Ajax-'GET'-Request, um von einer Länder-API aus suchen zu können.