Field Notes ยท Vol. 01
MEGHANA L
Front-End Developer
Tata Consultancy Services
A notebook of things I've built, broken, and learned along the way.
scroll to open โ†“
currently learning:
three.js โœฆ
joined in 2022 โ€” still curious โœŽ
01 ยท About

Hello, I'm Meghana.

I'm a front-end developer at Tata Consultancy Services, where I build and maintain enterprise web applications that thousands of people rely on every working day.

My favourite work happens where design meets engineering โ€” taking a rough idea and shaping it into an interface that feels calm, obvious, and fast. I care about the last 5%: focus states, empty states, the way a table behaves at 2,000 rows.

Away from the keyboard I collect interests the way this notebook collects margins: design systems, typography, accessibility, sketching UIs on paper before touching code, and a long-standing pour-over coffee habit (see stain, top right).

โ€” 2 โ€”
less, but
better โœŽ
02 ยท Philosophy

Notes to self

  1. Clarity over cleverness. Code is read far more often than it is written.
  2. Users never see your architecture โ€” they feel your latency. Performance is a feature.
  3. Accessible by default. Semantics first, ARIA last, keyboard always.
  4. Small details, honestly made. A well-timed 200 ms transition carries more craft than a hero animation.
  5. Ship, observe, refine. Perfect is a direction, not a destination.
"Simplicity is not the absence of features โ€” it is the presence of intent."
โ€” 3 โ€”
Project 01 / 03

Pulse Board

A real-time analytics dashboard for support teams โ€” live queues, SLA timers, and trend charts that stay legible on a wall-mounted TV. A virtualized grid keeps 10k rows smooth; the websocket layer degrades gracefully to polling.

ReactTypeScriptTailwindRechartsVite
โ€” 4 โ€”
Project 02 / 03

Fieldnotes UI

An accessible component library of 30+ primitives โ€” keyboard-navigable menus, dialogs, comboboxes โ€” documented in Storybook and tested with axe. It now powers three internal tools with one consistent design language.

ReactRadixStorybookJest + RTLCSS variables
โ€” 5 โ€”
Project 03 / 03

Trailmap

An offline-first PWA for planning weekend treks โ€” draw a route, read the elevation profile, and carry the map where there's no signal. Installs in one tap and weighs under 180 KB on first load.

Next.jsMapbox GLWorkboxIndexedDB
โ€” 6 โ€”
no progress bars โ€”
skills aren't
percentages โœ“
03 ยท Toolbox

Skills

Languages

  • HTML
  • CSS
  • JavaScript (ES2023)
  • TypeScript

Frameworks

  • React
  • Next.js
  • Redux Toolkit
  • Node (tooling)

Styling & Motion

  • Tailwind CSS
  • SCSS
  • styled-components
  • Framer Motion ยท GSAP

Practice & Tools

  • Git ยท Vite ยท Webpack
  • Jest + Testing Library
  • Storybook
  • Accessibility (WCAG 2.2)
  • Figma ยท REST APIs
โ€” 7 โ€”
have an idea?
write to me โ†’
04 ยท The lab

Experiments

Small ideas, half-finished on purpose. โœ“ done ยท โ— in progress ยท โ—‹ someday

  • โœ“paper.css โ€” the page-turn engine rendering this very site. No libraries, one HTML file.
  • โ—bookshelf.3d โ€” a three.js shelf of favourite books you can pull out and flip through.
  • โ—inkline โ€” typed text replayed as animated SVG handwriting.
  • โ—‹doodle-plotter โ€” generative margin doodles grown from a repo's commit history.
  • โ—‹kettle โ€” a pomodoro timer that whistles when it's done. (obviously.)
โ€” 8 โ€”
05 ยท Say hello

The last page

The notebook ends here โ€” the conversation doesn't have to.

Thank you for turning every page โ€” most people skim, but you read. That says something good about you.  โ€” Meghana โœŽ

ยท fin ยท

โ€” 9 โ€”