Hi, I'm Patrick

I'm a passionate <web developer> with a love for all things technology! Currently I'm a computer science student in Darmstadt, Germany.

The code for this website can be found in this GitHub repo.

Hero Image

My Tech Stack

I'm always looking to expand my skills and stay up-to-date with the latest technologies. Here are some of the technologies and tools that I've used to build projects.

TypeScriptJavaScriptPythonJavaC/C++HTML/CSSSASSTailwind CSSBootstrapDaisyUIMaterial UIReact.jsNext.jsVue.jsNode.jsExpressMySQLPostgreSQLREST APIsPrismatRPCNextAuth.jsJestPrettierESlintGitDockerLinux

My Projects

As a self-taught web developer, I enjoy creating small projects to learn new technologies and improve my skills. Here are some of my favorite coding projects, ranging from front-end to full-stack. Click on the images to view the live demos and GitHub repositories.

  • twitter-clone
    Source Code

    twitter-clone

    A full-stack web application that allows users to write tweets and see a feed of other tweets or tweets by a specific user.

    To write tweets the app requires users to sign in via GitHub or Discord using Clerk, an external service that provides user authentication. With Clerk, the app can authenticate users quickly and securely, without having to handle sensitive user information directly.

    This project was mainly built to learn and practice building web applications with Next.js and tRPC, and to explore how to integrate external services for user authentication. By building a Twitter clone, I was able to learn how to work with APIs, routing, data fetching and Static-Site Generation with Next.js, as well as how to use tRPC to simplify the process of creating APIs.

    full-stack
    TypeScriptNext.jstRPCPrismaTailwind CSS
  • my-notes-app
    Source Code

    my-notes-app

    My Notes App is a full-stack web app that lets you write and organize markdown notes. Its social login let's you sign in with your GitHub account.

    The app is built using the latest web technologies such as Next.js 13, Typescript, tRPC, Prisma, NextAuth, Tailwind, DaisyUI, and Supabase. I built this project to learn the t3 stack (Next.js 13, Typescript, tRPC, Prisma, NextAuth, Tailwind).

    full-stack
    TypeScriptNext.jstRPCPrismaTailwind CSSDaisyUI
  • react-query-demo
    Source Code

    react-query-demo

    With "react-query-demo" you can browse through posts made by users, view posts by tags, and create your own post. The app follows a design similar to "Dev.to" and other developer blogs, but with a much simpler data model. It also features infinite scrolling, pagination, and skeleton loading.

    I built this project to learn about React Query, a powerful library for data fetching and caching in React applications, and Bootstrap, a popular CSS framework for responsive web design. I also used Faker.js to generate fake data for the posts, Express as my server, Prisma and PostgreSQL as the ORM and database management system.

    full-stack
    TypeScriptBootstrapReact.jsReact-QueryPrismaExpressPostgreSQL
  • movienator
    Source Code

    movienator

    Originally a student group project at university, "Movienator" is a platform for users to discover new movies, rate films they've watched, and engage in social features such as adding friends, reading their reviews, and sending movie recommendations. Additionally, users can plan movie nights with friends and receive tailored recommendations for the group.

    The platform is built using a MySQL database (either local or hosted), a Node.js backend with a RESTful API built using Express, and a React frontend with MUI for design. TypeScript is employed for type safety across the stack, and TypeORM manages the database connections.

    Both the frontend and backend feature unit tests, and a GitLab CI pipeline ensures code quality through automated tests and linting on every push.

    External APIs like The Movie Database are used for fetching movie and actor data, and PurgoMalum helps filter out offensive language in user-generated content.

    full-stack
    TypeScriptReact.jsMUI v5Node.jsExpressTypeORMMySQLJestSupertestJest-DomReact Testing LibraryESlintGitLab CIExternal APIs

  • More Projects Coming Soon!

    I'm always working on something new and exciting to improve my skills and make cool things. Keep an eye out for future updates and projects!

    Under construction 👷‍♂️