Unsere Webentwicklungsprojekte in der Schweiz

Webanwendungen mit React und Next.js

Appik Studio entwickelt Webanwendungen mit React und Next.js. Diese drei Projekte umfassen die Plattform des Prix de Lausanne, die digitalen Pferdepässe von Equipass und die Benutzeroberflächen von TuneInsight für die Zusammenarbeit auf verschlüsselten Daten.

Prix de Lausanne – Eine Kulturinstitution wird digital

Der Prix de Lausanne zählt zu den renommiertesten Ballettwettbewerben der Welt. Seit seiner Gründung 1973 entdeckt er jedes Jahr junge Talente des klassischen Tanzes im Alter von 15 bis 18 Jahren vor einer internationalen Jury. Die Veranstaltung zieht Kandidaten aus mehr als 20 Ländern an und wird von einer weltweiten Gemeinschaft von Tanzfachleuten verfolgt.

Wir entwickelten die Webplattform, um die Digitalisierung dieses bedeutenden Anlasses zu unterstützen: Verwaltung der Anmeldungen mit Upload von Vorauswahlvideos, detaillierte Kandidatenprofile mit Werdegang und Fotos, Verfolgung des Wettbewerbs in Echtzeit und Veröffentlichung der Resultate. Das System deckt den gesamten Ablauf von der Online-Bewerbung bis zur Publikation der Ergebnisse ab, einschliesslich Juryverwaltung und Zeitplanung der Auftritte.

Die Benutzeroberfläche ist für ein internationales Publikum ausgelegt: mehrsprachig, responsiv und mit einer Gestaltung, die die Eleganz des klassischen Tanzes aufnimmt. Die Ladeleistung ist entscheidend, weil Besucherspitzen während des Wettbewerbs die Anzahl Besucher verzehnfachen können.

Technologien: React, Next.js, statische Generierung (SSG) für stark besuchte Seiten, Server Side Rendering (SSR) für dynamische Daten und eine responsive Oberfläche für ein internationales Publikum.

Die Herausforderung: die erwartete visuelle Eleganz einer Kulturinstitution mit der technischen Robustheit für einen Anlass von weltweiter Reichweite verbinden.

Equipass – Der digitale Pferdepass

Equipass ist eine Mobile-First-Webanwendung für digitale Pferdepässe, entwickelt für einen internationalen Reitsportverband mit Sitz in Lausanne. Die Plattform zentralisiert Identifikationsdaten von Pferden, Gesundheitsdossiers und die Nachverfolgbarkeit grenzüberschreitender Bewegungen.

Technologien: React, Next.js, interaktive Dashboards mit Bibliotheken zur Datenvisualisierung sowie Datenverwaltung mit erweitertem State Management.

Die Herausforderung: eine intuitive Plattform für komplexe regulatorische Daten schaffen, die sowohl für Fachpersonen des Pferdesports als auch für Veterinärbehörden zugänglich ist.

TuneInsight – Kryptografie zugänglich machen

TuneInsight ist ein Schweizer Privacy-Tech-Startup, das Multiparty Homomorphic Encryption entwickelt hat. Vereinfacht gesagt ermöglicht diese Technologie mehreren Organisationen die Zusammenarbeit bei Datenanalysen, ohne Rohdaten jemals auszutauschen. Die Daten bleiben während des gesamten Berechnungsprozesses verschlüsselt.

Die Technologie wird in Schweizer Spitälern (CHUV, Inselspital und Universitätsspital Zürich) für onkologische Analysen sowie im Finanz- und Rechtsbereich eingesetzt.

Wir arbeiteten an den Weboberflächen der Datenkollaborationsplattform. Die zentrale Herausforderung bestand darin, komplexe kryptografische Konzepte über eine klare, intuitive Benutzeroberfläche verständlich zu machen. Wir entwickelten ein visuelles Workflow-System, mit dem Nutzer mehrstandortige statistische Analysen in wenigen Schritten konfigurieren können, inklusive Echtzeitvisualisierung aggregierter Resultate und einem granulären Berechtigungssystem für den Datenzugriff.

Technologien: React, TypeScript, Oberflächen zur Datenvisualisierung und interaktive Workflow-Komponenten.

Die Herausforderung: komplexe kryptografische Abläufe in visuelle Workflows übersetzen, die für nicht technische Nutzer wie Ärzte, Analysten und Juristen verständlich sind.

Moderne Webarchitektur: SSR, CSR, ISR und Edge

Die Webentwicklung im Jahr 2026 bietet mehrere Rendering-Strategien, die vor wenigen Jahren noch nicht verfügbar waren. Die passende Architektur für jedes Projekt zu wählen, ist wesentlich für Leistung, Suchmaschinenoptimierung und Benutzererlebnis.

Server Side Rendering (SSR)

