Open to Frontend Design Engineer roles

Frontend Design Engineer

I build interfaces that don't just work right. They feel right.

Hi, I'm Nicole J. Nobles, a frontend engineer with over seven years of experience creating polished, accessible, high-performance user experiences. I translate thoughtful design into production-quality web/mobile applications that people feel right using.

BUTTON
Ship it
01Selected Work

Work that earned its place.

A handful of products where craft, accessibility, and speed actually moved the needle.

StartupOS Fukuoka interface preview2026

StartupOS Fukuoka

A bilingual program-ops portal for Japan’s Business Management Visa: checklists, forms, documents, and mentor handoffs in one invite-only app.

Problem
Founders on the Fukuoka Business Management Visa program navigated a manual, fragmented process: stale PDF checklists with outdated steps and prices, documents scattered across email and LINE, Word forms bouncing for weeks with no clear “latest version,” and no shared dashboard for staff or mentors. When mentors changed, context was lost in private threads. Housing, banks, and local services lived outside any single foreigner-friendly directory. The product had to serve three audiences at once (founders who need “what’s next,” staff who need cohort visibility and form review, and mentors who need scoped access to assigned founders) without becoming a public consumer app. Invite-only auth, bilingual UX, and database-enforced permissions were non-negotiable from day one.
Solution
I built StartupOS as one city-ready program-ops platform rather than a slide-deck prototype: Next.js 16 App Router with React Server Components, locale routing via next-intl (founders default EN, staff default JA), and Supabase for auth, Postgres, private document storage, and realtime messaging. Every sensitive table is gated by PostgreSQL RLS keyed on auth.uid() and role helpers, with Next.js route guards as a second layer. The founder experience centers on a visual progress tracker (Pre-Japan → Business Startup Activities → In Japan → Before Leaving → Post-Japan) and a smart checklist with dependencies, required document uploads, and linked program forms. Staff get a cohort dashboard with health pills (on track / at risk / needs review), a form review queue with comments and immutable approved versions, and in-app checklist/form template admin so content can change without a developer deploy.
EN + JP
Languages
Founder · Staff · Mentor
Roles
Invite-only OTP
Access model
Next.js 16React 19TypeScriptSupabase (Auth, Postgres, RLS, Storage, Realtime)next-intlTailwind CSS 4shadcn/uiMapbox GL JSpdfmakePlaywrightVitestVercel
Read the case study
quote.gfbinsurance.com interface preview2024

quote.gfbinsurance.com

Georgia Farm Bureau’s Online Quote app: an 8-step personal auto quote with live rating, a home inquiry form, and agent handoff into PolicyPro.

Problem
GFB’s quoting experience had to work for two audiences at once: consumers who expect a clear, mobile-friendly path to a price, and local agents who still own underwriting, eligibility, and binding in PolicyPro (Adaptik). A full online purchase flow was out of scope. The product needed conditional rated quotes, Georgia-only address rules, consumer-reporting acknowledgements, and a clean handoff to a real agent. Homeowners quoting was even more constrained: instead of shipping an incomplete multi-step home rate path to production, the live /home experience became a focused “GFB Quote Inquiry Form” that captures contact and address and routes the lead for follow-up.
Solution
I worked on the Policy-Manager SPA as a guided wizard: sticky GFB-branded header, step progress (1/8 → 8/8), Material outline fields, and reactive forms with dirty-navigation guards so members don’t lose mid-quote work. Auto steps cover primary insured → driver/vehicle prefill → vehicles → drivers → vehicle coverages → policy coverages → contact (discounts, membership) → summary with a 6-month premium. On the agent side, lead-converter authenticates with Azure AD (MSAL), loads quote versions by session (mc_id), surfaces vehicles/drivers/coverages/discounts, and creates the PolicyPro quote so the agency can finish the sale. A shared proxy_api gateway (Ocelot + client credentials) sits in front of PolicyManagementApi for both apps.
8
Auto quote steps
Auto + Home
Lines supported
Agent → PolicyPro
Close path
Angular 17TypeScriptAngular MaterialBootstrapRxJSPlaywright.NET 8 / OcelotMSAL (lead-converter)GA4 + GTM
Read the case study
AICA interface preview2026

AICA

AI Intercultural Communication Assistant: a privacy-first Expo app that advises on cross-cultural messages, not just translates them.

