Projects

Xentral homepage

Screenshot of the homepage of Xentral

Tech stack: Next.js, GraphQL, TypeScript, Tailwind CSS, Hygraph CMS, AWS

https://xentral.com

As the founding engineer of the Product Growth Team at Xentral, I have been tasked with implementing a redesigned homepage that accurately represents the company's image and creates a strong, positive impression. We have worked iteratively with the UX and Product Team under a tight deadline to create a well-structured, maintainable page that gives editors the freedom to modify modular blocks and component styles directly from the CMS.

Features:

  • Typed GraphQL queries: All the fetched data is full typed thanks to type generation integration.
  • Responsive Modular Design: The sections of the pages has been broken down into reusable elements that can also be easily customized based on predefined UI patterns.
  • NextJS: For fast iterations, clean architecture and performance.
  • Hygraph: Headless CMS for efficient content management.

Automated equity valuation full stack app

Screenshot of the equity valuation application result page

Tech stack: Python, Flask, SQLite, Tailwind, JavaScript

For my master's thesis project in Full Stack Software Development, I developed an application that calculates the present value of companies listed on the stock market. The app evaluates companies based on criteria such as daily percentage changes and uses a Discounted Cash Flow (DCF) model to estimate their present value. If the current market value drops below the estimated value by a specified percentage, the application triggers webhooks to send an alert via a dedicated Slack channel and automatically deploys a summary, including visualizations with Chart.js. The application was self-hosted on a Raspberry Pi and aimed to demonstrate the rapid, iterative development of a minimum viable product (MVP).

Features:

  • Python Flask: Rapid development of backend API and frontend templates, with a wide range of well-established helper libraries
  • Tailwind CSS: Template styling
  • Chart.js: Displayling charts quick and easy
  • SQLite: Low-complexity, easy to setup self-hosted database
  • Netlify: Webhook-based deployment

Summary example:

https://tonytettinger.github.io/automated-equity-valuation-full-stack/static/2024-04-04.html

Latest movies with NextJS

Mix of movie posters

Tech stack: Next.js, TypeScript, REST Api, ChakraUI

https://latest-movie-releases.netlify.app/

This TypeScript-based Next.js web app, styled with a clean responsive design based on ChakraUI. It is a small app I built to quickly check the latest movie releases and their ratings whenever I’m running out of ideas for what to watch.
The app fetches data from The Movie Database (TMDB) via a dedicated backend API endpoint, which is part of this application. It is client-side rendered to ensure users always have access to the most up-to-date information. For improved performance and scalability, Incremental Static Regeneration (ISR) could be implemented if hosted on Vercel, or periodic redeployments with server-side fetching could be used to refresh the data.

Key Features:

  • Real-time Movie Data: Fetches up-to-date movie information from TMDB.
  • Responsive Design: Built with ChakraUI for a consistent experience across devices.
  • TypeScript: For type safety and maintainable code.

GitHub repo: https://github.com/tonytettinger/Latest-movies-list-project-with-NextJS-Typescript-and-ChakraUI

Gatsby-based homepage with integrated CMS

Coffee house picture with laptop and accessories

Tech stack: Gatsby, React, TypeScript, ChakraUI

For my blog, I aimed to create a high-performance, statically generated site without relying on a third-party CMS. The site uses MDX-formatted posts stored directly in a GitHub repository and is built with TypeScript and GraphQL-based queries. The posts can be queried and listed based on categories, therefore the category page templates can be easily updated with new content.

  • Gatsby: For performance and scalability, Gatsby generates static HTML pages, ensuring fast load times and strong SEO. Its plugin ecosystem allows seamless integration with various data sources.

  • ChakraUI: This React UI library simplifies development with pre-designed, accessible components. It enables rapid prototyping while maintaining a consistent design.

  • Netlify: For seamless deployment, Netlify automates builds from Git repository updates, eliminating manual steps.

GitHub repo: https://github.com/tonytettinger/tonytettinger.com

Antal Tettinger. All rights reserved.