SSR erzeugt HTML auf dem Server für jede Anfrage. Dieser Ansatz eignet sich für Seiten mit häufig wechselnden Inhalten, die von Suchmaschinen indexiert werden müssen: Dashboards mit Echtzeitdaten, Suchergebnisseiten und Benutzerprofile. So setzen wir die dynamischen Seiten des Prix de Lausanne während des Wettbewerbs um.

Statische Generierung (SSG) und ISR

SSG erzeugt Seiten bereits beim Build. Das ist die leistungsstärkste Lösung für Inhalte, die sich selten ändern: Startseiten, Serviceseiten und Blogartikel. Incremental Static Regeneration (ISR) verbindet beide Ansätze, indem statische Seiten in definierten Abständen neu erzeugt werden können, ohne die ganze Website neu zu bauen.

Edge Computing

Edge Functions führen Code möglichst nah bei den Nutzern auf weltweit verteilten Servern aus. Das verringert die Latenz für ein internationales Publikum deutlich – ein wichtiger Vorteil für eine Plattform wie den Prix de Lausanne, die aus mehr als 20 Ländern aufgerufen wird.

React Server Components

Mit Next.js 16 und React Server Components können Teile der Benutzeroberfläche auf dem Server gerendert werden, ohne JavaScript an den Browser zu senden. Das Ergebnis sind schlankere Bundles, schnellere Ladezeiten und ein besseres Erlebnis bei langsamen Verbindungen.

Weshalb Next.js?

Diese drei Projekte zeigen, weshalb wir Next.js als Pfeiler unseres Web-Stacks gewählt haben:

• Leistung auf hohem Niveau: Next.js bietet SSR, SSG, ISR und Edge Computing. Damit wählen wir für jede Seite die passende Rendering-Strategie.
• App Router und React Server Components: eine moderne Architektur im React-Ökosystem mit dateibasiertem Routing, verschachtelten Layouts und Streaming.
• Automatische Optimierung: Next.js optimiert Bilder (AVIF, WebP), Schriften und Code-Splitting automatisch. Das verzögerte Laden von Komponenten ist integriert.
• Flexibilität: von der eleganten Website des Prix de Lausanne bis zum technischen Dashboard von TuneInsight passt sich React unterschiedlichen Anforderungen an.
• Ökosystem: TypeScript, Tausende Bibliotheken und eine grosse Community sorgen dafür, dass Teams nicht blockiert bleiben.
• Mobile Synergien: Unsere React-Erfahrung lässt sich direkt auf React Native für mobile Anwendungen übertragen; Kunden können Code zwischen Web und Mobile teilen.

Web-Performance optimieren: Core Web Vitals

Wir nutzen die Core Web Vitals, um Ladezeit, Reaktionsfähigkeit und visuelle Stabilität einer Seite zu messen.

LCP (Largest Contentful Paint)

LCP misst die Ladezeit des grössten sichtbaren Elements. Unser Ziel liegt unter 2.5 Sekunden. Das erreichen wir mit Bildoptimierung (AVIF- und WebP-Formate, Lazy Loading, responsive Bilder über Next/Image), SSR-/SSG-Prerendering und konsequentem CDN-Caching.

INP (Interaction to Next Paint)

INP misst, wie schnell die Oberfläche auf Interaktionen reagiert. Wir streben einen INP unter 200 ms an und optimieren dafür JavaScript: Code-Splitting nach Route, verzögertes Laden nicht kritischer Komponenten und React Server Components, um weniger JavaScript an den Browser zu senden.

CLS (Cumulative Layout Shift)

CLS misst die visuelle Stabilität einer Seite. Nichts ist ärgerlicher als ein Button, der sich verschiebt, gerade wenn Sie ihn anklicken wollen. Wir vermeiden solche Layout-Verschiebungen, indem wir Platz für Bilder und Werbung reservieren, Schriften mit font-display swap einsetzen und dynamische Inhalte oberhalb des sichtbaren Bereichs vermeiden.

Weshalb Leistung fürs Geschäft wichtig ist

Google nutzt die Core Web Vitals seit 2021 als Ranking-Signal. Seiten, die die Grenzwerte verlässlich einhalten, können in den Suchresultaten besser platziert werden. Über SEO hinaus beeinflusst die Leistung direkt die Conversion: Studien zeigen, dass eine Verzögerung der Ladezeit um eine Sekunde die Conversion um bis zu 7 % senken kann. Bei einem E-Commerce-Shop mit CHF 100’000 Monatsumsatz entspräche das bis zu CHF 7’000 pro Monat aufgrund langsamer Seiten.

Ihr Webprojekt

Wir entwickeln Unternehmenswebsites, SaaS-Plattformen und Business-Dashboards von der Konzeption bis zum Produktivbetrieb.

Entdecken Sie unsere Webentwicklung oder nehmen Sie Kontakt auf, um Ihr Projekt zu besprechen.

Siehe auch: Entwicklung mobiler Apps.