Problem
Translation tools fix wording, not culture. Someone can write grammatically perfect Japanese and still miss formality, indirect refusal, or workplace norms, and existing apps rarely warn about that. Cross-cultural friction shows up daily for remote teams, international couples, students abroad, and expats sharing sensitive conversations. AICA needed to feel like a cultural advisor in your pocket: actionable advice tailored to context (persona + language pair), with privacy as table stakes, not a chatbot that ships every message to the cloud by default.
Solution
I built AICA as an Expo ~54 / React Native app with file-based Expo Router: auth stack (welcome, Google OAuth + email/password, language), then tabs for Analyze, History, Personas, and Settings. Domain state lives in React Context (Auth, Message, Persona); history is AES-encrypted locally; personas are local-first with optional Supabase sync when privacy settings allow. The differentiator is the advisor stack: try on-device inference first via expo-ai-kit; if confidence is below threshold and the user has remaining weekly quota, call a Supabase Edge Function that proxies OpenRouter (Gemini 2.5 Flash). Free limits (5 online requests/week, 2 personas, 1000 chars) and Pro CTAs create upgrade moments without requiring Stripe yet. Waitlist and subscription UI are in place for the next monetization step.
On-device → online fallback
AI path
Analyze · Persona · History
Core loop
5 / week
Free online quota
Expo 54React Native 0.81React 19TypeScriptExpo Routerexpo-ai-kitSupabase (Auth, Postgres, Edge Functions, RLS)OpenRouter / Gemini 2.5 FlashCryptoJSAsyncStorageexpo-secure-storeJest + RNTL
Read the case study
02Design System

A living component library.

Real, interactive primitives: accessible, themeable, and consistent. Try them.

Buttons
NewDraft LiveBeta
Inputs
example.com/portfolio
Tabs

Every tab transition uses a shared layout animation for a seamless, connected feel.

Accordion

Yes. Keyboard operable, ARIA-labelled, and reduced-motion aware.

Overlays
Table
ComponentUsageStatus
Buttons128Stable
Inputs96Stable
Charts41Beta
Charts
M
T
W
T
F
S
S
03About

Craft is a practice, not a claim.

I fell for frontend the first time a hover state made an interface feel alive. Since then I've chased the same feeling in production: the quiet satisfaction of a layout that never shifts, a focus ring that always shows up, an animation that lands exactly on beat.

I care most about the parts users can't name but always feel: accessibility, performance, and consistency. I'd rather ship one component that behaves perfectly everywhere than ten that mostly work.

I studied abroad in Osaka, and Japanese design shaped how I think about restraint: remove until only the essential remains, then make that essential feel effortless. It's the same instinct I bring to interfaces, and why I'm drawn to teams building at the intersection of design, AI, and creator culture.

The details matter

Instead of saying I'm detail-oriented, here's the receipts.

  • Reduced page load time by over one second by eliminating render-blocking assets.
  • Improved accessibility scores from C to A+ across core member flows.
  • Standardized spacing and component behavior across the application.
  • Optimized layouts for mobile, tablet, and desktop with a fluid type scale.
  • Built reusable React components to reduce duplicate UI code by 60%.

01Frontend

React/Next.jsReact NativeASP.NET MVC/Razor PagesVue/Nuxt.jsHTML/CSS/JSAccessibilityDesign SystemsShadcn/UITailwind CSS

02Backend

Node.jsC#MongoDBNode.js/ExpressPostgreSQL

03Tools

GitVS CodeCursor
04Experience

Seven years of shipping.

Georgia Farm Bureau

2018 to Present

Frontend Engineer

  • Led a React-based UI redesign of core member-facing applications.
  • Raised accessibility scores from C to A+ and made every flow keyboard operable.
  • Cut load time by over a second by removing render-blocking assets.
  • Established a reusable component architecture adopted across teams.

microNovations

2014 to 2018

Web Developer

  • Designed and built a responsive marketing website from scratch.
  • Owned the visual design and interaction details end to end.
  • Optimized hosting and assets to meaningfully reduce operating costs.
05Currently Into
Tinkering
Tea
Motorcycles
Traditional Architecture
80s City Pop
Gaming
AI
Foodie
Fantasy & Sci-Fi
Kyudo