Senior Frontend Engineer at Marketing Agency

OneTeamAnywhere; Hamburg; Hybrid; EUR 65.000 - 85.000; Vollzeit

Zusammenfassung

A dynamic technology platform in Hamburg is seeking a Senior Frontend Engineer to advance their innovative SaaS analytics tools. In this role, you'll design new features using Next.js and engage in cross-functional collaboration, focusing on user-friendly data visualizations and optimizing for performance. Applicants should possess a strong background in frontend development with React, extensive knowledge of TypeScript, and a passion for building impactful software. This role offers flexible working arrangements and significant growth opportunities.

Leistungen

Flexible working hours

Budget for professional development

Remote-friendly culture

Qualifikationen

• 5+ years of professional frontend development experience.
• Deep understanding of React and its modern features.
• Proficient in Next.js and TypeScript.

Aufgaben

• Design and implement features in a Next.js application.
• Collaborate with product managers and designers.
• Develop responsive and accessible user interfaces.

Kenntnisse

Frontend development

React expertise

TypeScript mastery

API integration

State management

Testing mindset

Modern CSS

Ausbildung

Bachelor's degree in Computer Science or related field

Tools

Next.js

Cypress

Tailwind CSS

Jobbeschreibung

About Us

We're building a cutting-edge SaaS platform that empowers creators, influencers, and digital marketers to understand and optimize their social media performance. We aggregate, analyze, and benchmark metrics from Instagram, TikTok, and other social platforms, providing real‑time dashboards, engagement insights, and competitive intelligence that drive business decisions.

The Role

We're seeking a Senior Frontend Engineer to join our engineering team and help build the next generation of social media analytics tools. You'll work on a modern, type-safe stack delivering real‑time data visualization, seamless OAuth integrations, and intuitive UX that makes complex analytics accessible to non‑technical users.

This is a high‑impact role where you'll architect features end‑to‑end, collaborate directly with product and design, and shape our engineering culture as we scale.

What You’ll Do

Core Responsibilities

• Build Production Features: Design and implement new features across our Next.js application, from data fetching to interactive visualizations using libraries like Visx and TanStack Table.
• Architect Client‑Side State: Design scalable patterns using Zustand for global state and React Query for server‑state management, ensuring optimal performance and cache invalidation strategies.
• Own the Full Stack: Work across server and client components in Next.js App Router, implementing API routes, middleware, and Edge Functions when needed.
• Craft Exceptional UX: Build responsive, accessible interfaces using shadcn/ui, Radix primitives, and Tailwind CSS with meticulous attention to detail.
• Ensure Type Safety: Leverage TypeScript rigorously, working with auto‑generated database types and creating type‑safe abstractions for complex data structures.
• Drive Code Quality: Write testable, maintainable code with comprehensive E2E tests (Cypress), participate in code reviews, and uphold engineering standards.
• Collaborate Cross‑Functionally: Partner with product managers, designers, and backend engineers to deliver cohesive features that delight users.

Day‑to‑Day Work

• Implement new dashboard visualizations for engagement metrics, follower growth, and competitor benchmarking.
• Integrate third‑party APIs (Instagram, TikTok) with OAuth flows and handle complex authentication states.
• Optimize performance for large datasets, implementing virtualization, pagination, and smart caching strategies.
• Build reusable component libraries and design system tokens.
• Debug production issues using Sentry, PostHog analytics, and application logs.
• Participate in Agile ceremonies: sprint planning, daily standups, sprint reviews, and retrospectives.

What We’re Looking For

Required Experience

• 5+ years of professional frontend development, with at least 2 years in React‑based production applications.
• Deep React expertise: Hooks, Context, Server Components, Suspense, and modern patterns (you can explain when to use useCallback vs useMemo and why).
• Next.js proficiency: Experience with App Router, API routes, Edge Functions, server actions, middleware, and deployment optimization (Next.js 13+ required).
• TypeScript mastery: Comfortable with generics, discriminated unions, type inference, and building type‑safe APIs.
• State management experience: Zustand, Redux, Jotai, or similar you understand trade‑offs between different state solutions.
• API integration skills: RESTful APIs, GraphQL, error handling, optimistic updates, and caching strategies.
• Modern CSS: Tailwind CSS preferred, but deep understanding of CSS‑in‑JS, CSS modules, or styled‑components also valued.
• Testing mindset: Experience with Cypress, Playwright, Jest, or Testing Library for E2E and unit tests.
• Backend‑as‑a‑Service (BaaS) experience: Supabase, Firebase, or similar platforms understanding of PostgreSQL, Row Level Security (RLS), and database‑driven authorization.
• Security awareness: Understanding of environment variable management, secret handling, authentication flows, and data isolation patterns.

