Senior Frontend Engineer at Marketing Agency (Remote, PH based only)

Wir suchen einen Senior Frontend Engineer, der remote von den Philippinen aus für einen in Deutschland ansässigen Kunden von OTA arbeitet. Für diese Stelle verarbeiten wir nur Kandidaten, die auf den Philippinen ansässig sind und eine rechtliche Erlaubnis haben, dort zu arbeiten.

Über den OTA-Kunden

Eine hochmoderne SaaS-Plattform, die Kreatoren, Influencern und digitalen Vermarktern hilft, ihre Social-Media-Leistung zu verstehen und zu optimieren. Wir aggregieren, analysieren und benchmarken Metriken von Instagram, TikTok und anderen sozialen Plattformen und bieten Echtzeit-Dashboards, Engagement-Insights und Wettbewerbsanalysen, die Geschäftsentscheidungen vorantreiben.

Die Rolle

Wir suchen einen Senior Frontend Engineer, der unserem Engineering-Team beitritt und hilft, die nächste Generation von Social-Media-Analysetools zu entwickeln. Sie werden an einem modernen, typensicheren Stack arbeiten, der Echtzeit-Datenvisualisierung, nahtlose OAuth-Integrationen und eine intuitive Benutzererfahrung bietet, die komplexe Analysen für nicht-technische Benutzer zugänglich macht. Dies ist eine hochwirksame Rolle, in der Sie Funktionen von Anfang bis Ende entwerfen, direkt mit Produkt und Design zusammenarbeiten und unsere Engineering-Kultur gestalten, während wir skalieren.

Was Sie tun werden

Kernverantwortlichkeiten

• Produktion Features erstellen: Entwerfen und Implementieren neuer Funktionen in unserer Next.js-Anwendung, von der Datenabfrage bis zu interaktiven Visualisierungen mit Bibliotheken wie Visx und TanStack Table.
• Client-Seitenstatus architektonisch gestalten: Skalierbare Muster mit Zustand für globalen Status und React Query für Serverstatusmanagement entwerfen, um optimale Leistung und Cache-Invalidierungsstrategien sicherzustellen.
• Den gesamten Stack besitzen: An Server- und Client-Komponenten im Next.js App Router arbeiten, API-Routen, Middleware und Edge-Funktionen implementieren, wenn nötig.
• Außergewöhnliche UX gestalten: Reaktionsfähige, zugängliche Schnittstellen mit shadcn/ui, Radix-Primitiven und Tailwind CSS mit akribischer Aufmerksamkeit für Details erstellen.
• Typensicherheit gewährleisten: TypeScript rigoros nutzen, mit automatisch generierten Datenbanktypen arbeiten und typensichere Abstraktionen für komplexe Datenstrukturen erstellen.
• Codequalität vorantreiben: Testbaren, wartbaren Code mit umfassenden E2E-Tests (Cypress) schreiben, an Code-Reviews teilnehmen und die Engineering-Standards einhalten.
• Cross-funktional zusammenarbeiten: Mit Produktmanagern, Designern und Backend-Entwicklern zusammenarbeiten, um kohärente Funktionen zu liefern, die die Benutzer begeistern.

Tagtägliche Arbeit

• Neue Dashboard-Visualisierungen für Engagementmetriken, Followerwachstum und Wettbewerbsbenchmarks implementieren.
• Drittanbieter-APIs (Instagram, TikTok) mit OAuth-Flows integrieren und komplexe Authentifizierungszustände verwalten.
• Leistung für große Datensätze optimieren, Virtualisierung, Paginierung und intelligente Caching-Strategien implementieren.
• Wiederverwendbare Komponentenbibliotheken und Designsystem-Tokens erstellen.
• Produktionsprobleme mit Sentry, PostHog-Analysen und Anwendungsprotokollen debuggen.
• An Agile-Zeremonien teilnehmen: Sprintplanung, tägliche Stand-ups, Sprint-Reviews und Retrospektiven.

Was wir suchen

Erforderliche Erfahrung

