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.

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.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
    Live Demo
    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
    Live Demo|Source Code
  • my-notes-app
    Live Demo
    Source Code

    my-notes-app

    My Notes App is a full-stack web app that lets you write and organize markdown notes. You can sign in with your GitHub account to access your notes securely.

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

    Please note that you need a GitHub account to use this app.

    full-stack
    TypeScriptNext.jstRPCPrismaTailwind CSSDaisyUI
    Live Demo|Source Code
  • react-query-demo
    Live 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 or 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.

    Note that the app takes a while to spin up initially because of the free database hosting I used, but once it's running, it should perform well because I make use of React Query's caching capabilities.

    To use the app, you don't need to sign up or create an account.

    full-stack
    TypeScriptBootstrapReact.jsReact-QueryPrismaExpressPostgreSQL
    Live Demo|Source Code

  • 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 👷‍♂️

Get In Touch

Have a question or want to work together?

Feel free to send me an email at hello@patrickfender.de.