Welcome

Project: Portfolio website

This project started as a static website to learn HTML and CSS. But ... it turned into a full-grown portfolio website.

For practice reasons I chose to refrain from (re)building it using any modules, libraries, frameworks or build tools, so every line of code here is hand-written.

Technologies:

• Semantic HTML (header, footer, forms, tables, ...)
• Custom web components (reusable header and footer)
• CSS (float, flexbox, grid, variables, animations, media queries, ...)
• JavaScript
• Fully responsive
• PHP endpoint for the contact form

To keep my email address away from spam bots, the contact form posts to a small PHP script on the same webspace, protected by a honeypot field, a minimum fill time and a rate limit. The address and phone number themselves are assembled by JavaScript at runtime and never appear in the HTML source.

Project: MoveX Angular Client

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

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

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

Technologies:

• TypeScript
• Angular
• Angular-Material
• CSS
• TypeDoc for documentation
• GitHub-pages hosting

Project: MoveX React Client

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

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

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.

Features:

• View a list of all moves
• See details for each move, style or source
• Search moves by name
• 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

Compared to the Angular client, the React version additionally has thorough form validation and a search function.

Technologies:

• JavaScript
• React
• React-Bootstrap
• React-Redux
• Axios
• Parcel
• PropTypes
• Netlify hosting

Project: MoveX backend (API)

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

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

This is the REST API and a non-relational database.

The study goals here were to learn about NodeJS (incl. a number of packages), databases (SQL and NoSQL) and APIs in general.

Technologies:

• JavaScript
• node.js (Express, Morgan, bodyParser, mongoose, CORS, Passport, bcrypt)
• Non-relational DB on MongoDB Atlas
• Postman (API endpoint testing)
• JSDoc for documentation
• App hosted on Heroku

Meet app

This app displays events in different cities which are fetched from a mock-data Google Calendar.

The study goal was to learn about PWAs, test-driven-development (TDD), serverless functions (FaaS), 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.

The FaaS (function as a service) is a third party service (in this case on an Amazon server) that acts as a middleman between the user and the Google Calendar API. This keeps the credentials of the Google Calender secret (not accessible to the user) and makes the authorization process safe and convenient.

Features:

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

Technologies:

• React
• CRA (CreateReactApp)
• CSS
• serverless
• AWS lambda
• OAuth (Google Cloud Console)
• Axios
• Recharts
• Jest (Enzyme, Cucumber, Puppeteer)
• Atatus (performance monitoring)
• GitHub-pages hosting

Project: CHATzam

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.

A Google Firestore database was used to store and sync the messages between devices.

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

Technologies:

• JavaScript
• React Native
• Android Studio
• Expo
• Google Firebase

As this is a mobile app in development stage, there is no live demo available. See GitHub readme for instructions to use/test it.