Picture of the author

FRONT END DEVELOPER

|

ABOUT

Picture of the author

A little about me

I am a passionate fort-end developer experienced in JavaScript and TypeScript-based programming with a strong focus towards React/Next.js based projects. My most recent project was developing an Instagram TypeScript based clone app that utilises Next.js for Static page generation, client-side rendering, dynamic page routes, Jotai for React state management, Firebase for the database/backend features as well as user authentication. Additionally, I have a unique technical background in Mechanical (BSc) and Automotive engineering (MSc). All my projects are on GitHub, feel free to explore, have a look around, and get in touch.

SKILLS

skill
skill
skill
skill
skill
skill
skill
skill
skill
skill
skill
skill
skill
skill
skill
skill

PROJECTS

monitors
instagram
instagram
instagram
instagram

Case Study 1 of 4: Instagram Clone

An Instagram clone app written in Typescript that utilises Next.js framework, TailwindCSS framework to manage the CSS, Jotai to manage the React state throughout the app, Firebase (BaaS) to handle the database (NoSQL) as well as user authentication and Firestore real-time updates. Upload posts, like and comment on user posts, create chatrooms with other users, and create stories. Additionally receive live updates when other users send you chatroom messages, likes and comments on your posts.

monitors
instagram
instagram
instagram
instagram

Case Study 2 of 4: Netflix Clone

A Netflix Clone app written in Typescript that utilises Next.js as a framework, allowing for static HTML to be generated server-side on build time, resulting in better performance and SEO. This app utilises NextAuth to authorise users server side through getServerSideProps, additionally users can login to the app through their registered Google account. The TMDb api was used to gather movie/series data (most popular, top rated, new series, etc). Users can save selected movies to their "My List" by utilising Firebase (BaaS) as the database. Additionally, the TailwindCSS framework was used to help with CSS management and to reduce the CSS bundle size by removing all unused CSS when building for production.

monitors
instagram
instagram
instagram
instagram

Case Study 3 of 4: Where is Waldo

A Where is Waldo app that operates like a photo tagging app, which was developed using React, Javascript CSS, HTML, and FireBase. Selecting a point on the map takes the selected coordinates and checks it against the characters coordinates stored in the Firestore database associated to that map. On successfully finding all characters players can submit their time score to a global leaderboard and therefore see how they rank against others.

monitors
instagram
instagram
instagram
instagram

Case Study 4 of 4: Shopping Cart

A shopping cart app, which was developed using React, Javascript, and CSS. This app was developed to expand my learning and understanding of React and React page routing options through the React Router Dom package. Utilises React Router Dom package for page routing. A shopping cart that updates values and content on addition and subtraction of items across all pages.

CONTACT

Reach out to me and

Get In Touch

I am currently looking for front-end job opportunities with a focus on React and Typescript/JavaScript, my inbox is always open. Whether you have a job opportunity, question or just want to say hi, I will get back to you as soon as possible!

Designed & built by Pierce Hahn

github