Preferred Experience

• Experience with data visualization libraries (Visx, D3.js, Recharts, Chart.js).
• TanStack Query (React Query) for server‑state management.
• Vercel deployments familiarity with edge functions, preview environments, and CI/CD.
• shadcn/ui or Radix UI building accessible component libraries.
• OAuth flows and complex authentication states (multi‑workspace, team permissions).
• Framer Motion or other animation libraries for polished interactions.
• Monorepo experience (Turborepo, Nx) as we scale our codebase.

Nice‑to‑Have (Bonus)

• Python experience: our sentiment analysis backend is Python‑based on GCP; ability to contribute to Python APIs is a plus but not required.
• GCP familiarity (Cloud Functions, Cloud Storage, BigQuery) understanding of cloud architecture helps with integration work.
• DevOps knowledge: GitHub Actions, Docker, environment management.
• Observability tools: Sentry, PostHog, OpenTelemetry.

Technical Environment

Core Technologies

• Framework: Next.js 15 (App Router, Turbopack)
• UI Library: React 19 (Server Components, Suspense)
• Language: TypeScript (strict mode)
• Styling: Tailwind CSS + CSS Variables
• Components: shadcn/ui (Radix UI primitives)

State & Data

• Global State: Zustand with localStorage persistence
• Server State: TanStack Query (React Query)
• Database: Supabase (PostgreSQL with RLS)
• Auth: Supabase Auth (JWT sessions, OAuth)

Visualization & UX

• Charts: Visx (D3‑powered)
• Tables: TanStack Table
• Forms: Formik + Yup validation
• Animations: Framer Motion
• Icons: Lucide React

Developer Experience

• Package Manager: npm
• Linting: ESLint (flat config)
• Formatting: Prettier
• Testing: Cypress (E2E), Deno tests (Edge Functions)
• Monitoring: Sentry (errors & performance)
• Analytics: PostHog (product analytics)
• Version Control: GitHub with trunk‑based development
• CI/CD: Vercel (frontend) + Supabase branching (database previews)
• Secrets: Dotenvx (encrypted environment variables)

Why You’ll Love This Role

Technical Growth

• Modern Stack: Work with bleeding‑edge technologies (React 19, Next.js 15) before they’re mainstream.
• Real Architecture Challenges: Handle real‑time data, complex OAuth flows, multi‑tenant workspaces, and large‑scale data visualization.
• Full Ownership: Ship features from conception to production with autonomy over technical decisions.
• Best Practices: Trunk‑based development, feature branches with preview environments, automated testing, and strict type safety.

Product Impact

• User‑Focused: Build tools that directly impact creators’ livelihoods and marketing strategies.
• Data‑Driven: Work with fascinating social media data engagement trends, sentiment analysis, competitor insights.
• Visual Storytelling: Turn complex analytics into intuitive, beautiful visualizations.

Team & Culture

• High‑Quality Codebase: Work in a well‑architected, documented codebase (check our copilot‑instructions.md!).
• Agile/Scrum Methodology: Two‑week sprints with clear goals, regular retrospectives, and continuous improvement.
• Collaborative Environment: Pair programming, thoughtful code reviews, and knowledge sharing.
• Remote‑Friendly: Flexible work arrangements with async‑first communication.
• Continuous Learning: Budget for conferences, courses, and professional development.

Our Engineering Principles

1. Type Safety First: Leverage TypeScript to catch bugs at compile time, not production.
2. Server Components by Default: Use React Server Components for optimal performance, client components only when needed.
3. Progressive Enhancement: Build features that work without JavaScript, then enhance.
4. Accessibility Matters: Every component should be keyboard‑navigable and screen‑reader friendly.
5. Trunk‑Based Development: Small, frequent commits with feature flags over long‑lived branches.
6. Documentation as Code: Self‑documenting code with helpful comments where complexity is unavoidable.
7. Observability Built‑In: Every feature ships with error tracking, performance monitoring, and analytics.

Interview Process

1. Initial Screen (15 min): Chat with OTA team.
2. Take‑Home Challenge (5‑6 hours): Build a small analytics dashboard with Supabase, RLS, and our stack; we encourage AI‑assisted development and evaluate your architectural decisions.
3. Technical Deep Dive (60 min): Walk through your challenge solution, discuss trade‑offs, and extend the design.
4. System Design (60 min): Design a feature end‑to‑end (e.g., real‑time notification system).
5. Team Fit (30 min): Meet team members and ask questions about day‑to‑day work.
6. Offer: We move quickly for strong candidates (typically 5‑7 business days).