<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Beiträge von Sander Hahn - Mobile USTP MKL</title>
	<atom:link href="https://mobile.fhstp.ac.at/author/it251511/feed/" rel="self" type="application/rss+xml" />
	<link>https://mobile.fhstp.ac.at/author/it251511/</link>
	<description>Die &#34;Mobile Forschungsgruppe&#34; der USTP, sie  sammelt hier alles zu den Themen Design, UX und Entwicklung mobiler Applikationen</description>
	<lastBuildDate>Tue, 24 Feb 2026 08:57:57 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://mobile.fhstp.ac.at/wp-content/uploads/2025/03/icon-120x120.webp</url>
	<title>Beiträge von Sander Hahn - Mobile USTP MKL</title>
	<link>https://mobile.fhstp.ac.at/author/it251511/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Language Learning App</title>
		<link>https://mobile.fhstp.ac.at/allgemein/language-learning-app/</link>
		
		<dc:creator><![CDATA[Sander Hahn]]></dc:creator>
		<pubDate>Tue, 24 Feb 2026 08:57:56 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[android]]></category>
		<category><![CDATA[Android Studio]]></category>
		<category><![CDATA[Jetpack Compose]]></category>
		<category><![CDATA[Jetpack Room]]></category>
		<category><![CDATA[MLKIT]]></category>
		<category><![CDATA[Semester Project]]></category>
		<guid isPermaLink="false">https://mobile.fhstp.ac.at/?p=15474</guid>

					<description><![CDATA[<p>As my second project for the first semester, I set out to learn more about app development with Kotlin. For this, I used Android Studio to create a language-learning app with a small twist: instead of entering the word you want to learn in your own language, you enter the foreign word. The backend then <a class="read-more" href="https://mobile.fhstp.ac.at/allgemein/language-learning-app/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/language-learning-app/">Language Learning App</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>As my second project for the first semester, I set out to learn more about app development with Kotlin. For this, I used Android Studio to create a language-learning app with a small twist: instead of entering the word you want to learn in your own language, you enter the foreign word. The backend then automatically translates the word into your language. The idea behind this is that writing the new word yourself helps memorize it, while also saving a little time by translating it automatically.</p>



<h2 class="wp-block-heading">Tools and Technologies</h2>



<p>To achieve this, I used the most recent version of Android Studio in combination with:</p>



<h3 class="wp-block-heading">Frontend: Jetpack Compose</h3>



<p>When developing apps in Android Studio, the recommended framework is Android’s Jetpack Compose. It is a modern toolkit for building native UIs and simplifies and accelerates UI development on Android.</p>



<h3 class="wp-block-heading">Backend / Database: Jetpack Room</h3>



<p>Jetpack Room is a persistence library introduced as part of the Android Jetpack suite to simplify working with SQLite databases. It provides an abstraction layer over SQLite, allowing more robust database access while still enabling the full power of SQLite.</p>



<h3 class="wp-block-heading">Translation: ML Kit</h3>



<p>With Android Studio’s ML Kit Translation API, users can translate text in over 50 different languages without the need for an internet connection, and it is completely free to use for development.</p>



<h2 class="wp-block-heading">Project Scope</h2>



<p>My goal is to develop an intuitive app that lets users learn new words in different languages.</p>



<p>The app should contain:</p>



<ul class="wp-block-list">
<li>Start Page
<ul class="wp-block-list">
<li>Before users can begin learning, they need to set a name and their nationality so ML Kit knows which language to translate into.</li>
</ul>
</li>



<li>Overview of folders and cards
<ul class="wp-block-list">
<li>Users can create multiple folders with different language settings and visuals. In these folders, they can see their added cards.</li>
</ul>
</li>



<li>Add folders
<ul class="wp-block-list">
<li>Adding folders should be easy, and folders should also be easily distinguishable. To achieve this, users can set a name (e.g., German vocabulary), a color, the foreign language (e.g., German), and change the local language if needed (default is the user’s nationality).</li>
</ul>
</li>



<li>Add cards
<ul class="wp-block-list">
<li>Adding cards is the most important feature of this app. Users add a new word and have two optional fields for example sentences and tags.</li>
</ul>
</li>



<li>Automatic translation
<ul class="wp-block-list">
<li>For ease of use (and to experiment with Android’s APIs), the new word is automatically translated into the user’s language.</li>
</ul>
</li>



<li>Quiz mode
<ul class="wp-block-list">
<li>With quiz mode, users can test their skills using three different modes: Random, Bookmarked, and Recall (a list of incorrectly answered cards).</li>
</ul>
</li>
</ul>



<h2 class="wp-block-heading">Beyond the Initial Scope</h2>



<p>Additionally, I implemented several features that further improve the app’s functionality:</p>



<ul class="wp-block-list">
<li>User edit page: Allows users to edit their name, nationality, and app theme.</li>



<li>Light and dark mode: Added for additional customization.</li>
</ul>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<p>Overall, the implementation of this project during my first semester was very successful and involved learning many new technologies. Both frontend and backend are fully implemented and can be further extended in the upcoming semesters.</p>



<p></p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/language-learning-app/">Language Learning App</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>OnTime &#8211; Semester Project 1</title>
		<link>https://mobile.fhstp.ac.at/allgemein/ontime-semester-project-1/</link>
		
		<dc:creator><![CDATA[Sander Hahn]]></dc:creator>
		<pubDate>Sun, 22 Feb 2026 16:22:01 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<guid isPermaLink="false">https://mobile.fhstp.ac.at/?p=15306</guid>

					<description><![CDATA[<p>What is OnTime and why do we (me) need it OnTime is a cross-platform time tracking app in which the user can create clients that the user works for with projects and tasks. The application consists of a calendar, overview pages for clients, project and tasks to view, create, edit, and delete. Additionally, it also <a class="read-more" href="https://mobile.fhstp.ac.at/allgemein/ontime-semester-project-1/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/ontime-semester-project-1/">OnTime &#8211; Semester Project 1</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<h2 class="wp-block-heading">What is OnTime and why do we (me) need it</h2>



<p>OnTime is a cross-platform time tracking app in which the user can create clients that the user works for with projects and tasks. The application consists of a calendar, overview pages for clients, project and tasks to view, create, edit, and delete. Additionally, it also combines all the data on a dashboard page, where the user can see their working hours, how much money they have made, and how the worked hours are distributed.&nbsp;</p>



<p>So why do I need it? It’s simple: I’m greedy, and I don’t want to pay for a SaaS that needs to be subscribed to to get all the features. Websites like Toggl or ClickUp already offer a great service with their freemium versions, but the features that would make my life simpler are blocked behind a paywall.&nbsp;</p>



<p>So the goal is simple: create a time tracking app with clients, projects and tasks that can track your time with a calendar and a real-time recorder.</p>



<h2 class="wp-block-heading">Techstack</h2>



<h3 class="wp-block-heading">React</h3>



<p>React is a JavaScript library designed for building user interfaces, particularly for modern web applications that require fast, interactive experiences, and is used for this project. There are a lot of web development frameworks, and I picked React for one reason: its popularity. A lot of companies use React for their websites, and since I do not have the most experience with React, I wanted to learn it with this project.</p>



<h3 class="wp-block-heading">MUI</h3>



<p>For a clean and consistent design throughout the project, I decided to use MUI. MUI is a React UI component library that helps to build modern interfaces quickly. It’s based on Material Design, a design system created by Google that defines how elements like buttons, cards, colors, spacing, and animations should look and behave. Since I was using it in another project in university, it seemed like a good idea to use it in this project as well.</p>



<h3 class="wp-block-heading">Tauri</h3>



<p>Tauri is a toolkit that can be used with various programming languages to develop cross-platform applications. It is used for building applications using a combination of Rust tools and HTML rendered in a WebView and can be extended with additional functionalities. You can easily compare Tauri to Electron, but instead of bundling a full browser like Electron does, Tauri uses the system’s native webview (for example, WebView2 on Windows or WebKit on macOS). This makes Tauri applications much smaller and more memory-efficient.</p>



<p>A Tauri app typically consists of:</p>



<ul class="wp-block-list">
<li>A frontend built with a web framework (Vue, Svelte, Angular or in this case React).</li>



<li>A backend written in Rust, which handles system-level tasks like file access, networking, or OS integration.</li>
</ul>



<p>Tauri’s cross-platform development supports Windows, macOS, Linux, Android and iOS, which makes it a perfect fit for time tracking anywhere you are.</p>



<h3 class="wp-block-heading">Supabase</h3>



<p>Supabase is an open-source, serverless backend platform and a popular alternative to Firebase. It enables developers to build optimized and high-performance applications using a PostgreSQL database with an easy and minimal configuration. Supabase operates as a serverless backend. This allows applications to be set up and scaled without the need to create or manage a custom server. Additionally, Supabase is built on SQL (Structured Query Language), offering the full range of features and advantages associated with relational databases, different from Firebase’s NoSQL-based approach.</p>



<h4 class="wp-block-heading">Supabase Features</h4>



<p>Supabase comes with a prebuilt authentication/user management system handled by the package with no need for third-party tools.&nbsp;</p>



<p>Supabase projects come with a preconfigured PostgreSQL database, giving developers access to the full set of features that Postgres offers. This functionality can be extended by enabling additional database extensions, which can be added easily with a few clicks in the settings.</p>



<h3 class="wp-block-heading">Design</h3>



<p>The design was made in Figma using variables and styles for a consistent experience. Even though a solid visual experience was not a requirement for the project, I wanted to fulfill my own requirements since I want to use this application once it’s fully finished. Here are some design examples:</p>



<p></p>



<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="440" height="800" data-id="15310" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/Overview-Phone1-440x800.png" alt="" class="wp-image-15310"/></figure>



<figure class="wp-block-image size-large"><img decoding="async" width="440" height="800" data-id="15308" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/Projects-Phone-440x800.png" alt="" class="wp-image-15308"/></figure>



<figure class="wp-block-image size-large"><img decoding="async" width="440" height="800" data-id="15309" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/Timer-Phone1-440x800.png" alt="" class="wp-image-15309"/></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1440" height="800" data-id="15311" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/Overview-Desktop1-1440x800.png" alt="" class="wp-image-15311"/></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1440" height="800" data-id="15312" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/Projects-Desktop1-1440x800.png" alt="" class="wp-image-15312"/></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1440" height="800" data-id="15313" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/Sign-Up-Desktop-1440x800.png" alt="" class="wp-image-15313"/></figure>
</figure>



<h2 class="wp-block-heading">Learnings</h2>



<p>At the start of the project, I had a clear plan on how to start and keep up the progress for this project. Which can be seen in this picture:</p>



<p>Sadly, instead of starting with the backend and then the design with the website, I started developing the calendar components. This led to me having to refactor the calendar later on because the database in the backend was handling the types differently. After having a working prototype of the components, I was able to redesign these with a consistent design.</p>



<p>Additionally, the Figma course in the first semester helped immensely with building a consistent and visually pleasing design. The work on this project really improved my confidence in using Figma and putting it all together in React.</p>



<p>Furthermore, even though I would not say that I particularly enjoyed using React, I learned a great deal about its framework architecture and how to use the different hooks correctly. In addition, I was able to get a solid understanding of how to structure and reuse components, which significantly improved the readability and maintainability of my code.</p>



<h2 class="wp-block-heading">Conclusion</h2>



<p>In conclusion, the development of OnTime was challenging, but I learned a lot. A substantial amount of work went into implementing the calendar functionality, as many existing calendar components were either with not enough features or customizability for the project’s requirements or locked behind paywalls. Building custom solutions for these components needed careful planning, refactoring, and iteration.</p>



<p>Overall, the project was a very valuable experience in full-stack application development, UI design, and architectural decision-making. While OnTime already fulfills its core purpose, there are many possible future improvements, such as an offline mode, invoice generation, workspaces, and multi-user support. These additions would further enhance the application’s usability and scalability.</p>



<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1540" height="800" data-id="15332" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/Screenshot-2026-01-21-184223-1540x800.jpg" alt="" class="wp-image-15332" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/Screenshot-2026-01-21-184223-1540x800.jpg 1540w, https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/Screenshot-2026-01-21-184223-770x400.jpg 770w" sizes="auto, (max-width: 1540px) 100vw, 1540px" /></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1540" height="800" data-id="15331" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/Screenshot-2026-01-21-184251-1540x800.jpg" alt="" class="wp-image-15331" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/Screenshot-2026-01-21-184251-1540x800.jpg 1540w, https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/Screenshot-2026-01-21-184251-770x400.jpg 770w" sizes="auto, (max-width: 1540px) 100vw, 1540px" /></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1540" height="800" data-id="15333" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/Screenshot-2026-01-21-184306-1540x800.jpg" alt="" class="wp-image-15333" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/Screenshot-2026-01-21-184306-1540x800.jpg 1540w, https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/Screenshot-2026-01-21-184306-770x400.jpg 770w" sizes="auto, (max-width: 1540px) 100vw, 1540px" /></figure>



<figure class="wp-block-image size-large is-style-default"><img loading="lazy" decoding="async" width="1440" height="800" data-id="15336" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/Screenshot_20260121-185340_onTime-1440x800.jpg" alt="" class="wp-image-15336"/></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1440" height="800" data-id="15337" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/Screenshot_20260121-185330_onTime-1440x800.jpg" alt="" class="wp-image-15337"/></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1440" height="800" data-id="15338" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/Screenshot_20260121-185303_onTime-1440x800.jpg" alt="" class="wp-image-15338"/></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1440" height="800" data-id="15340" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/Screenshot_20260121-185316_onTime-1440x800.jpg" alt="" class="wp-image-15340"/></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1440" height="800" data-id="15339" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/Screenshot_20260121-185226_onTime-1440x800.jpg" alt="" class="wp-image-15339"/></figure>
</figure>



<p></p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/ontime-semester-project-1/">OnTime &#8211; Semester Project 1</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>State of the Art of AI-Enhanced SLAM</title>
		<link>https://mobile.fhstp.ac.at/allgemein/state-of-the-art-of-ai-enhanced-slam/</link>
		
		<dc:creator><![CDATA[Sander Hahn]]></dc:creator>
		<pubDate>Wed, 21 Jan 2026 18:01:37 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[AI]]></category>
		<category><![CDATA[Artificial Intelligence]]></category>
		<category><![CDATA[ORB-SLAM]]></category>
		<category><![CDATA[SIFT]]></category>
		<category><![CDATA[Simultaneous Localization And Mapping]]></category>
		<category><![CDATA[slam]]></category>
		<category><![CDATA[VSLAM]]></category>
		<guid isPermaLink="false">https://mobile.fhstp.ac.at/?p=15297</guid>

					<description><![CDATA[<p>Abstract This paper discusses recent developments in Simultaneous Localization and Mapping (SLAM) combined with the use of Artificial Intelligence (AI). SLAM makes it possible for robots to build maps of unknown environments while tracking their position, but with traditional methods robots often struggle in dynamic or unstructured settings due to unclear or moving objects. Recent <a class="read-more" href="https://mobile.fhstp.ac.at/allgemein/state-of-the-art-of-ai-enhanced-slam/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/state-of-the-art-of-ai-enhanced-slam/">State of the Art of AI-Enhanced SLAM</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<h2 class="wp-block-heading">Abstract</h2>



<p class="has-text-align-left">This paper discusses recent developments in Simultaneous Localization and Mapping (SLAM) combined with the use of Artificial Intelligence (AI). SLAM makes it possible for robots to build maps of unknown environments while tracking their position, but with traditional methods robots often struggle in dynamic or unstructured settings due to unclear or moving objects. Recent advances in AI and its integration into SLAM address these issues by improving feature extraction, predictive modeling, and adaptability. Convolutional and Graph Convolutional Networks enhance robustness and scalability, while transformer architectures enable efficient trajectory planning. Obstacle detection and avoidance in real-world scenarios are further reinforced by deep reinforcement learning. AI-driven innovations also introduce multi-modal sensor fusion, semantic mapping, enhanced loop closure detection, and collaborative multi-agent frameworks. Comparative studies reveal that AI-enhanced SLAM shows a higher accuracy and robustness across varied scenarios.</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<div data-wp-interactive="core/file" class="wp-block-file"><object data-wp-bind--hidden="!state.hasPdfPreview" hidden class="wp-block-file__embed" data="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/State-of-the-Art-of-AI-Enhanced-SLAM.pdf" type="application/pdf" style="width:100%;height:600px" aria-label="Embed of State of the Art of AI-Enhanced SLAM."></object><a id="wp-block-file--media-a94bbd24-f9c3-4c5e-af6a-968726c47153" href="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/State-of-the-Art-of-AI-Enhanced-SLAM.pdf">State of the Art of AI-Enhanced SLAM</a><a href="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/State-of-the-Art-of-AI-Enhanced-SLAM.pdf" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-a94bbd24-f9c3-4c5e-af6a-968726c47153">Download</a></div>



<p></p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/state-of-the-art-of-ai-enhanced-slam/">State of the Art of AI-Enhanced SLAM</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>What is Supabase and when to use it</title>
		<link>https://mobile.fhstp.ac.at/allgemein/what-is-supabase-and-when-to-use-it/</link>
		
		<dc:creator><![CDATA[Sander Hahn]]></dc:creator>
		<pubDate>Wed, 21 Jan 2026 12:02:10 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[backend]]></category>
		<category><![CDATA[compare]]></category>
		<category><![CDATA[comparison]]></category>
		<category><![CDATA[firebase]]></category>
		<category><![CDATA[saas]]></category>
		<category><![CDATA[supabase]]></category>
		<guid isPermaLink="false">https://mobile.fhstp.ac.at/?p=15295</guid>

					<description><![CDATA[<p>When you start your Fullstack application, the planning can be difficult. What Programming Language should I use? What Framework should I use? Should I write my own backend? Choosing the right backend is very difficult and can decide everything from your development speed to how much control you have over your data. Firebase has been <a class="read-more" href="https://mobile.fhstp.ac.at/allgemein/what-is-supabase-and-when-to-use-it/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/what-is-supabase-and-when-to-use-it/">What is Supabase and when to use it</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>When you start your Fullstack application, the planning can be difficult. What Programming Language should I use? What Framework should I use? Should I write my own backend? Choosing the right backend is very difficult and can decide everything from your development speed to how much control you have over your data. Firebase has been a first option for developers who want to have a fast backend with minimal setup for years, but more recently, Supabase has been growing in popularity, making an open-source Postgres database a compelling alternative.</p>



<p>Both platforms promise fast and easy development, built-in authentication, real-time data, and scalable infrastructure. But can they deliver on these promises and when should I use what? Both are valid choices for your next project but they have their differences in some fundamental ways: data modeling, query flexibility, pricing transparency, and how much you can customize as your app grows. Those differences matter, especially once you move beyond a prototype. But first: what is Supabase actually and what can it do?</p>



<h2 class="wp-block-heading">What is Supabase</h2>



<p>Supabase is a serverless, open-source backend platform that is designed to help developers build scalable, high-performance applications with minimal setup. It’s built on top of PostgreSQL, it provides a fully managed, production-ready database along with essential backend features such as authentication, storage, and real-time data without relying on other services. This means that you don’t need to configure or maintain a custom backend server, allowing you to move faster and focus on product development.</p>



<p>As a serverless solution, Supabase handles infrastructure concerns like provisioning, scaling, and security automatically. It also allows the user to get direct access to a powerful SQL database that uses PostgreSQL for structured data modeling, complex queries, joins, and transactions.</p>



<p>With Supabase, you get a managed backend with features like:</p>



<ul class="wp-block-list">
<li>SQL database: PostgreSQL with support for advanced queries, joins, and JSON data.</li>



<li>Authentication: Secure, built-in user management.</li>



<li>Realtime updates: Live data synchronization using WebSockets.</li>



<li>Storage: Easy-to-use storage for files and media.</li>



<li>Edge functions: Custom serverless functions for handling app logic.</li>
</ul>



<h2 class="wp-block-heading">Firebase</h2>



<p>Similar to Supabase, Firebase is a backend-as-a-service solution offered by Google, which assists developers in the development of applications without the need for them to handle the infrastructure on their own. Firebase also offers a set of features such as authentication, real-time databases, cloud functions, file storage, and analytics. This solution is designed with the objective of providing ease of use and rapid development.</p>



<p>At the heart of the Firebase platform are the NoSQL databases, namely the Realtime Database and the Cloud Firestore, which organize and store the data in the form of documents and collections, unlike traditional relational databases in the form of tables. Although the NoSQL databases provide a degree of flexibility and ease of development, especially when real-time updates and data access patterns are concerned, handling complex relationships and queries in a scaled-up application might be a challenge.</p>



<p>Supabase takes a different approach to backend development. Like mentioned above, it’s an open-source, serverless framework that centers around PostgreSQL. Supabase offers its features with just one Postgres database.</p>



<h2 class="wp-block-heading">Supabase vs Firebase</h2>



<h3 class="wp-block-heading">Data model</h3>



<p>Firebase supports a NoSQL, document-oriented data structure well-suited for hierarchical or event-oriented data. Supabase supports relational SQL, which provides support for schemas, joins, transactions, and consistency.</p>



<h3 class="wp-block-heading">Querying and logic</h3>



<p>It allows complex queries and business logic to be implemented directly in the database through SQL, constraints, and triggers. Firebase uses more client-side logic and Cloud Functions for complex operations.</p>



<h3 class="wp-block-heading">Scalability &amp; Control</h3>



<p>Whereas Firebase abstracts infrastructure almost completely, which is easy to set up but makes it difficult to customize, Supabase provides more visibility and flexibility, which includes direct database access and the ability to host it on your own infrastructure.</p>



<h3 class="wp-block-heading">Vendor lock-in</h3>



<p>Firebase is highly integrated with Google Cloud. Supabase values portability and focuses on using open standards and tools that make it easy to migrate in and out.</p>



<h3 class="wp-block-heading">Use Cases</h3>



<p>Supabase is well suited for:</p>



<ul class="wp-block-list">
<li>SaaS platforms with relational data and role-based access control</li>



<li>Data-intensive applications such as analytics dashboards and internal tools</li>



<li>Projects that require complex queries, transactions, or strong data integrity</li>



<li>Teams that value open source, portability, and long-term flexibility<br></li>
</ul>



<p>Firebase is well suited for:</p>



<ul class="wp-block-list">
<li>MVPs and prototypes that need to ship quickly</li>



<li>Real-time applications like chat, presence, or collaborative tools</li>



<li>Frontend-heavy apps with simple data relationships</li>



<li>Teams already invested in the Google Cloud ecosystem<br></li>
</ul>



<h2 class="wp-block-heading">Choosing Between Supabase and Firebase</h2>



<p>The choice between Supabase and Firebase ultimately depends on how your application handles data and how much control you want over your backend. Firebase is very good at simplicity and speed, while Supabase shines when structure, scalability, and flexibility become more important over time.</p>



<h2 class="wp-block-heading">Conclusion</h2>



<p>Choosing a backend platform is one of the most important decisions you’ll make when starting you fullstack application. It decides not only how fast you&#8217;ll progress and deliver your first version, but also how well your application can scale and how complex your data model can become.</p>



<p>Firebase and Supabase are both good options to choose from and remove a lot of the traditional backend complexity. Firebase is good for rapid development, especially for real-time, frontend-driven applications. Supabase, on the other hand, offers a more structured and transparent approach, built around the concept of open-source and PostgreSQL, making it a strong choice for applications that need simple data models and long-term flexibility.</p>



<p>As always, there is no universally &#8220;better&#8221; option&#8230; Only the better fit for your project. If you need to move fast with minimal setup and simple data relationships, Firebase is a solid choice. If your application relies on relational data, complex queries, and future-proof architecture, Supabase provides a powerful and scalable foundation.</p>



<p>Ultimately, the best backend is the one that aligns with your application’s needs today while still supporting where you want it to go tomorrow.</p>



<h3 class="wp-block-heading">Sources</h3>



<ol class="wp-block-list">
<li><a href="https://bejamas.com/hub/serverless-database/supabase">https://bejamas.com/hub/serverless-database/supabase</a></li>



<li><a href="https://somindadhaniya.medium.com/what-is-supabase-the-open-source-firebase-alternative-developers-love-ef63f15e0e48">https://somindadhaniya.medium.com/what-is-supabase-the-open-source-firebase-alternative-developers-love-ef63f15e0e48</a></li>



<li><a href="https://www.newline.co/@zaoyang/what-is-supabase-and-how-it-can-replace-your-entire-backend--62b84205">https://www.newline.co/@zaoyang/what-is-supabase-and-how-it-can-replace-your-entire-backend&#8211;62b84205</a></li>



<li><a href="https://supabase.com/">https://supabase.com/</a></li>



<li><a href="https://supabase.com/docs/guides/getting-started/architecture">https://supabase.com/docs/guides/getting-started/architecture</a></li>



<li><a href="https://www.postgresql.org/about/">https://www.postgresql.org/about/</a></li>



<li><a href="https://firebase.google.com/">https://firebase.google.com/</a></li>



<li><a href="https://medium.com/firebase-developers/what-is-firebase-the-complete-story-abridged-bcc730c5f2c0">https://medium.com/firebase-developers/what-is-firebase-the-complete-story-abridged-bcc730c5f2c0</a></li>
</ol>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/what-is-supabase-and-when-to-use-it/">What is Supabase and when to use it</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>PrintToMobile &#124; TreeFund</title>
		<link>https://mobile.fhstp.ac.at/development/printtomobile-treefund/</link>
		
		<dc:creator><![CDATA[Sander Hahn]]></dc:creator>
		<pubDate>Fri, 17 Oct 2025 12:56:35 +0000</pubDate>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Webdevelopment]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[Print-to-mobile]]></category>
		<category><![CDATA[React]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[Webentwicklung]]></category>
		<guid isPermaLink="false">https://mobile.fhstp.ac.at/?p=14942</guid>

					<description><![CDATA[<p>Today’s world is becoming increasingly complicated – and increasingly grey. Pollution, conflict, and overconsumption are draining the color from our planet. The idea of TreeFund is simple: find an easy, meaningful way to help make our world greener again – one small step at a time. Idea The goal of TreeFund is to provide an <a class="read-more" href="https://mobile.fhstp.ac.at/development/printtomobile-treefund/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/development/printtomobile-treefund/">PrintToMobile | TreeFund</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>Today’s world is becoming increasingly complicated – and increasingly grey. Pollution, conflict, and overconsumption are draining the color from our planet. The idea of TreeFund is simple: find an easy, meaningful way to help make our world greener again – one small step at a time.</p>



<h2 class="wp-block-heading">Idea</h2>



<p>The goal of <em>TreeFund</em> is to provide an easy and transparent way for people to contribute to environmental restoration projects in St. Pölten. Its main focus is supporting tree planting initiatives and teaching new generations how to help our planet. The idea is to connect with individuals who want to make a difference and focus on their specific needs. People will first encounter <em>TreeFund </em>through posters and flyers placed around the city. A QR code on each will lead directly to the <em>TreeFund </em>website, where users can learn more, get involved, and track the impact of their contributions.</p>



<p></p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="595" height="842" data-id="14964" src="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Print2-5.jpg" alt="" class="wp-image-14964"/></figure>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="720" height="1520" data-id="14963" src="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251017-134357_Camera-5.jpg" alt="" class="wp-image-14963"/></figure>
</figure>
</div>
</div>



<p></p>



<h2 class="wp-block-heading"><strong>Implementation</strong></h2>



<p>As the first step in the implementation process, I created a user persona: <em>Lisa Gruber</em>, a student at the <em>University of Applied Sciences St. Pölten</em>.</p>



<p><em>Lisa </em>is deeply environmentally conscious and eager to contribute to positive change. However, she often feels frustrated by the impersonal nature of many existing donation platforms. She wants to see the real impact of her actions and connect with initiatives that align with her values on a local level.</p>



<p></p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1787" height="1725" src="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Persona.png" alt="" class="wp-image-14966" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Persona.png 1787w, https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Persona-1536x1483.png 1536w" sizes="auto, (max-width: 1787px) 100vw, 1787px" /></figure>



<p></p>



<p>To personalize this process, the user (Lisa) first contacts TreeFund via a form describing their personal needs and where they want to see a part of the world a little greener. Only after the user is happy and the tree planting effort is accepted by the city, the payment process begins.&nbsp;</p>



<p>To attract younger customers the design follows a minimalist aesthetic with clean whites and greens to emphasize the simplicity and positivity of the project’s goal. The design was first created in Figma with inspirations like Ecosia and TreeApp. My goal was to stick to a strict number of TailwindCSS colors. The website switches between Stone-50 and -100 for the background and Lime-400, -500, -600 and -800 for the green accents.</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="387" height="144" src="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Frame-17.png" alt="" class="wp-image-14982"/></figure></div>


<p></p>



<p>After the design process, the actual website was implemented using React, Next.js, Tailwind CSS, and Lucide for icons.</p>



<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-4 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1436" height="2724" data-id="14975" src="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251017-135253_Chrome-1.jpg" alt="" class="wp-image-14975" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251017-135253_Chrome-1.jpg 1436w, https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251017-135253_Chrome-1-810x1536.jpg 810w, https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251017-135253_Chrome-1-1080x2048.jpg 1080w" sizes="auto, (max-width: 1436px) 100vw, 1436px" /></figure>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1440" height="2724" data-id="14976" src="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251017-135326_Chrome-1.jpg" alt="" class="wp-image-14976" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251017-135326_Chrome-1.jpg 1440w, https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251017-135326_Chrome-1-812x1536.jpg 812w, https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251017-135326_Chrome-1-1083x2048.jpg 1083w" sizes="auto, (max-width: 1440px) 100vw, 1440px" /></figure>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1440" height="2920" data-id="14974" src="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251017-135332_Chrome.jpg" alt="" class="wp-image-14974" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251017-135332_Chrome.jpg 1440w, https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251017-135332_Chrome-757x1536.jpg 757w, https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251017-135332_Chrome-1010x2048.jpg 1010w" sizes="auto, (max-width: 1440px) 100vw, 1440px" /></figure>
</figure>



<p><strong>Link to the Web Application:</strong> https://fhstp-print2mobil.vercel.app/</p>



<p><br><strong>Disclaimer: </strong><em>This is a personal project created for educational and illustrative purposes. It is not affiliated with any existing environmental organizations. The aim is to demonstrate how web technology can be used to promote sustainability and environmental awareness.</em></p>
<p>The post <a href="https://mobile.fhstp.ac.at/development/printtomobile-treefund/">PrintToMobile | TreeFund</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