• 5+ Jahre professionelle Frontend-Entwicklung, davon mindestens 2 Jahre in produktiven React-Anwendungen.
• Tiefe React-Expertise: Hooks, Context, Server Components, Suspense und moderne Muster.
• Next.js-Kenntnisse: Erfahrung mit App Router, API-Routen, Edge-Funktionen, Serveraktionen, Middleware und Bereitungsoptimierung (Next.js 13+ erforderlich).
• TypeScript-Meisterschaft: Sicher im Umgang mit Generics, diskriminierten Unions, Typinferenz und dem Aufbau typensicherer APIs.
• Erfahrung im Statusmanagement: Zustand, Redux, Jotai oder ähnliches.
• API-Integrationsfähigkeiten: RESTful APIs, GraphQL, Fehlerbehandlung, optimistische Updates und Caching-Strategien.
• Moderne CSS-Kenntnisse: Bevorzugt Tailwind CSS, aber tiefes Verständnis von CSS-in-JS, CSS-Modulen oder styled-components wird ebenfalls geschätzt.
• Testmentalität: Erfahrung mit Cypress, Playwright, Jest oder Testing Library für E2E- und Unit-Tests.

Bevorzugte Erfahrung

• Erfahrung mit Datenvisualisierungsbibliotheken (Visx, D3.js, Recharts, Chart.js).
• TanStack Query (React Query) für Serverstatusmanagement.
• Supabase oder Firebase: Verständnis von BaaS-Mustern, Echtzeit-Abonnements und RLS.
• Vercel-Bereitstellungen: Vertrautheit mit Edge-Funktionen, Vorschauumgebungen und CI/CD.
• shadcn/ui oder Radix UI: Erstellung zugänglicher Komponentenbibliotheken.
• OAuth-Flows und komplexe Authentifizierungszustände (Multi-Workspace, Team-Berechtigungen).
• PostgreSQL und SQL: Fähigkeit, Datenbankschemas zu verstehen und Abfragen zu optimieren.
• Framer Motion oder andere Animationsbibliotheken für polierte Interaktionen.
• Monorepo-Erfahrung (Turborepo, Nx), während wir unseren Codebase skalieren.

Nice-to-Have (Bonus)

• Python-Erfahrung: Unser Sentiment-Analyse-Backend basiert auf Python in GCP; die Fähigkeit, zu Python-APIs beizutragen, ist ein Plus, aber nicht erforderlich.
• GCP-Vertrautheit (Cloud Functions, Cloud Storage, BigQuery): Verständnis der Cloud-Architektur hilft bei Integrationsarbeiten.
• DevOps-Wissen: GitHub Actions, Docker, Umweltmanagement.
• Beobachtungswerkzeuge: Sentry, PostHog, OpenTelemetry.

Technisches Umfeld

Kerntechnologien

• Framework: Next.js 15 (App Router, Turbopack).
• UI-Bibliothek: React 19 (Server Components, Suspense).
• Sprache: TypeScript (strenger Modus).
• Styling: Tailwind CSS + CSS-Variablen.
• Komponenten: shadcn/ui (Radix UI-Primitiven).

Status & Daten

• Globaler Status: Zustand mit localStorage-Persistenz.
• Serverstatus: TanStack Query (React Query).
• Datenbank: Supabase (PostgreSQL mit RLS).
• Auth: Supabase Auth (JWT-Sitzungen, OAuth).

Visualisierung & UX

• Diagramme: Visx (D3-basiert).
• Tabellen: TanStack Table.
• Formulare: Formik + Yup-Validierung.
• Animationen: Framer Motion.
• Symbole: Lucide React.

Entwicklererfahrung

• Paketmanager: npm.
• Linting: ESLint (flaches Konfigurationsformat).
• Formatierung: Prettier.
• Testing: Cypress (E2E), Deno-Tests (Edge-Funktionen).
• Überwachung: Sentry (Fehler & Leistung).
• Analytik: PostHog (Produktanalytik).
• Versionskontrolle: GitHub mit trunk-basierter Entwicklung.
• CI/CD: Vercel (Frontend) + Supabase-Branching (Datenbankvorschauen).
• Secrets: Dotenvx (verschlüsselte Umgebungsvariablen).

