Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
397 lines (378 loc) · 22.9 KB
/
Copy pathindex.html
File metadata and controls
397 lines (378 loc) · 22.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-J3LQ4QXJ1N"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-J3LQ4QXJ1N');
</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5052032603028320" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Rachel Lee</title>
<meta name="description" content="Rachel Lee: Senior Software Engineer on Priceline's Developer Experience platform team. Design systems, React, GraphQL, and AI developer tooling.">
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<span id="top"></span>
<a class="skip-link" href="#main">Skip to main content</a>
<nav class="top-navigation" aria-label="Primary">
<div class="content">
<a class="logo" href="#top">RACHEL LEE</a>
<ul class="links">
<li><a class="link" href="#featured">Highlights</a></li>
<li><a class="link" href="#skills">Skills</a></li>
<li><a class="link" href="#portfolio">Portfolio</a></li>
<li><a class="link" href="#social">Social</a></li>
</ul>
</div>
</nav>
<main id="main">
<section class="intro">
<div class="container">
<div class="intro-grid">
<div class="intro-grid-item pic">
<img width="100px" class="img-circle profile-pic" src="images/profile_pic.jpg" alt="Portrait of Rachel Lee">
</div>
<div class="intro-grid-item name">
<h1 class="intro-name">Hi, I'm <span class="strong">Rachel</span>.</h1>
<p class="intro-role">Senior Software Engineer, Developer Experience @ Priceline</p>
</div>
</div>
<div class="intro-block hero-card">
<p class="hero-eyebrow">A little about me</p>
<p class="about-intro">I am on the Developer Experience platform team at Priceline focusing on web frontend and client architecture strategy. My platform work is grounded in years of leading high-traffic, customer-facing booking flows from search to checkout on product teams.</p>
<div class="about-facets">
<div class="about-facet about-facet--blue">
<span class="about-facet-icon" aria-hidden="true">🧭</span>
<p class="about-facet-title">Platform Strategy</p>
<p class="about-facet-desc">Web monorepo, design system, and a unified client data layer for the whole org</p>
</div>
<div class="about-facet about-facet--violet">
<span class="about-facet-icon" aria-hidden="true">🤖</span>
<p class="about-facet-title">AI-Powered Velocity</p>
<p class="about-facet-desc">Scaling developer speed with modern AI tooling</p>
</div>
<div class="about-facet about-facet--amber">
<span class="about-facet-icon" aria-hidden="true">🛠️</span>
<p class="about-facet-title">Product Engineering Focus</p>
<p class="about-facet-desc">Engineering the product details that drive accessibility and conversion</p>
</div>
</div>
</div>
</div>
</section>
<hr class="divider">
<section class="featured" id="featured">
<div class="featured-container">
<h2 class="intro-projects-grid">Featured Initiatives</h2>
<div class="featured-cards">
<div class="featured-card">
<h3 class="featured-card-title">Design System & Brand Strategy</h3>
<p class="featured-card-summary">Paired an enterprise-wide design system migration and brand refresh with React 19 readiness, retiring a legacy internal UI framework for a unified, consistent user experience across pages and faster, conversion-driving load times.</p>
<div class="featured-card-tags">
<span class="tag">React 19</span>
<span class="tag">Design Systems</span>
<span class="tag">Tailwind CSS</span>
<span class="tag">styled-components</span>
<span class="tag">Stakeholder Alignment</span>
<span class="tag">Technical Writing</span>
</div>
</div>
<div class="featured-card">
<h3 class="featured-card-title">Scaling AI Tooling</h3>
<p class="featured-card-summary">Built custom Model Context Protocol (MCP) servers and AI agent skills integrated with design and browser tooling. Rolled out across the monorepo, then extended to 8 web apps alongside the monorepo setup. Led 7 workshops guiding 50+ developers through hands-on adoption.</p>
<div class="featured-card-tags">
<span class="tag">MCP</span>
<span class="tag">Agent Skills</span>
<span class="tag">GitHub Actions</span>
<span class="tag">Design-to-Code</span>
<span class="tag">Workshops</span>
<span class="tag">Cross-Team Enablement</span>
<span class="tag">Mentorship</span>
</div>
</div>
<div class="featured-card">
<h3 class="featured-card-title">Visual Quality at Scale</h3>
<p class="featured-card-summary">Scaled visual regression testing infrastructure (Chromatic) from 8 to 38 projects (4.75x) across the monorepo and external apps, leading 60+ developers to ship 425+ merged design system pull requests through a shared internal configuration package.</p>
<div class="featured-card-tags">
<span class="tag">Chromatic</span>
<span class="tag">Storybook</span>
<span class="tag">Rush Monorepo</span>
<span class="tag">Org-Wide Adoption</span>
<span class="tag">Mentorship</span>
</div>
</div>
</div>
</div>
</section>
<hr class="divider">
<section class="expertise" id="skills">
<div class="expertise-container">
<div class="expertise-grid">
<div class="expertise-col">
<h2 class="intro-projects-grid">Skills</h2>
<div class="skills-groups">
<div class="skills-group">
<h3 class="skills-group-title">Frontend Architecture</h3>
<div class="skills-pills">
<span class="skill-pill">TypeScript</span>
<span class="skill-pill">React 18/19</span>
<span class="skill-pill">GraphQL (Apollo)</span>
<span class="skill-pill">Server Side Rendering</span>
<span class="skill-pill">Node</span>
<span class="skill-pill">Redux.js</span>
<span class="skill-pill">Rush Monorepo</span>
</div>
</div>
<div class="skills-group">
<h3 class="skills-group-title">Design Systems & Styling</h3>
<div class="skills-pills">
<span class="skill-pill">Tailwind CSS</span>
<span class="skill-pill">Base UI</span>
<span class="skill-pill">Storybook</span>
<span class="skill-pill">Chromatic</span>
<span class="skill-pill">styled-components</span>
</div>
</div>
<div class="skills-group">
<h3 class="skills-group-title">AI Tooling</h3>
<div class="skills-pills">
<span class="skill-pill">MCP</span>
<span class="skill-pill">Agent Skills</span>
<span class="skill-pill">Claude Code</span>
<span class="skill-pill">Cursor</span>
<span class="skill-pill">GitHub Actions</span>
<span class="skill-pill">Codefresh</span>
</div>
</div>
<div class="skills-group">
<h3 class="skills-group-title">Infrastructure & Cloud</h3>
<div class="skills-pills">
<span class="skill-pill">Kubernetes</span>
<span class="skill-pill">Docker</span>
<span class="skill-pill">Google Cloud Platform</span>
<span class="skill-pill">CI/CD</span>
<span class="skill-pill">Fastly / CDN</span>
</div>
</div>
<div class="skills-group">
<h3 class="skills-group-title">Leadership & Communication</h3>
<div class="skills-pills">
<span class="skill-pill">Technical Writing</span>
<span class="skill-pill">Public Speaking</span>
<span class="skill-pill">Workshops</span>
<span class="skill-pill">Mentorship</span>
<span class="skill-pill">Collaboration</span>
<span class="skill-pill">Stakeholder Alignment</span>
</div>
</div>
</div>
</div>
<hr class="divider expertise-divider">
<div class="expertise-col">
<h2 class="intro-projects-grid">Writing</h2>
<ul class="writing-list">
<li class="writing-item">
<a class="writing-title" href="https://medium.com/stackademic/resolving-hydration-errors-in-server-side-rendered-react-applications-c2f09daff7e5" target="_blank" rel="noopener noreferrer">Server-side Rendering & Hydration</a>
<p class="writing-excerpt">Tracking down hydration mismatches in production React apps, and the fixes that cut error rates by ~80%.</p>
<p class="writing-meta">Medium · Stackademic</p>
</li>
<li class="writing-item">
<a class="writing-title" href="https://medium.com/stackademic/setting-up-backing-services-in-frontend-applications-f9486b6d62d3" target="_blank" rel="noopener noreferrer">Backing Services for 12-Factor Apps</a>
<p class="writing-excerpt">Setting up backing services so teams could switch sandbox, on-prem, and cloud environments via configuration.</p>
<p class="writing-meta">Medium · Stackademic</p>
</li>
<li class="writing-item">
<a class="writing-title" href="https://medium.com/hydrogen-api/developing-the-hydro-mobile-app-b0945f610e56" target="_blank" rel="noopener noreferrer">Developing the Hydro Mobile App</a>
<p class="writing-excerpt">Behind the scenes of building a blockchain-based two-factor authentication app in React Native.</p>
<p class="writing-meta">Medium · Hydrogen</p>
</li>
<li class="writing-item">
<a class="writing-title" href="https://medium.com/hydrogen-api/authenticating-on-the-blockchain-with-hydro-web3-js-3a7de9cc906b" target="_blank" rel="noopener noreferrer">Authenticating on the Blockchain with web3.js</a>
<p class="writing-excerpt">A code walkthrough of authenticating users against a smart contract with web3.js.</p>
<p class="writing-meta">Medium · Hydrogen</p>
</li>
</ul>
</div>
</div>
</div>
</section>
<hr class="divider">
<section class="work" id="portfolio">
<div class="projects-grid-container">
<h2 class="intro-projects-grid">Portfolio</h2>
<div class="company-card company-card--featured company-card--priceline">
<div class="company-card-header">
<img src="images/priceline_logo.png" alt="" class="company-logo">
<div>
<h3 class="company-name"><a href="https://www.priceline.com" target="_blank" rel="noopener noreferrer">Priceline</a></h3>
<p class="company-meta">Developer Experience Platform · 2019–Present</p>
</div>
</div>
<p class="company-summary">Own platform strategy across the monorepo, design system, and GraphQL layer, powering 9 apps and 60+ engineers org-wide.</p>
<div class="achievement-badge">
<span class="achievement-badge-icon" aria-hidden="true">🏆</span>
<div>
<p class="achievement-badge-title">Hackathon Grand Prize, 2020</p>
<p class="achievement-badge-desc">Won Grand Prize out of 19 teams, in collaboration with Alvin Tang, for an interactive mapping feature that visualizes customer trip itineraries with real-time route optimization.</p>
</div>
</div>
<ul class="impact-list">
<li>Resolved production hydration errors across client-facing React apps, cutting error rates by ~80% and initial load time by ~15%, and eliminating recurring PagerDuty alerts that had been waking up on-call engineers. <a href="https://medium.com/stackademic/resolving-hydration-errors-in-server-side-rendered-react-applications-c2f09daff7e5" target="_blank" rel="noopener noreferrer">Read the write-up</a></li>
<li>Led an enterprise-wide design system migration paired with React 19 adoption, retiring a legacy internal UI framework in favor of Tailwind CSS</li>
<li>Built custom Model Context Protocol (MCP) servers and AI agent skills, rolled out across the monorepo and extended to 8 web apps alongside it. Trained 50+ engineers in 7 workshops</li>
<li>Scaled visual regression testing infrastructure (Chromatic) 4.75x (8 → 38 projects), unlocking 425+ merged pull requests</li>
<li>Set up 12-factor backing services during an on-prem-to-cloud migration, letting teams switch environments via configuration. <a href="https://medium.com/stackademic/setting-up-backing-services-in-frontend-applications-f9486b6d62d3" target="_blank" rel="noopener noreferrer">Read the write-up</a></li>
</ul>
<div class="featured-card-tags">
<span class="tag">TypeScript</span>
<span class="tag">React</span>
<span class="tag">GraphQL</span>
<span class="tag">Tailwind CSS</span>
<span class="tag">Kubernetes</span>
</div>
<details class="year-details">
<summary class="year-details-summary">See year-by-year details</summary>
<div class="mini-timeline">
<div class="mini-timeline-item">
<span class="mini-timeline-year">2026</span>
<p class="mini-timeline-desc">Led an enterprise-wide design system migration paired with React 19 adoption, scaled AI/MCP tooling org-wide, and grew automated visual regression coverage 4.75x. Also kept the TypeScript monorepo unblocked through disciplined CI and test ownership, and introduced GitHub Actions and Slack notifications that sped up PR reviews org-wide.</p>
</div>
<div class="mini-timeline-item">
<span class="mini-timeline-year">2025</span>
<p class="mini-timeline-desc">Built new design system components (including a Carousel) adopted by teams across dozens of pages, migrated apps from styled-components to Tailwind, and cut Rental Cars landing-page load time by ~2 seconds.</p>
</div>
<div class="mini-timeline-item">
<span class="mini-timeline-year">2024</span>
<p class="mini-timeline-desc">Led a multi-quarter Rental Cars supplier launch, upgraded apps to React 18, designed the GraphQL migration roadmap, and automated QA deploys.</p>
</div>
<div class="mini-timeline-item">
<span class="mini-timeline-year">2023</span>
<p class="mini-timeline-desc">Shipped Car Upgrade in Checkout at 4.6% conversion, scoped Packages Full Listings at a 90% win probability, and mentored co-op students and junior-to-mid-level engineers across 3+ codebases.</p>
</div>
<div class="mini-timeline-item">
<span class="mini-timeline-year">2022</span>
<p class="mini-timeline-desc">Drove the iOS team's REST-to-GraphQL migration as Web UX point of contact, led Fullstory PII-masking rollout, and improved accessibility across customer-facing pages.</p>
</div>
<div class="mini-timeline-item">
<span class="mini-timeline-year">2021</span>
<p class="mini-timeline-desc">Migrated to streaming SSR for faster TTFB, built 12-factor backing services for the on-prem-to-cloud migration, and fixed a memory leak causing Kubernetes pod restarts.</p>
</div>
<div class="mini-timeline-item">
<span class="mini-timeline-year">2020</span>
<p class="mini-timeline-desc">Introduced Cypress end-to-end testing (later replaced by Mabl), plus the hackathon win above.</p>
</div>
<div class="mini-timeline-item">
<span class="mini-timeline-year">2019</span>
<p class="mini-timeline-desc">Migrated the Rental Cars landing page to TypeScript and advocated WebP delivery via Fastly for faster image loads.</p>
</div>
</div>
</details>
</div>
<h3 class="portfolio-subheading">Earlier Roles</h3>
<div class="company-grid">
<div class="company-card company-card--hydrogen">
<div class="company-card-header">
<img src="images/hydrogen_logo.jpg" alt="" class="company-logo">
<div>
<h4 class="company-name"><a href="https://www.hydrogenplatform.com/hydro" target="_blank" rel="noopener noreferrer">Hydrogen</a></h4>
<p class="company-meta">B2B Fintech & Blockchain · 2018</p>
</div>
</div>
<p class="company-summary">Core team member building "Hydro: Security & Identity," an Ethereum-based 2FA identity app that shipped on iOS and Android.</p>
<ul class="impact-list">
<li>Shipped a blockchain-based two-factor authentication app (React Native) to iOS and Android. <a href="https://medium.com/hydrogen-api/developing-the-hydro-mobile-app-b0945f610e56" target="_blank" rel="noopener noreferrer">Read how we built it</a></li>
<li>Built and documented decentralized app authentication flows using web3.js. <a href="https://medium.com/hydrogen-api/authenticating-on-the-blockchain-with-hydro-web3-js-3a7de9cc906b" target="_blank" rel="noopener noreferrer">Read the technical deep dive</a></li>
<li>Presented sales demos and built prototypes at client & partner workshops</li>
</ul>
<div class="featured-card-tags">
<span class="tag">React Native</span>
<span class="tag">web3.js</span>
<span class="tag">Ethereum</span>
<span class="tag">Workshops</span>
<span class="tag">Client-Facing Communication</span>
<span class="tag">Early-Stage Startups</span>
</div>
</div>
<div class="company-card company-card--hedgeable">
<div class="company-card-header">
<img src="images/hedgeable_logo.jpg" alt="" class="company-logo">
<div>
<h4 class="company-name"><a href="https://www.hedgeable.com" target="_blank" rel="noopener noreferrer">Hedgeable</a></h4>
<p class="company-meta">B2C Fintech, Seed Stage · 2016–2018</p>
</div>
</div>
<p class="company-summary">Joined as employee #7 at a seed-stage wealth management startup, reporting to the CTO through 30+ person growth, later spun off into Hydrogen.</p>
<ul class="impact-list">
<li>Scaffolded the Angular2 + Node/Express SPA rebuilding a legacy PHP platform</li>
<li>Built client portfolio data visualizations with D3.js and C3.js</li>
<li>Shipped session management (Redis) and the 2FA app's UI</li>
</ul>
<div class="featured-card-tags">
<span class="tag">Angular2</span>
<span class="tag">Node.js</span>
<span class="tag">D3.js</span>
<span class="tag">Stakeholder Alignment</span>
<span class="tag">Founding Team Collaboration</span>
<span class="tag">Early-Stage Startups</span>
</div>
</div>
<div class="company-card company-card--patron">
<div class="company-card-header">
<img src="images/musae_logo.jpg" alt="" class="company-logo">
<div>
<h4 class="company-name"><a href="http://www.musae.me" target="_blank" rel="noopener noreferrer">Patron</a></h4>
<p class="company-meta">Arts Network, Seed Stage · 2015</p>
</div>
</div>
<p class="company-summary">Built the alpha product for an arts-network startup with a globally distributed team, reporting directly to the CEO.</p>
<ul class="impact-list">
<li>Built the web platform end-to-end with Angular1 and Node, alongside a globally distributed team of engineers and designers</li>
<li>Deployed and iterated quickly using Heroku, shipping the startup's alpha product from idea to launch</li>
</ul>
<div class="featured-card-tags">
<span class="tag">AngularJS</span>
<span class="tag">Node.js</span>
<span class="tag">Heroku</span>
<span class="tag">Stakeholder Alignment</span>
<span class="tag">Remote Team Collaboration</span>
<span class="tag">Early-Stage Startups</span>
</div>
</div>
</div>
</div>
</section>
</main>
<hr class="divider divider3">
<footer class="social" id="social">
<div class="container">
<h2 class="copy">Find me on</h2>
<ul class="icons">
<li>
<a href="https://github.com/raclee7" target="_blank" rel="noopener noreferrer" aria-label="GitHub (opens in a new tab)">
<i class="fa fa-github" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="https://linkedin.com/in/rachlee012" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn (opens in a new tab)">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="https://medium.com/@rach_lee" target="_blank" rel="noopener noreferrer" aria-label="Medium (opens in a new tab)">
<i class="fa fa-medium" aria-hidden="true"></i>
</a>
</li>
</ul>
<p class="copy copy_bottom">© 2026 Rachel Lee</p>
</div>
</footer>
</body>
</html>