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: registration, login, a personal profile with bio and image upload, sending, receiving and accepting friend requests, unfriend, having conversations in a chat room, display of last 3 registered users, searching for users by first and last name, showing friends of friends, logout

The code on GitHub

More info

Users can join a social network, in this case focusing on inclusive 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: supporters can register, login, update their profile information, sign, unsign, view fellow signees sorted by location, logout

The code on GitHub

More info

This petition advocates for signing the Algo.Rules and against algorithmic bias. Depending on whether users register and sign, they get served different sites. If they sign, other signees, their homepages, age and city are displayed.

I learned about dataflow, working with session-cookies, get- and post-routes and how to test them with supertest. I was also working with promises, password hashing and inserts, updates, upserts and deletes in the database. Getting the signature on a canvas and conditionally editing the profile I found particularly challenging.

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

Anyone can upload images of their choosing; the theme of this imageboard is graffiti and 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: Search Spotify database through API, display album/artist with hyperlinked cover and name, load more through button click or infinite scroll

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 players can play against each other, horizontal, vertical or diagonal victories, animation when one player wins, winning color gets displayed, play again

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

I have used incremental searches many times in my life and did not even know this term until I had to build one... I never thought about all the different steps that need to be programmed. I learned how to work with mouseovers, mousedowns and key-commands and how to highlight a search result, all programmed with jQuery. I also used focus and blur when a user's attention blurs (pun intended 😉) and after all it was my first ajax 'GET'-request to search from an API serving over 200 countries.