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
- 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.