BÜŞRA ELİF KUTLU
Product-minded frontend developer · Istanbul

Understanding user needs,
engineering products,
maximizing value.

I’m a frontend developer who turns complex product needs into clear, dependable digital experiences. I bring thoughtful interface design and careful engineering together, paying attention to how a product feels, performs, and earns people’s trust.

FRONTEND DEVELOPMENT · USER-FOCUSED · PRODUCT-MINDED
KRAKEN · CONNECTING
₿
Bitcoin / US Dollar
BTC-USD · KRAKEN EXCHANGE
Loading…24H
BEST BID —BEST ASK —SPREAD Waiting for ticker
EARLIERRECENT UPDATESNOW
KRAKEN · LIVE TICKERUPDATES 0
LIVE CRYPTO / KRAKEN SPOTCONNECTING TO PUBLIC FEEDENGINEERING DEMO · REAL-TIME FEED
01 / Profile

Fintech experience, built around people.

BKBüşra Elif KutluFrontend Developer · Istanbul, Turkey

I’m Elif, a frontend developer focused on secure, high-traffic fintech products. My experience spans React and TypeScript product development, scalable state management, microfrontend architecture, and performance-focused engineering.

I’m currently deepening my Next.js, full-stack integration, and AI product skills through independent projects. My Communication Design background gives me a design-driven eye for accessible, mobile-first interfaces and clear product experiences.

3+years building fintech products
−60%build time after infrastructure migration
Millionsof users reached by iyzico products
EDUCATIONYıldız Technical University

B.A. Communication Design · Honors Student
2017 — 2021 · Interactive Media Design Program · Istanbul

CERTIFICATESFrontend + UI/UX

iyzico Frontend Practicum · Patika.Dev
Aug 2022 — Oct 2022 · Istanbul

UI/UX Design Bootcamp · Techcareer.net
May 2022 — Jun 2022 · Istanbul

LANGUAGESTurkish · Native

English · Intermediate

02 / Experience

Building payment products at scale.

iyzicoFrontend DeveloperNov 2022 — Aug 2025 · IstanbulPRODUCT DEVELOPMENT
03 / Capabilities

The tools behind the work.

Frontend craft, product thinking, and the engineering practices I use to ship and improve reliable experiences.

Frontend
React.jsNext.jsReact NativeTypeScriptTailwind CSSStyled-Components
State management
Redux-SagaRedux ToolkitZustandContext API
Architecture + performance
Micro FrontendSSR / SSGPerformance OptimizationCross-browser
Backend + data
Node.jsREST APIsSupabasePrisma
Testing + quality
Jest / RTLCypressGitHub ActionsSentry / SonarESLint
Design + build tools
FigmaAdobe XDSketchMiroViteWebpack
How I workCross-functional collaborationOwnership & initiativeDesign-minded communicationProblem solvingAgile adaptabilityMentorship & code reviewContinuous learning mindset
04 / Selected projects

Products, platforms, and the details behind them.

Professional and independent work, with the scope and engineering choices made clear.

03IYZICO · INFRASTRUCTURE

Frontend Infrastructure Modernization

Modernized the build setup across applications to shorten the feedback loop for engineers.

WebpackViteCI/CD
My contributions
  • Led the Webpack-to-Vite migration across applications, reducing build times by 60%.
  • Improved developer experience, CI/CD efficiency, and overall application performance.
05PERSONAL · ONGOING · MOBILE

Sorana

An AI-powered daily reflection app with an animated, card-based experience.

React NativeTypeScriptRedux ToolkitZustandAsyncStorage
Building the app
  • Building a cross-platform mobile application with React Native and TypeScript.
  • Using Redux Toolkit, Zustand, and AsyncStorage for persistent state management and scalable architecture.
  • Designing dynamic, animated card-based UI interactions with a polished, product-focused user experience.
02IYZICO · PROFESSIONAL

CheckoutForm

A high-performance payment interface built to handle large transaction volumes.

PerformanceAccessibilityREST APIs
My contributions
  • Developed and maintained the payment interface.
  • Focused on performance, reliability, cross-browser compatibility, and accessibility.
  • Worked closely with backend teams to consume REST APIs and optimize data flow.
04PERSONAL · JAN 2025 — PRESENT

Roamly

An AI-powered travel guide platform with swipeable, personalized country guides.

Next.js 14TypeScriptSupabasePrismaStripeAnthropic SDK
Building the platform
  • Building a full-stack project from scratch using Next.js 14 and TypeScript, SSR and SSG, styled with Tailwind CSS.
  • Using Supabase, Postgres, and Prisma for authentication and data workflows.
  • Integrating Stripe for billing and the Anthropic SDK for AI personalization.
  • Deployed on Vercel; designed structured, swipeable UI cards for the guide experience.
