Project

Eurotrack

Timeline

April 2026 – June 2026

Target User

Enterprise Administrators, Logistics Managers, Financial Controllers, HR Departments

Location

Germany

Industry

B2B Enterprise SaaS / Workforce Logistics & Financial Management

Overview


Eurotrack is a comprehensive, enterprise-grade SaaS platform built to solve the complex logistical and financial challenges of managing remote workforce accommodations. Designed from scratch, the platform replaces fragmented spreadsheets and disconnected communication channels with a single, centralized command center.


This project was conceived, designed, developed, and rigorously tested as an end-to-end solution. It seamlessly tracks complex financial data, manages hotel bookings and room allocations, monitors employee check-in/out statuses in real-time, and generates automated reports. It is built not just as a tool, but as a scalable product ready for enterprise integration.


My Role

Full-Stack Product Engineer, UX/UI Designer, Solutions Architect, & Lead QA


Skills

Enterprise Software Architecture, Complex Data Visualization, UX/UI Design, Information Architecture, State Management, Precision QA Testing, B2B Product Strategy.


Tools





80%

Reduction in Processing Time:

100%

Financial Transparency

65%

Improved Learning Activities

Problem


Enterprises moving heavy workforces across regional projects handle a massive logistical deficit. Operations are traditionally managed via thousands of fragmented legacy spreadsheet rows, email attachments, and manual accounting receipts, exposing the business to major risks:

  • Financial Scoping Blinds: Tracking mixed invoices across varying payment states (Paid, Unpaid, Overdue, Pending) alongside complex vendor discount models frequently causes massive accounting leaks.

  • Wasted Accommodation Overhead: Schedulers regularly leave rented rooms empty or accidentally double-book assets because they lack single-second visibility into current room card capacities.

  • Operational Control Paralysis: Standard data configurations prevent managers from instantly organizing views by structural layers—such as grouping items by a parent client company, project city, or individual occupant.


Goal


To build a bulletproof, high-performance web dashboard that unifies heavy industrial logistics and real-time ledger accounting into a single, intuitive platform. The architecture needed to seamlessly process massive relational state arrays on the fly while providing executive users with total visual clarity.

Solution


Eurotrack addresses these operational pain points through a powerful full-stack architecture that combines advanced data manipulation tools with clear financial monitoring.

  • Ultimate Data Control Workspace: A fluid data grid enabling users to instantly restructure entire layouts using dynamic horizontal sorting tabs, grouping tabs, and advanced multi-parameter filters.

  • Indestructible Master Math Engine: A front-end calculation pipeline that processes deeply nested multi-tiered tax calculations (Brutto/Netto/MwSt) and overrides instantly on the fly.

  • Real-Time Logistics Tracker: A nested hotel profile view that automatically connects overarching rental agreements down to individual room configurations, tracking room numbers, bed counts, and current occupants simultaneously.

[Snapshot 1 Suggestion: A premium, high-resolution hero shot showing the Eurotrack main workspace dashboard running on a browser desktop. The focus should be on the wide-screen top metric block and the structured grid layout below it.]

Add Sections or Complete Pages

Add breakpoints to your blank page, then drop sections to have them responsive out of the box.

Get Started

Learn More

Design Process

Step 1: Information Architecture & UX Engineering

Enterprise data patterns easily overwhelm users. I applied a systematic Design Thinking approach to condense multi-layered relationships into single-viewport rows. I designed clean micro-interactions, custom menus, and structured modal paths. Color-coding was utilized semantically (Emerald for Paid, Amber for Pending, Red for Overdue) to maximize scanning speeds under tight operation windows.

Step 2: Full-Stack Backend Integration (Supabase)

To establish a secure database foundation, I integrated and mapped a relational PostgreSQL schema on Supabase. I constructed deep data linkages connecting hotels -> durations -> room_cards -> employees -> invoices. To prevent data corruption, I set up custom SQL triggers and indexed performance-heavy foreign keys, ensuring that edits made inside hotel views instantly propagate across global ledger balances.

Step 3: High-Performance Frontend Development

The frontend was developed using React.js and TypeScript, using Tailwind CSS for clean layout utility properties. To avoid application performance loss when filtering thousands of nested object rows, I implemented optimized useMemo computation hooks. This setup processes heavy arrays entirely on the client-side, achieving fast data updates without needing repeated database refetches.


Step 4: AI-Accelerated Engineering & Rapid Prototyping To deliver a high-quality enterprise product quickly, I integrated AI-assisted development tools (like Cursor/Claude) into my workflow. By automating boilerplate code and accelerating component generation, I was able to dedicate 80% of my time to what actually matters: solving complex enterprise business logic, optimizing database queries, and perfecting the UI/UX. This modern workflow allows me to build, iterate, and deploy custom features for clients at a fraction of the traditional development time.


