# Nathan Brodin > A frontend engineer with a passion for web development, design, and user experience. I'm a frontend-leaning full-stack engineer. Originally from the west of France, I've been moving north ever since: internships in Oslo, exchange semesters in Finland and Sweden, and now settled north of the Arctic Circle in Tromsø, Norway. I build things for the web that are fast, accessible, documented, and polished. --- ## Social Links - [GitHub](https://github.com/NathanBrodin) - [LinkedIn](https://linkedin.com/in/nathan-brodin) - [Twitter](https://twitter.com/nathan_brodin) - [Email](mailto:nathan@brodin.dev) --- ## Tech Stack - **Languages**: TypeScript, JavaScript, Python - **Frontend**: React, TanStack, Next.js, Tailwind CSS, shadcn/ui, Base UI, Vite, Redux, Playwright - **Backend**: Node.js, Django, Convex, Drizzle, OpenAPI - **Databases**: PostgreSQL, SQLite, ClickHouse, Redis - **Infrastructure**: Linux, Docker, AWS, Vercel, OpenTelemetry - **Workflow**: Git, GitHub, VIM, Zed, OpenCode, Figma --- ## Experiences ### [Capia AS](https://capia.no/) #### Full Stack Engineer | 2025-08 - Present Full-stack engineer at a small Norwegian data analytics company. I've built two production apps from empty repo to deployed systems (a multi-tenant organization-data platform and a traffic dashboard), owning everything end to end: architecture, design, frontend, backend, infrastructure, CI/CD, and docs. I am also involved in consulting work and other collaborative projects. I focus on: - DX: type safety end to end (all-in on [TanStack](https://tanstack.com/), frontend types generated from the backend OpenAPI schema, CI fails on drift), deliberate library choices, docs and one-command setup, ~1,500 tests with [Playwright](https://playwright.dev/) E2E and checks on every PR - UX: polished interfaces where every state is designed, refined through tight feedback loops with users - Observability: [OpenTelemetry](https://opentelemetry.io/) across 8 repos into self-hosted [SigNoz](https://signoz.io/), so traces, errors, and usage back every claim, from the frontend API call down to the DB query - Ownership: turning one-line briefs into systems ("build a chatbot" became a workspace-scoped analytics agent), and proposing solutions to silent problems: self-hosted runners, observability *Skills: TypeScript, React, TanStack, Tailwind CSS, Django, PostgreSQL, ClickHouse, Docker, Nginx, Playwright, OpenTelemetry* ### [DNB](https://dnb.no) #### Frontend Engineer Intern | 2025-02 - 2025-07 Worked across multiple AI products used by 100k+ users. It was my end-of-studies internship, of 6 months, that counted toward my Master's degree (graded 92/100). - Managed to push to production 15+ features across 3 frontend applications - Migrated a production app from Gatsby to [Vite](https://vite.dev/), cutting build times by 60% - Built a full E2E test suite with [Playwright](https://playwright.dev/). With 350+ tests across browsers, and a CI that runs under 90s with caching and sharding - Wrote technical docs and analysis reports, generally tried to make the DX better for the team *Skills: TypeScript, React, Redux, CSS, AWS, Playwright* #### Frontend Engineer Intern | 2024-04 - 2024-08 Built the frontend of a GenAI chatbot platform used by 100+ users. From an empty repo to a well-tested app (92% coverage, [Storybook](https://storybook.js.org/), documented architecture). Focused on developer experience: clean code, consistent styling, and full test setup. *Skills: TypeScript, React, Redux, CSS, Storybook, Playwright* #### Frontend Engineer Intern | 2023-07 - 2023-08 Shipped an internal admin panel from scratch used by 10+ users, based on Figma designs. Small project with basic tech (CRA + [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)), but good foundations. I handled everything from UI, API integration, auth, and deployment. My first production app. *Skills: JavaScript, React, Redux, CSS, styled-components, React Router, AWS* ### Education #### ESIEA Graduate School of Engineering | 2020-09 - 2025-07 My Master's in Software Engineering, from [ESIEA](https://esiea.fr), a top 10 French engineering school and the 2nd best private one for computer science ([L'Étudiant](https://www.esiea.fr/les-classements-de-2024-sont-tombes/)). The first few years relied heavily on mathematics, algorithms, physics and electronics, moving toward programming and broader software development and software engineering practices at the end. Plus 3 internships (a full year of real work experience by graduation) and 2 exchange semesters. *Skills: JavaScript, Python, C, Algorithms, Systems Programming, Distributed Systems, Full Stack Development, Application Design* #### Mid Sweden University | 2024-09 - 2025-01 Exchange Semester in Sundsvall, Sweden. Applying systems concepts both on paper and on the ski slopes. It was more project based, with real implementation of distributed systems and IoT. But also heavy on algorithm theory. *Skills: Algorithms, Distributed Systems, IoT, Advanced Networking* #### Centria University of Applied Sciences | 2022-09 - 2022-12 Exchange Semester in Kokkola, Finland. Enjoyed the Northern Lights and the snow (and sometimes studied). Got an introduction to databases (`SELECT * FROM grades;`), operating systems (playing with Arch Linux) and different programming languages to do the same things (calculator app in [Python](https://www.python.org/) and [C#](https://learn.microsoft.com/en-us/dotnet/csharp/)). *Skills: Python, C#, SQL, Databases, Operating Systems* --- ## Projects ### [Chat](https://chat.brodin.dev) | 2024-07 - 2025-03 A chatbot that knows everything about me: my experiences, projects, career, all of it. Users can just ask anything and get real answers. It works as a conversational portfolio. I'm using [React](https://react.dev/) Server Components with the [AI SDK](https://ai-sdk.dev/), which is genuinely hard to pull off since their docs are not even working (and not even recommended anymore), but it makes the streaming flow feel really smooth. Built with [Next.js](https://nextjs.org/), [Tailwind CSS](https://tailwindcss.com/), [Drizzle](https://orm.drizzle.team/), and the Vercel AI SDK. *Skills: TypeScript, React, Next.js, Tailwind CSS, AI SDK, Drizzle* ### [Bookmarks](https://bookmarks.brodin.dev) | 2025-09 A place where I save links to UI libraries, shadcn/ui registries, and websites that just look really good. When I need inspiration, I open a few of these and let my creativity do the rest. The UI is heavily inspired by [zed.dev](https://zed.dev). Built with [Next.js](https://nextjs.org/), [Tailwind CSS](https://tailwindcss.com/), [Drizzle](https://orm.drizzle.team/), and SQLite (Turso (because their free tier is really generous)). *Skills: TypeScript, React, Next.js, Tailwind CSS, Drizzle, SQLite* ### [Write](https://write.brodin.dev) | 2024-02 - 2024-03 A Notion-style Markdown editor. Write and preview Markdown in real-time, export to PDF. Started as a Notion clone from a tutorial, and then adapted to my needs for raw Markdown editing. Built with [Next.js](https://nextjs.org/), [Tailwind CSS](https://tailwindcss.com/) and [Convex](https://www.convex.dev/). *Skills: TypeScript, React, Next.js, Tailwind CSS, Convex* ### [Zed Vercel Theme](https://zed.dev/extensions?query=vercel) | 2024-10 - 2025-03 A theme for the [Zed Editor](https://zed.dev) based on the colors from Vercel's docs. Currently top 30 most downloaded themes with 94k+ downloads. [Lee Robinson](https://x.com/leerob/status/1870561189585101288) was using it, which is pretty cool. *Skills: Zed* ### [Open Source Contributions](https://github.com/search?q=is%3Apr+author%3ANathanBrodin+is%3Apublic+-user%3ANathanBrodin+-repo%3Azed-industries%2Fextensions&type=pullrequests) | 2022-08 - Present Small fixes here and there whenever I run into something broken. A couple 2-line UI fixes in [coss ui](https://coss.com/ui) (and I'm not even kidding), a tooltip fix in Eufemia, and docs improvements in [Zed](https://zed.dev) and [Supabase](https://supabase.com). Quality over quantity, I guess...? *Skills: GitHub* ### [Trends](https://github.com/NathanBrodin/trends) | 2026-06 - Present That's a project that has been going on and off for years, with no output still. I wanted to create my own personal finance application, which is focused on the future by using the current and past income/expenses to see how my finances will evolve in the future. *Skills: TypeScript, React, TanStack, Next.js, Tailwind CSS, Convex* ### [Templates](https://github.com/NathanBrodin/template) | 2026-04 - 2026-06 I made a monorepo template with [TanStack Start](https://tanstack.com/start/latest) for the web, [Convex](https://www.convex.dev/) for the backend, a UI package, and table and form packages using the new TanStack composable patterns, [Better Auth](https://www.better-auth.com/), marketing and legal pages being pre-rendered, i18n, Polar. I wanted to make that as every time I started a new project, I had to re-setup everything, re-handle auth, and stuff. *Skills: TypeScript, React, TanStack, Tailwind CSS, Convex, SEO* ### [Portfolio](https://brodin.dev) | 2026-02 - Present My newest portfolio, built with [TanStack Start](https://tanstack.com/start/latest) (static pre-rendering) and Content Collections for content in Markdown, with a borderline-obsessive focus on performance, accessibility, and SEO. *Skills: TypeScript, React, TanStack, Tailwind CSS, SEO* ### [Films](https://github.com/NathanBrodin/films) | 2025-09 Unfinished, but this was supposed to be an app where I could log all the snowboard/ski movies I've seen, so Letterboxd for documentaries, with the UI from my component library. [Next.js](https://nextjs.org/), [Drizzle](https://orm.drizzle.team/)... *Skills: TypeScript, React, Next.js, Tailwind CSS, Drizzle* ### [UI](https://ui.brodin.dev) | 2025-06 - 2025-09 My own component library. It was created before [shadcn/ui](https://ui.shadcn.com/) released a tool to create themes directly, and before the migration to Base UI, so I abandoned it. *Skills: TypeScript, React, Next.js, Tailwind CSS, shadcn/ui, Base UI* ### [Repos](https://github.com/NathanBrodin/repos) | 2025-04 During the interview process for Capia, I got tasked to create a small project over the weekend: a simple [React](https://react.dev/) app with [Redux Toolkit](https://redux-toolkit.js.org/) to fetch the list of GitHub repos for a given username. Simple stuff. So I recreated the UI of the GitHub profile for the list, with filtering and sorting, loading and error states, debounce, clean code and documented... Built with [Vite](https://vite.dev/), [Tailwind CSS](https://tailwindcss.com/) and [shadcn/ui](https://ui.shadcn.com/). I got the job. *Skills: TypeScript, React, Redux, Tailwind CSS, shadcn/ui* ### [Ice Calendar](https://github.com/NathanBrodin/ice-cal) | 2024-11 I made a quick [Next.js](https://nextjs.org/) app to scrape the calendar of the public openings of Sundsvall's ice rink, as I would go ice skating 4 times a week. So it gets the raw HTML from the old website, formats it in cal format, and allows you to set it up, and choose what kind of openings you're interested in using URL search params. Nice and simple UI, with an aurora effect. *Skills: TypeScript, React, Next.js, Tailwind CSS* ### [IoT](https://github.com/NathanBrodin/IoT) | 2024-11 - 2025-01 · School project During my exchange in Sweden I took the "Implementing Internet of Things Protocols" course, which was basically three big programming projects: an HTTP/REST server, a [CoAP](https://coap.technology/) client, and an [MQTT](https://mqtt.org/) broker, all written in [Rust](https://www.rust-lang.org/). The rule of the course: everything from scratch, no external libraries allowed, so you actually understand the protocols. *Skills: Rust, Docker* ### [Mail](https://github.com/NathanBrodin/Mail) | 2024-02 "Redefining Your Inbox Experience" is a mail client to rethink how you manage messages, prioritizing and responding with intuitive simplicity (that's what the README says at least). [Next.js](https://nextjs.org/), [TypeScript](https://www.typescriptlang.org/), [Tailwind CSS](https://tailwindcss.com/) with [shadcn/ui](https://ui.shadcn.com/), auth with [NextAuth.js](https://next-auth.js.org/) via GitHub, a discover page and a proper new-user experience, full i18n in English and French, theme customization, [PostHog](https://posthog.com/) for analytics, [Sentry](https://sentry.io/) for error tracking, and [Cypress](https://www.cypress.io/) E2E tests running in CI, with a stub login so the tests could get past the auth. *Skills: TypeScript, React, Next.js, Tailwind CSS, shadcn/ui* ### [Interactive map](https://gitlab.esiea.fr/brodin/interactive-map) | 2024-01 - 2024-02 · School project For the Software Development using DevOps class, I made an app that lets you look for cities around you: you click on the map to search, change the search filters in a side panel, and click on a city to see more details about it. All on [Docker](https://www.docker.com/) (one `docker compose up` and it runs), with CI/CD, docs with architecture diagrams, great docs. Client with [Next.js](https://nextjs.org/), [Tailwind CSS](https://tailwindcss.com/), and [Cypress](https://www.cypress.io/) for E2E testing. Backend with [ASP.NET](https://dotnet.microsoft.com/apps/aspnet) Core, [C#](https://learn.microsoft.com/en-us/dotnet/csharp/) and xUnit for unit tests, and [PostgreSQL](https://www.postgresql.org/) database. OpenAPI specs, and great code coverage, with the pipeline and coverage badges directly in the README. So this was a full stack app with all of the great software engineering practices. *Skills: TypeScript, C#, React, Next.js, Tailwind CSS, ASP.NET, PostgreSQL, Docker* ### [B-moveOn](https://gitlab.esiea.fr/brodin/B-moveOn) | 2023-09 - 2024-04 · School project I built a mobile application in [Flutter](https://flutter.dev/) for delivery drivers on cargo bike, allowing them to input all their delivery points, with the app calculating the fastest route. *Skills: Dart, Flutter, Riverpod, Supabase, OpenStreetMap, Fastlane, Figma* ### [Portfolio V3](https://github.com/NathanBrodin/nathanbrodin.com) | 2023-07 - 2023-10 I rebuilt my portfolio once again, as I got heavily inspired by Chronark's portfolio. But it wasn't a fork, I rebuilt everything to follow my code style, updated the UI to match my style as well. I also spent a lot of time fighting performance issues, lazy loading components and dynamic imports until the Lighthouse score made me happy, and plugged in Vercel Speed Insights to keep an eye on it. *Skills: TypeScript, React, Next.js, Tailwind CSS* ### [Chat App](https://gitlab.esiea.fr/brodin/chat-app) | 2023-05 · School project For school we had to make a chat app with [Node.js](https://nodejs.org/), as the end of semester project of our web class. I first made the UI on [Figma](https://www.figma.com/), then built the server, and the HTML/CSS. The server is [Express](https://expressjs.com/) with [Socket.IO](https://socket.io/) for the real-time messaging, bcrypt for password hashing, sessions to stay logged in, and multer to upload images. The app has a global room, private messages by clicking on a user in the sidebar, profile pictures, and image sending. It even prevents you from logging in twice with the same account. *Skills: JavaScript, HTML, CSS, Node.js, Express* ### [Pokedex](https://gitlab.esiea.fr/brodin/pokedex) | 2023-05 · School project Small [Node.js](https://nodejs.org/) server ([Express](https://expressjs.com/)) and web app to display pokemons, for school. *Skills: JavaScript, HTML, CSS, Node.js, Express* ### [Sokoban](https://gitlab.esiea.fr/brodin/sokoban) | 2023-05 - 2023-06 · School project For school, I made the Sokoban game in [Flutter](https://flutter.dev/). The game has three modes: continue your game (it saves every move, so you can quit and come back where you were), start a new game, or pick a level (only the ones you unlocked, of course). Boxes turn green when they're on the right spot, you can undo moves or restart, and scroll around to see the whole map. I even added music and sound effects, and a custom app icon. *Skills: Dart, Flutter* ### [Eco-friendly watering](https://gitlab.esiea.fr/brodin/arrosage-eco) | 2023-04 - 2023-06 · School project For the 6-month project of my 3rd year of engineering school, I built a device to put on a plant that had sensors for temperature and humidity, running on an [STM32](https://www.st.com/en/microcontrollers-microprocessors/stm32-32-bit-arm-cortex-mcus.html) card. The card hosts a small web server written in C, and the [Flutter](https://flutter.dev/) app connects to it over Wi-Fi to fetch and display the data. Made the sketches first on [Figma](https://www.figma.com/), with of course a nice UI, and then built it. *Skills: C, Dart, Flutter* ### [docs.nathanbrodin.com](https://github.com/NathanBrodin/docs.nathanbrodin.com) | 2023-03 - 2023-06 I was somehow obsessed with resetting my Windows laptop every 6 months to remove the bloat (slow and cheap computer), and I was customizing it a lot every time. So I made a [Next.js](https://nextjs.org/) docs application with [Nextra](https://nextra.site/), where I wrote each step to do in [MDX](https://mdxjs.com/) docs. So every default setting to change, all apps to install, tips... A full step-by-step walkthrough to get a clean and optimized Windows 11 installation, based on years of trial and error. *Skills: TypeScript, React, Next.js, MDX* ### [Weather App](https://github.com/NathanBrodin/Weather-app) | 2023-03 · School project For school we had to make a weather app in [Flutter](https://flutter.dev/). I went all in with the UI, used [Midjourney](https://www.midjourney.com/) to generate the background images, so that it would show a nice landscape based on the weather. It fetches data from the [OpenWeatherMap](https://openweathermap.org/) API: current conditions, temperature, wind speed, and a forecast for the next 5 days. Icons picked from a Dribbble shot, mockups made with shots.so. *Skills: Dart, Flutter* ### [Wordle](https://gitlab.esiea.fr/brodin/wordle) | 2023-03 · School project We had to make a Wordle app with [Flutter](https://flutter.dev/) for the Mobile programming course. Quite simple and fits the teacher's requirements. *Skills: Dart, Flutter* ### [Grammar Checker](https://github.com/NathanBrodin/grammar-checker) | 2022-10 At the very start of [OpenAI](https://openai.com/) and LLMs, I made a grammar checker with a very similar UI to the Quillbot Grammar Checker, and made the logic by having a simple prompt to GPT-3 to correct the text I'm passing. Seeing how AI is at the center of the world now, it's fun to see I made this project in Autumn 2022, before ChatGPT even existed. Once again with [Next.js](https://nextjs.org/) and [Tailwind CSS](https://tailwindcss.com/), fully responsive, with dark and light mode, a copy-to-clipboard button, and an undo button for the last correction. *Skills: JavaScript, React, Next.js, Tailwind CSS* ### [Portfolio V2](https://github.com/NathanBrodin/nathanbrodin.com) | 2022-09 - 2022-11 Rebuilt my portfolio with [Next.js](https://nextjs.org/) and [Tailwind CSS](https://tailwindcss.com/). Better UI, better designs, but you can still see that I was a "beginner". I even made it fully available in French, and added Google Analytics to see if anyone was visiting (they were not). *Skills: TypeScript, React, Next.js, Tailwind CSS* ### [MyPasswordManager](https://github.com/NathanBrodin/MyPasswordManager) | 2022-06 - 2022-09 I made a [Chrome extension](https://developer.chrome.com/docs/extensions) to store and autofill passwords, with [React](https://react.dev/), which is uncommon for extensions, but I found a template (create-react-extension), and stored the data in [Firebase](https://firebase.google.com/) Firestore. Everything is encrypted with AES (CryptoJS) before being sent to Firestore, and the secret key is generated and stored locally on your computer, so nobody else can read your data. It could also auto-submit the login form for you if you enabled it. Made a nice UI for the extension, and even published it on the Chrome Web Store. *Skills: JavaScript, React, Firebase* ### [Portfolio V1](https://github.com/NathanBrodin/nathanbrodin.github.io) | 2022-03 - 2022-05 After we had a workshop at school to create our CV and LinkedIn, the teacher mentioned portfolios, so I was interested to make mine. This was also after I started to work on the ESIEABOT mobile app, so I discovered that I liked building UIs (even if I already loved making fancy PowerPoints and other designs). So I first designed it on [Figma](https://www.figma.com/), then wrote my first lines of HTML, CSS and a little of [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) for some small interactions, and deployed it on GitHub Pages. *Skills: HTML, CSS, JavaScript* ### [ESIEABOT Mobile App](https://github.com/NathanBrodin/Esieabot-Mobile-App) | 2021-10 - 2022-06 · School project An [Android](https://developer.android.com/) mobile app to control remotely the ESIEABOT (a robot with two wheels and a camera). I made a tiny [Raspberry Pi](https://www.raspberrypi.com/) image to put on the bot, which listens to Bluetooth, can receive directions, and sends the video feedback. And I made the mobile app (in [Kotlin](https://kotlinlang.org/)) to send the controls, and see the video feedback. I made a nice UI, nice features to control and connect to the robot. This was lots of work, but very good work. *Skills: Kotlin, Android* --- ## Certifications - [Apollo GraphQL - Graph Developer - Associate](https://www.apollographql.com/tutorials/certifications/7d67206d-3e7c-42cf-9ed2-768f3f3bc362) | 2024-06 - [Meta - Advanced React](https://www.coursera.org/account/accomplishments/verify/CUYRZ6XRFNGJ) | 2024-02 - [Meta - React Basics](https://www.coursera.org/account/accomplishments/records/RNXWP8EW8RBB) | 2024-01 - [Coursera - Mastering the Software Engineering Interview](https://www.coursera.org/account/accomplishments/certificate/RVCLPYR3YRQ7) | 2023-10 --- ## Blog > Articles on development, design and ideas. - [OG Images Without an Image CDN](https://brodin.dev/blog/og-images-without-an-image-cdn.md) - I render Open Graph previews as real React routes and screenshot them with Puppeteer in a build script, so my link previews reuse the same components as the site. | 2026-07-10 - [Every Optimization Behind a Perfect Lighthouse Score](https://brodin.dev/blog/every-optimization-behind-a-perfect-lighthouse-score.md) - The 100 on Lighthouse isn't luck or a clean stack. Here is every optimization I actually shipped to get brodin.dev to 100 locally and 100 in Vercel Real Experience Score. | 2026-07-03 - [react-i18next Was Fine. Then I Found Paraglide.](https://brodin.dev/blog/paraglide-vs-react-i18n.md) - A comparison of react-i18next and Paraglide JS from someone who has shipped both in production: what I was missing, why I switched, and the honest downsides. | 2026-05-04 - [A Totally Legitimate Way to Look More Productive on GitHub](https://brodin.dev/blog/fake-github-contribution-graph.md) - A tutorial on how to fake your GitHub contribution graph. | 2026-04-17 Full list available at https://brodin.dev/blog.md