Warum Sie diese Rolle lieben werden

Technisches Wachstum

• Moderne Stack: Arbeiten Sie mit bahnbrechenden Technologien (React 19, Next.js 15), bevor sie Mainstream werden.
• Echte Architekturherausforderungen: Bewältigen Sie Echtzeitdaten, komplexe OAuth-Flows, Multi-Tenant-Workspaces und großangelegte Datenvisualisierung.
• Volle Verantwortung: Versenden Sie Funktionen von der Konzeption bis zur Produktion mit Autonomie über technische Entscheidungen.
• Best Practices: Trunk-basierte Entwicklung, Feature-Branches mit Vorschauumgebungen, automatisiertes Testen und strenge Typensicherheit.

Produktimpact

• Benutzerorientiert: Entwickeln Sie Tools, die sich direkt auf das Einkommen und die Marketingstrategien von Kreatoren auswirken.
• Datengetrieben: Arbeiten Sie mit faszinierenden Social-Media-Daten zu Engagement-Trends, Sentiment-Analysen und Wettbewerbsanalysen.
• Visuelles Geschichtenerzählen: Wandeln Sie komplexe Analysen in intuitive, schöne Visualisierungen um.

Team & Kultur

• Hochwertiger Code: Arbeiten Sie in einem gut strukturierten, dokumentierten Code (überprüfen Sie unsere copilot-instructions.md!).
• Agile/Scrum-Methodik: Zweiwöchige Sprints mit klaren Zielen, regelmäßigen Retrospektiven und kontinuierlicher Verbesserung.
• Kollaborative Umgebung: Pair Programming, durchdachte Code-Reviews und Wissensaustausch.
• Remote-freundlich: Flexible Arbeitsbedingungen mit asynchroner Kommunikation.
• Kontinuierliches Lernen: Budget für Konferenzen, Kurse und berufliche Entwicklung.

Unsere Engineering-Prinzipien

• Typensicherheit zuerst: Nutzen Sie TypeScript, um Fehler zur Kompilierzeit zu erfassen, nicht in der Produktion.
• Serverkomponenten standardmäßig: Verwenden Sie React Server Components für optimale Leistung, Client-Komponenten nur bei Bedarf.
• Progressive Verbesserung: Entwickeln Sie Funktionen, die ohne JavaScript funktionieren, und verbessern Sie dann.
• Zugänglichkeit zählt: Jede Komponente sollte mit der Tastatur navigierbar und für Screenreader geeignet sein.
• Trunk-basierte Entwicklung: Kleine, häufige Commits mit Feature-Flags anstelle von langlebigen Branches.
• Dokumentation als Code: Selbstdokumentierender Code mit hilfreichen Kommentaren, wo Komplexität unvermeidlich ist.
• Beobachtbarkeit eingebaut: Jede Funktion wird mit Fehlerverfolgung, Leistungsüberwachung und Analytik ausgeliefert.

Interviewprozess

• Erstgespräch (15 Min): Gespräch mit dem OTA-Team.
• Technisches Screening (60 Min): Live-Coding-Sitzung - erstellen Sie eine kleine React-Komponente mit TypeScript.
• Systemdesign (60 Min): Entwerfen Sie eine Funktion von Anfang bis Ende (z.B. Echtzeit-Benachrichtigungssystem).
• Code-Review (45 Min): Überprüfen Sie einen PR aus unserem Code, diskutieren Sie Trade-offs und Verbesserungen.
• Teamfit (30 Min): Treffen Sie Teammitglieder und stellen Sie Fragen zur täglichen Arbeit.
• Angebot (Wir handeln schnell für starke Kandidaten (typischerweise 5-7 Werktage)).

Wir schätzen Ihre Zeit und geben Ihnen in jeder Phase Feedback.