Step 5: Rigorous QA Hardening & Troubleshooting

Enterprise deployments require total financial accuracy. I established strict end-to-end testing scripts covering data mutations, edge-case tax scenarios, and multi-hotel overlaps.

A key validation challenge involved a floating-point rounding issue that caused a 0.01€ data discrepancy between the master KPI total and localized monthly charts. I fixed this by implementing a Proportional Allocator routine inside the calculation pipeline; this routine forces monthly chart metrics to derive directly from the primary rounded hotel totals, eliminating calculation discrepancies entirely.




[Snapshot Suggestion: Close-up view of the filter configuration dropdown and grouping interface. Show the system actively sorting data by "Firma" or "Stadt" using horizontal layout pills to demonstrate how effortlessly huge enterprise tables are sorted.]


[Snapshot Suggestion: High-definition close-up of the automated monthly Statistics loop. Capture the SVG ring glowing in the Dark Mode scheme, clearly showing the clean, professional connective text callouts indicating the status percentages.]


User Side Redesign

Origin of the interviewees

Conclusion

Eurotrack successfully bridges the gap between complex financial accounting and on-the-ground logistical management. By transforming overwhelming data arrays into clear, actionable, and visually stunning interfaces, it drastically reduces administrative overhead and completely eliminates blind spots in budget tracking.

Designed for high scalability, mathematical precision, and rapid deployment, Eurotrack stands as a premium, ready-to-integrate software solution for modern enterprise resource planning and corporate coordination.



Key Features


Eurotrack was engineered to provide unparalleled control over data. I designed the architecture to handle deep object relations (Hotels → Durations → Room Cards → Employees → Invoices) and surfaced them through an incredibly intuitive UI.


1. Command Center Financial Metrics (Top KPIs)

The main navigation features a real-time analytics bar providing immediate financial summaries. It instantly dynamically processes the active data view to show:

  • Gesamtkosten (Total Cost): The total financial investment calculated across all filtered invoices.

  • Total Bezahlt (Total Paid): Real-time cleared capital.

  • Total Offen (Total Due): Active outstanding liability, instantly split into granular sub-metrics: Ausstehend (Pending) for standard accounts receivable and Überfällig (Overdue) for items past maturity boundaries.

2. Advanced Data Manipulation (Filter, Sort & Group) To manage massive amounts of data, I built a highly responsive data grid.

  • Dynamic Grouping: Users can instantly pivot the entire dashboard to group data by Hotel, Company, City, Country, or Employee.

  • Smart Filtering: Multi-layered filters allow managers to isolate views by specific Timelines (Stay overlaps), Payment Status (Paid/Unpaid), Payment Due dates (Today, in 3 Days, Overdue), and Deposit requirements.

  • Multi-Parameter Sorting: One-click sorting by Total Cost, Price per Bed, Free Beds, Last Added, or Payment Due Date, ensuring the most critical tasks rise to the top.


3. Fully Synchronized Statistics Dashboard

A dedicated analytics view featuring custom-built data visualization widgets designed for light load speeds:

  • Glowing Single-Ring Financial Donut: A mathematically precise SVG visualization that uses custom connective elbow pointers to map cash allocations.

  • Proportional Allocation Bar Chart: Breaks down raw cash volumes by chronological month blocks, allowing users to trace expenditure trends over the course of a fiscal year.

  • Leaderboard Engine: A data ranking component that instantly aggregates and weights top expenses by Hotel, Company, City, or Employee nights.

4. Comprehensive Hotel & Employee Management

  • Hotel Summaries: Expandable, detailed records for each vendor, tracking contract durations, custom room pricing, and attached invoices.

  • Employee Status Engine: The system automatically calculates and color-codes employee statuses based on the current date and time: Active, Upcoming, Ending Soon (leaving within 48 hours), and Completed.

  • Bed Capacity Tracking: A real-time counter that automatically calculates overarching contract dates against active employee check-ins to display exactly how many "Free Beds" are available today or next week.

5. The Export Studio A fully integrated reporting module that allows users to select specific columns and instantly generate print-ready, branded PDF reports or structured Excel (XLSX) spreadsheets for external accounting software.

[Snapshot Suggestion: A high-resolution close-up of the Statistics Dashboard. Focus on the glowing, multi-colored Donut Chart with the custom SVG connective lines pointing to specific financial data (Bezahlt, Ausstehend, Überfällig). Include the Leaderboard widget next to it.]

[Snapshot Suggestion: High-definition close-up of the automated monthly Statistics loop. Capture the SVG ring glowing in the Dark Mode scheme, clearly showing the clean, professional connective text callouts indicating the status percentages.]

Create a free website with Framer, the website builder loved by startups, designers and agencies.