Semi-Professional Projects

🧑‍💻 TypeScript Web Developer

🚀 What?

With a dedication for user-centered experience, I develop web applications
by bringing together frontend and backend technologies.

🎯 Goal

I'm committed to deliver maintainable and high quality software,
while staying flexible with evolving tech trends.

🤝 How?

I thrive in collaborative environments where I passionately and conscientiously
contribute and strive to exceed expectations.

🙃 About Me

🌱 Loves new challenges, eager to learn.
🧘 Calm and patient individual, easy to get along.
🔍 Attention-to-detail, conscientious and diligent, high quality delivery.

📲 Get in Touch

Connect

✅	TypeScript, JavaScript (ES6+), Node.js
✅	Web Applications SPA/CSR/SSR (React, Next.js)
✅	RESTful Api (Express)
✅	Databases and ODM/ORM (MongoDB, SQLite, Mongoose, Prisma)
✅	Layout, Design, Typography, Accessibility (HTML, CSS, Lighthouse)
✅	Version Control (Git), Collaboration (CI/CD), Unit Testing
✅	Agile Methodologies (Kanban, Scrum)

Semi-Professional Projects

Playlist Editor (for Spotify) 🎧🎵📲

Playlist Editor (for Spotify) is a simple tool to edit and manage playlists, utilizing the Spotify API. Users can filter, sort, randomize track order and create new playlists. The interface offers a light and a dark theme, and offers responsiveness across devices.

Technologies: TypeScript, Next.js, Next-Auth (OAuth with Auth.js)

View Live Demo 👀

Ticketing App 🎫📲

App for validation of event tickets at the door check-in (scan QR-Code tickets or check-in Box Office tickets).
Intentionally built for offline use, because the current venue has poor internet coverage.
_{**not public yet, but version 1.0.0 got already tested recently during a music festival.}

Technologies: TypeScript, React Native Expo Go, SQLite

	Features
App	Start Screen App Icon Loading Screen Select an event Light/Dark theme Switch Language (en/de) Show prompts before performing operations Toastbar / Info box Always keep screen awake
Home	Fetch and display current event details Stats: total sales Stats: daily checkins
Check-in	Qr-code scanner/camera Request phone camera permissions Validate pre-saled tickets Add box office tickets Counter for checkins Camera can turn on flashlight
Ticket	Offline/Local storage with SQLite Manually trigger sync process with API (upload, download, update, delete) Upload recent checkins Download new tickets and Update existing tickets Show ticket status (valid, used, payment pending, etc.) Search and filter tickets

App: Select Event	App: Start Screen	App: Loading Screen

Home: Switch Language EN/DE	Home: Light/Dark Mode	Home: Statistics Sales/Checkins

Checkin	Checkin: QR-Code	Checkin: Camera Permissions

Tickets: Overview, Manage Data	Tickets: Search and Filter	Tickets: Create or Update

Practice Projects

FILTER COFFEE ☕✨

Filter Coffee is small application lets users filter a dataset of fictional (AI-generated) coffees based on various criteria.

View Live Demo 👀

Learning Goals	Get familiar with advance filtering techniques, handle multiple filters effectively and update the URL (search params). React: Enhance my knowledge (complex state management, custom hooks, separation of concerns, MVVM). TypeScript: Handle more complex types. CSS conventions: Learn an follow BEM methodology for clean and reusable styles.
Features	Dynamically Multiple Filtering: Use multiple filters to filter a dataset by different categories. Filter Status Managment: See which filters are "available" and which are currently "active". Interactive Filter Selection: Click to move filters between "available" and "active" lists. Adaptive Remaining Filters: Available filters show only those options that the user can still choose from. URL Sync: Active filters are reflected in the browser URL. Simply share the current filter combination, or paste a URL to revisit a specific set of filters. Reset Filters: Clear all active filters and reset the URL to start over.
Technologies	TypeScript React Vite

Task / Todo / Notes App 📝📲

Develop a fully functional RESTful API Full-Stack Web Application using JavaScript, Node.js, React, Express, MongoDB (in less than 48-hours).

View Live Demo 👀

Re-create frontend components

Layout and Design Frontend Components using: HTML, CSS, React, React Native, Bootstrap, Material Ui, JavaScript, DOM Manipulation, JSON, etc.


^{4. Summary Component using React + CSS.}	^{5. Web Platform using React + MUi. View Live Demo 👀}	^{6. Tip Calculator App using React + MUi. View Live Demo 👀}	^{7. QR-Code Ticket Scanner App using React Native.}

Educational Projects

Projects I developed during my qualification as full-stack web developer

10. Integrate a relational SQL Database and an OAuth Authentication in Next.js Full-Stack SSR/CSR Application. TypeScript, Next.js, Prisma ORM, Vercel PostgreSQL, Next-auth / Auth.js. View Live Demo 👀
3. MERN Full-Stack SPA Web Application and Cross-Cohort Collaboration: Data Analytics → UX/UI Design → Web Development. MongoDB, Express.js, React.js, Node.js, Axios, Chart.js, JWT Auth, REST. View Live Demo 👀
2. Collaborative Development (CI) of a Web Application . Introduction to Backend Technologies and collaborative Version Control. Node.js, Express.js, MongoDB, Mongoose, Handlebars.js, Git, GitHub, Session Auth, CRUD. View Live Demo 👀
1. Develop a Browser Game using Frontend Technologies. Learn to use basic concepts. JavaScript, HTML, CSS, Canvas, P5.js, DOM, OOP, DRY, KISS, YAGNI, Linting. View Live Demo 👀