Projects

#

Shopping-list App (2023)

A progressive web app (PWA) build with Next.js

Since I was motivated to test some stuff I did not work with sofar, I decided to build a shopping list progressive web app. The cool thing is, that there are zero hosting-costs either for hosting of the app nor for the database. I decided to use following stack:

  • Latest Version of Next.js with app-router and SSR (Server Side Rendering)
  • Internationalization with [next-intl]
  • Hosting on Vercel (free tier)
  • Atlas mongodb as database (free tier)
  • Mongoose as ODM (Object Document Mapper)
  • Tailwind CSS together with radix-ui/colors for styling

Developer experience outcome

  • Mongoose is not the best choice if TypeScript is used. Better seams to be Prisma
  • Hosting at Vercel did work very well, good documentation and easy to use. To start projects a very good choice. The only thing I'm more critical is that container based deployments are not supported, so a build for production deployments is required which takes time. Container based deployments are much faster(there are other importend advantages, but not developer experience related).

Here the link to the app: shopping-list-app.
Or scann this QR-Code, if you want to test it on your mobile device:

#

Creation of this site (2023)

What about Static Site Generation (SSG) and Next 13 with new app-router?

Since I did Single Page Applications (SPA) for a long time I was interested in building a static "informational" website (SEO friendly) like this one with Next.js. I defined this requirements:

  • Static Site Generation (SSG)
  • Use Next.js with new app router
  • Internationalization (i18n) support (2 languages)
  • Hosting on fly.io since it supports container based deployments and zero costs starting a project.
  • Styling with radix radix-ui/colors

Outcome

  • Internationalization with SSG with Next.js app router was not ready to use (work in progress), so I switched to pages router for now.
  • Styling with radix-ui/colors works well: No extra "dark:" prefixed rules needed (only in some edge cases)
  • Hosting on fly.io works well, no issues, good documentation, easy to use, no costs for small projects (July, 2023).
  • Nice lighthouse results, see blog

This project is public on github (link above in navbar)

#

B2B platform 2022/23 (not public)

Relaunch of B2B shop in TypeScript and React

  • Main features: Product search/filter, Product details, order import, multi carts, checkout, CMS integration, Progressive Web App
  • Usage: ~100 orders per day, peak ~1000
  • Stack: TypeScript, React, vite, ReactRouter, ReduxToolkit, RTKQuery, MUI, Cypress, github with actions, docker, portainer
  • Backend: RESTFul APIs (extra team)
  • Internationalization: 7 languages integrated with i18next
  • Team size: 3 (1 lead dev, 1 dev, 1 owner/QA)
  • My role: lead dev

Beside UI implementation, code reviews and managing the development process, I did the setup of the project from scratch including CI/CD with gitlab (later github) and docker. This was my first project i used RTK Query. The overall experience with it was very good. If a project is working with redux, I would use RTKQuery again!

#

Security driven System update (2021)

Update of a big php web app to containerized setup

  • From PHP 5.4 with TYPO3 Flow 3, classic server installation, RDMS based session
  • To PHP 7.4 with Neos Flow 6 in alpine based docker container, Redis based session
  • The good: PHP core update went relatively smooth with reasonable amount of required code updates.
  • The bad: The Template Engine stuff (NeosFlow) was the most time consuming part of the update process.

I did the updated within the planned time frame and it was fun to hand over the system to a second development team as part of a training course. Later, the team was able to maintain it, e.g. do version updates themselves.