# Nathan Brodin > A frontend engineer with a passion for web development, design, and user experience. --- ## 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 - **Backend**: Django, Node.js, Bun - **Database**: PostgreSQL, Redis - **Frontend**: React, Next.js, Tailwind CSS, shadcn/ui, Radix UI, Base UI, Motion, TanStack, Redux, React Router - **Infrastructure**: Docker, Nginx, Vercel, Linux - **Languages**: TypeScript, JavaScript, Python - **Tools**: Playwright, Git, Figma, I use VIM btw --- ## Experiences ### [Capia AS](https://capia.no/) #### Full Stack Engineer | 2025-08 - Present I'm building a production grade web application from scratch: frontend, backend and infrastructure. - Frontend with [React 19](https://react.dev/) + [Compiler](https://react.dev/learn/react-compiler), [Vite](https://vite.dev/), [TanStack Router](https://tanstack.com/router/latest)/[Query](https://tanstack.com/query/latest)/[Table](https://tanstack.com/table/latest)/[Pacer](https://tanstack.com/pacer/latest), [Tailwind](https://tailwindcss.com/), [Base UI](https://base-ui.com/), [shadcn/ui](https://ui.shadcn.com/) (and [coss ui](https://coss.com/ui/docs)) - Backend with [Django REST Framework](https://www.django-rest-framework.org/) with [Redis](https://redis.io/) for caching, [ClickHouse](https://clickhouse.com/) integration, and [PostgreSQL](https://www.postgresql.org/) - Infrastructure with [Docker](https://www.docker.com/), deployed via [NGINX](https://nginx.org/) on [self-managed servers](https://www.hetzner.com/) - I've set up full end-to-end type safety with [drf-spectacular](https://drf-spectacular.readthedocs.io/en/latest/) (OpenAPI schema generation) and [Orval-generated](https://orval.dev/) TanStack Query hooks - Implemented [RBAC](https://en.wikipedia.org/wiki/Role-based_access_control), admin tooling, and resource management - Made the [CI](https://github.com/features/actions) cover linting, builds, schema generation, and automated testing (~700 backend tests, ~100 [Playwright](https://playwright.dev/) E2E tests) with caching and sharding - Wrote full docs, DX tooling, DB seeding, and [Makefile commands](https://www.gnu.org/software/make/manual/html_node/Phony-Targets.html) so the whole project sets up in a few commands *Skills: TypeScript, React.js, Tailwind CSS, Tanstack, Django, Docker, NGINX, UI/UX Design, Design System* ### [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 massive features across 3 frontend applications - Migrated a production app from Gatsby to Vite, cutting build times by 60% - Built a full E2E test suite with Playwright. 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.js, CSS, Playwright, Redux* #### Frontend Engineer Intern | 2024-04 - 2024-08 Built the frontend of a GenAI chatbot platform used by 100+ users. From blank repo to well-tested app (92% coverage, Storybook, documented architecture). Focused on developer experience: clean code, consistent styling, and full test setup. *Skills: TypeScript, React.js, CSS, Redux, Playwright, Storybook* #### 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 + JS), but good foundations. I handled everything from UI, API integration, auth, and deployment. My first production app. *Skills: JavaScript, React.js, CSS, Redux* ### Education #### ESIEA Graduate School of Engineering | 2020-09 - 2025-07 I completed my Master's degree in Software Engineering at [ESIEA](https://esiea.fr), the 7th best graduate Engineering school in France. Graduated with 92/100. 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. Coupled with 3 internships for a year of real work experience as I graduated, and 2 exchange semesters. #### 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 very theoretical algorithm applications. #### 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) and different programming languages to do the same things (calculator app in Python and C#). --- ## Projects ### [Portfolio](https://brodin.dev) | 2026-02 - Present The website you're looking at. I finally moved away from Next.js and went with [TanStack Start](https://tanstack.com/start/latest) instead. Also using [coss ui](https://coss-ui.com) over shadcn/ui, it looks so nice. *Skills: TypeScript, React.js, Tanstack Start, Tailwind CSS* ### [Bookmarks](https://bookmarks.brodin.dev) | 2025-10 A place where I save links to UI libraries, shadcn 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](https://tailwindcss.com/), [Drizzle](https://orm.drizzle.team/), and SQLite ([Turso](https://turso.tech/) (because their free tier is really generous)). *Skills: TypeScript, React.js, Next.js, Tailwind CSS, Drizzle* ### [UI](https://ui.brodin.dev) | 2025-07 - 2025-09 My own component library. It was created before shadcn released a tool to [create themes directly](https://ui.shadcn.com/create), and before the migration to [Base UI](https://base-ui.com/), so the project was abandoned. *Skills: TypeScript, React.js, Tailwind CSS, shadcn/ui* ### [Zed Vercel Theme](https://zed.dev/extensions?query=vercel) | 2025-07 A theme for the [Zed Editor](https://zed.dev) based on the colors from Vercel's docs. Currently top 15 most downloaded themes with 52k+ downloads. [Lee Robinson](https://x.com/leerob/status/1870561189585101288) was using it, which was pretty cool. *Skills: Zed, VIM* ### [Chat](https://chat.brodin.dev) | 2025-02 - 2025-05 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 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](https://ai-sdk.dev/docs/ai-sdk-rsc)), but it makes the streaming flow feel really smooth. Built with [Next.js](https://nextjs.org/), [Tailwind](https://tailwindcss.com/), [Drizzle](https://orm.drizzle.team/), and the [Vercel AI SDK](https://ai-sdk.dev/). *Skills: TypeScript, React.js, Next.js, Tailwind CSS, AI SDK, Drizzle* ### [Write](https://write.brodin.dev) | 2024-03 A Notion-style markdown editor. Write and preview markdown in real-time, export to PDF. Started as a Notion clone because I wanted something simple that just works. Built with [Next.js](https://nextjs.org/), [Tailwind](https://tailwindcss.com/) and [Convex](https://www.convex.dev/). *Skills: TypeScript, React.js, Next.js, Tailwind CSS, Convex* --- ## 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 - ["You Wouldn’t Steal a DIV": How I Built My Portfolio](https://brodin.dev/blog/how-i-built-my-portfolio/post.md) - A story about how I built my portfolio and what went through my mind while building it | 2026-03-04