05 / Real-time market systems

Market data has a pulse.

I built this trading interface around what makes live data useful: last trade, bid and ask, spread, freshness, and connection state. Next.js serves the initial REST snapshot; one cached WebSocket stream feeds the React views through Redux Toolkit Query.

LIVE MARKET DEMO · PUBLIC KRAKEN SPOT DATA
LIVE MARKET MONITORCONNECTING
Bitcoin selected
BTC / USDBitcoin
MARKET DATA FEED
Loading the latest public market snapshot…
—24H24H CHANGE
RECENT PRICE UPDATESLIVE
BEST BIDWaiting for ticker
BEST ASKWaiting for ticker
SPREAD—
24H VOLUME—
Kraken ticker · 0 events receivedWaiting for first updateFrame batch —
PRODUCT ENGINEERING DEMO · PUBLIC KRAKEN SPOT DATA · READ-ONLY
React UIRenders live quotes
→
Redux Toolkit QueryCache · connection state
→
REST · GET /api/marketInitial price snapshot
→
Next.js Route HandlerFetches Kraken snapshot
LIVE UPDATES Kraken public WebSocket v2 ticker → Redux cache → React UI · data source ↗
U.S. equity feed

From crypto ticks to stock trades.

The same attention to freshness and recovery, applied to U.S. equities. A server-side Finnhub connection streams trade updates into this compact watchlist.

U.S. EQUITIES · FINNHUB

Stocks, in motion.

CONNECTING
SELECTED · AAPLWaiting for quote
Loading the latest equity snapshot…0 stream trades
Finnhub REST snapshot + server-relayed WebSocket trades · Free personal API key · US equities
06 / Browser profiling

Fast is a product feature.

Performance should be measured in the browser people use. This page instruments Core Web Vitals signals and main-thread work, then keeps the live view intentionally small.

IN THIS BROWSER SESSION

Performance, observed.

NOT SUPPORTED
MeasuringLargest contentful paintTarget ≤ 2,500 ms
0.000Cumulative layout shiftTarget ≤ 0.10
—Longest main-thread taskLong task threshold: 50 ms
—Slowest observed eventSession sample, not INP

Measured with the browser Performance API. Values depend on your device and network; metrics fill in as the page loads and you interact.

01One stream, shared cache

RTK Query owns the WebSocket lifecycle, so the chart, watchlist, and tape read the same market subscription.

02Bounded chart history

The BTC sparkline keeps its latest 36 frame snapshots, keeping SVG work predictable as updates arrive.

03Profile before adding weight

Native SVG and browser measurements keep this demo inspectable without a heavy charting layer.

07 / Reliability engineering

Design for the failure paths.

Financial interfaces earn trust through predictable behavior when data is late, incomplete, or arriving faster than the screen can paint it.

STARTUP · RESTBounded, validated snapshot

Each public stats request has a 5-second timeout and numeric validation. Successful symbols still render if another symbol fails; a 502 is returned only when none are usable.

RECOVERY · WEBSOCKET + RESTKeep prices fresh during reconnects

Heartbeat checks detect a silent feed. Reconnects use capped backoff, resume when the page returns online, and show a lightweight REST price fallback while the WebSocket recovers.

LOAD · RENDERINGKeep up without repainting every tick

Incoming messages are coalesced per symbol and flushed on animation frames. Every event is counted, while the UI keeps only the newest quote per frame and a bounded chart history.

TRUST · UI STATEMake data provenance visible

Source, socket state, update count, and retry count stay visible. Clear data provenance helps people judge freshness and understand the live market view.

08 / Product design system

Every signal has a job.

A compact interface system for scanning live markets quickly, keeping state legible, and making the next action obvious.

CanvasTerminal base
SurfaceRaised panels
PositivePrice up · active
NegativePrice down · error
PaperReading surface
AaType + space3 fonts · 4px base
01 · SCANPrice first, context beside it

The selected market stays in one place while bid, ask, spread, and volume remain easy to compare.

02 · SIGNALState uses words and color

Live, reconnecting, and error labels keep connection health understandable without relying on color alone.

03 · CONTROLSelection keeps context

Native keyboard-operable market buttons update the detail view in place; on mobile, the watchlist becomes a horizontal strip.

04 · RECOVERYWaiting and failure have a path

Loading feedback preserves the terminal layout, while API errors offer a direct retry and stream interruptions show reconnection status.

09 / Next

Let’s build products people trust.

Open to frontend developer opportunities in fintech and beyond.