LottoSocial — Gatsby

Gatsby engagement on the LottoSocial site. Took a Figma design pass and turned each screen into reusable, typed React components inside the existing Gatsby project.

Alongside the component work I worked through long-running Gatsby issues — build pipeline failures, hydration problems, and a handful of plugin conflicts that had been papered over. Instead of patching, I went after the underlying cause so the next build wouldn't need a workaround.

The final pass was SEO. Every page got proper meta tags, social cards, and canonical handling, and the XML sitemap was rebuilt and resubmitted so search engines could index the site cleanly.

Figma to React components in Gatsby — then fix what's broken underneath.

I worked through the Figma file screen by screen, building each block as a typed React component that fit into the Gatsby project. Where I hit existing Gatsby issues — failing builds, hydration mismatches, plugin conflicts — I diagnosed and resolved them rather than working around. SEO was the second pass: titles, descriptions, canonicals, Open Graph, Twitter cards, and a fresh sitemap/XML pass.

• Figma → React: every screen rebuilt as reusable components inside the Gatsby project.
• Gatsby build and runtime issues diagnosed and fixed at the root.
• SEO meta tags applied consistently — titles, descriptions, canonicals, Open Graph, Twitter cards.
• XML sitemap rebuilt and resubmitted; structured data added where it helped.

• Gatsby.js
• React
• TypeScript
• GraphQL
• Figma
• SEO tooling
• XML sitemap