James Winfield.

A senior front-end software engineer in London

Heading Image for James Winfield, showing AI generated software engineers in the style of Gustav Klimt

Projects


There’s nothing especially ground-breaking here, but thought I’d display a few of the projects I very occasionally work on at the weekends…some are very unfinished! But at least you can see that I know what to ask ChatGPT.

It’s in order of newly-created first, so also least finished.

PubDB API

PubDB API screenshot

What technology did I use?

  • Node.js
  • Express
  • TypeScript
  • Prisma
  • PostgreSQL
  • Zod
  • Stripe
  • Resend
  • JSON Web Tokens
  • bcryptjs
  • ts-node
  • Nodemon

When did I build it?

July 2025

Why did I build it?

I wanted to try building my own API, so why not one about pubs - as there doesn't seem to be a good open API for that already.

What did I learn?

A lot! This was my first time building an API from scratch, so I learnt about Express routing, middleware, authentication with JWTs, database modelling with Prisma and PostgreSQL, data validation with Zod, payment processing with Stripe, email sending with Resend, and more.

What would I do differently next time?

Well some of this was a little too reliant on Co-Pilot, as I've never written an API and sometimes I was too focused on getting something to work, rather than understanding the code. Also I really need to write tests. But this is unfinished and unreleased anyway. It works!

Weather Forecast For Reading & Berkshire

Weather Forecast For Reading & Berkshire screenshot

What technology did I use?

  • SvelteKit
  • Svelte 5
  • TypeScript
  • GraphQL
  • Vite
  • Biome
  • Prettier
  • GitHub Actions
  • Vercel

When did I build it?

February 2025

Why did I build it?

When I was growing up, I wanted to become a meteorologist. I was never quite good enough at physics (my maths was good enough) so it never came about. But then when I started playing around with blogs, circa 2010, I made a weather forecasting one for the Reading area, where I lived at the time, which is mostly on Facebook and has 15,000 followers somehow. This is kind of a Facebook escape really.

What did I learn?

I wanted to try Svelte, and this project taught me how to stitch SvelteKit into a WordPress/GraphQL back end. I didn't enjoy Svelte as much as I do Astro.

What would I do differently next time?

I probably wouldn't use Svelte again, some things like comment recursion were a pain. Also would like to develop more features for it.

Roast Dinners Around The World

Roast Dinners Around The World screenshot

What technology did I use?

  • Astro
  • React
  • TypeScript
  • GraphQL
  • ESLint
  • Prettier
  • Vercel

When did I build it?

May 2024

Why did I build it?

This was me finding a project to try out Astro, having heard good things about its performance and flexibility.

What did I learn?

This was my first time wiring an Astro front end to my hosted GraphQL API.

What would I do differently next time?

Nothing really...though I'm sure I'll discover something in the future.

World Of Winfield

World Of Winfield screenshot

What technology did I use?

  • Next.js
  • React
  • TypeScript
  • Jest
  • Testing Library
  • ESLint
  • Prettier
  • Emotion
  • Husky
  • GitHub Actions
  • Vercel

When did I build it?

May 2023

Why did I build it?

I wanted to redesign my personal blog, as it was pretty dull-looking and I'm quite colourful in real life.

What did I learn?

This was the project where I started using Github Actions for my pipeline checks, and also using Husky for pre-commit checks.

What would I do differently next time?

Not sure I would do anything differently, though I think I did rush to try to complete it...I do need to do a little cleaning up. Or maybe Co-Pilot needs to!

James Winfield's Engineering Blog

James Winfield's Engineering Blog screenshot

What technology did I use?

  • Next.js
  • TypeScript
  • Tailwind CSS
  • GraphQL
  • Vercel

When did I build it?

June 2022

Why did I build it?

I got a bit annoyed at M&S for some reason I forget now, but realised that my portfolio was the same one as before I was ever an engineer

What did I learn?

I didn't do anything crazy for this, I just took a NextJS template and redesigned it a bit. It was my second NextJS project, the other being a work project that was already set up, so I learnt a bit about how to set up a NextJS project from scratch.

What would I do differently next time?

Not sure I would have done much differently. It was really good practice for the technologies we were moving to at M&S. I realised that I wasn't a Tailwind convert as I was forever having to look up classnames which slowed me down.