Work

This is a selection of my projects as a web developer. Most of them are study projects, created during the Fullstack Webdeveloper course @CareerFoundry.

For the study projects I also worked with Kanban boards, user stories, user flows and architectural diagrams.

More details about the features, technologies, etc. of each project can be found in the respective readme file on GitHub.


Portfolio

Portfolio screenshot.

This started as a static website to learn HTML and CSS, but turned into a full grown portfolio website.

For practice reasons I chose to refrain from rebuilding it using librarys or build tools, so every line of code here is hand-written.

Technologies:

  • CSS basics like float, flexbox, grid, variables, animations
  • HTML basics like forms, tables, header, footer
  • Full responsiveness
  • Full accessibility

Meet

Meet app screenshot 1. Meet app screenshot 1.

This app displays events in different cities which are fetched from Google Calendar API.

The study goal was to learn about PWAs, test-driven-development (TDD), serverless functions, OAuth (a mechanism to log into an app with your google account), performance monitoring and how to draw pretty charts.

PWA (progressive web application) means it is responsive, available offline, cross-platform and can be added to the home screen.

Features:

  • Show/hide event details
  • Filter by city name
  • Choose number of events
  • Chart 1: Number of upcoming events per city
  • Chart 2: Popularity of topics

Built with CRA (CreatReactApp), following the TDD (test driven development) approach.

Main technologies used: React, CSS, serverless (AWS lambda), OAuth (Google Cloud Console), Axios, Recharts, Jest (Enzyme, Cucumber, Puppeteer), Atatus (performance monitoring)

myFlix-Angular-client

Screenshot of the myFlix-Angular-client.

myFlix is a library of movements from various styles and traditions, with descriptions/cues and video sources.

For the myFlix study project I created an API including a non-relational database, as well as two different frontend clients (Angular and React).

This is the Angular client - A single-page, responsive web application (SPA), using Material design.

Features:

  • View a list of all moves
  • See details for each move, style or source
  • User registration and login
  • Update profile (username, password, email, birthday)
  • Users can add to add remove a move to/from their list of favorites
  • Users can delete their account

Main technologies used: TypeScript, Angular, Angular-Material, CSS, TypeDoc for documentation, hosting on GitHub-pages.

myFlix-client

Screenshot of the myFlix-client.

This is the React-based frontend - A single-page, responsive web application (SPA), built with React (including a number of additional modules), following the MVC design pattern.

For general info about myFlix see the Angular client.

Basic features: see Angular client. The React version additionally has thorough form validation and a search function.

Main technologies used: JavaScript, React, React Bootstrap, React Redux, Axios, Parcel, PropTypes, Netlify hosting.

Chat-App

Screenshot of the Chat-App
              start screen. Screenshot of the Chat-App
              chat screen. Screenshot of the Chat-App
              action sheet.

A chat app for mobile devices (Android and iOS) created with React Native.

The study goals here were to learn how to develop and test cross-platform native apps.

Features:

  • Enter username
  • Choose background color
  • Send and receive messages
  • Share pictures from the devices gallery
  • Take and share photos
  • Share location
  • See past messages even while offline

Main technologies used: JavaScript, React Native, Android Studio, Expo, Google Firebase.

pokedex-js

Pokedex screenshot 1: Main screen. Pokedex screenshot 2: Modal with details of a Pokemon.

An app to show a list of Pokemon from a public API.

Features:

  • Load Pokemon data from a public external API
  • Render a button for each Pokemon
  • Open a modal when button is clicked, to show details about the Pokemon
  • Filter bar to search Pokemon by name

The study goals were to learn DOM manipulation with JavaScript, jQuery, styling with Bootstrap, and code optimization with linters and minfiers.