Open to work

Full-Stack
Engineer

I want to know why it works, not just that it does.

Kalle Spets Blomberg. BSc in Computer Science & Engineering from KTH. I particularly like building web apps end to end. Interface, API, database and deploy.

See my workGet in touch
Kalle Spets Blomberg

Four things I built end to end.

Every project here was designed, built, tested and deployed by me. Each one opens into a write-up of how it works, what broke, and what it taught me.

Start with the firstGet in touch

Run A Way

Measure your route

Would You Rather - Programmer Edition

Find your programmer personality

Chatapp

Stay Connected

Movie Search App

Find your new favorite movies

Run A Way interface

Run A Way

Measure your route

Run A Way lets you manage your running routes. You draw your routes by clicking on the map. It then measures the distance and the calories burned on the route. I have used similar websites, but always thought their interaction with the map was lacking, so I created my own with a smoother user experience.

  • Nextjs
  • React
  • JS
  • TailwindCSS
  • Material UI
  • Leaflet.js
  • OpenStreetMaps
Live demoSource
How it's built
The app is written in Nextjs, TypeScript and TailwindCSS. It uses the Leaflet and React-Leaflet libraries to access OpenStreetMaps which is an free to use map api. I also used Material Tailwind to create the buttons.
What was hard
React-Leaflet and Leaflet is not very well documented, so it was a hurdle to just get it to work with Nextjs. It turned out that I needed to use a dynamic import of the map and had to render the map lazily, fundamentally due compatibility issues with Nextjs.
What I learned
The biggest take away from this project is integrating different js libraries together that dont by default work well together. I was for example requried to downgrade react types dependency to a previous version to be able to use material tailwinds react components. In these situtations it becomes clear that a good fundamental understanding of Node, React and how modules work together is super important.
Would You Rather - Programmer Edition interface

Would You Rather - Programmer Edition

Find your programmer personality

A Game where the user is presented with two scenarios and has to chose which one they prefer. After they chose they get presented with what percentage of people picked the different choices.

  • React
  • Typescript
  • Go
  • CI/CD
Live demoSource
How it's built
The app has a frontend written in Typescript, React, TailwindCSS. And a backend written in Go and SQLite. The backend provides scenario pairs. And exposes endpoints for fetching random scenarios without providing the same scenario twice until all scenarios have been seen. Both the frontend and the backend was fully designed and implemented from scratch. The frontend, other than the game, allows the user to change the color theme, which I mainly made for easily picking my favorite colors during development.
What was hard
The most difficult part of developing the backend was designing the api and preventing the user from fetching the same scenario twice. However, most of the time was spent on the frontend where the biggest hurdles was dealing with the different game states. I had to make intricate changes to the UI depending on what state the game was, which proved more difficult than my first estimation. This was also due to extending the visual feedback in the game in the middle of development rather than planning it from the get go.
What I learned
This app taught me how to go from zero to a working application. Everything, from conceptualization to design, development pipeline, implementation and hosting was all done by me. It taught me not only lessons in programming, but also lessons in developing from a users perspective. My girlfriend acted as user, and as successful marketer in the IT startup space, she gave valuable insight as a user. Furthermore, I think the biggest lesson i learned is in development process. It was my first time creating a CI/CD pipeline with Github actions for a personal project.
Chatapp interface

Chatapp

Stay Connected

A chat application inspired by Discord. It uses Node.js, Express, Socket.IO on the backend and React with create-react-app on the front end.

  • React
  • JS
  • NodeJS
Source
How it's built
Chatapp consists of two parts: A frontend build with React and TailwindCSS, and a Node.js backend using Express.js, Socket.io and chai.js. It has no persistent data storage, all data, such as created users and message sent is handled in memory.
What was hard
The most difficult part of the project was dealing making sure all communication between server and client was handled correctly and that the representation of data between the server and client were compatible. There were multiple times where I had to rethink the way I handled handled certain requests. This resulted in me building a strong set of unit tests to support my development of the server.
What I learned
The big lesson I learned creating this project is the easy win of making a strong set of unit tests for data transformation on a server. It was a start of a workflow shift, where I now always try to write tests along with my server code and implement it in a way that is easily translated into unit tests. This has saved me a lot of headaches when something suddenly does not behave as you expect.
Movie Search App interface

Movie Search App

Find your new favorite movies

A React front-end web application that allows users to search for movies, see information about the movies, such as IMDB score, actors, release year, etc. It also allows the user to favorite movies so that they can more easily access them.

  • React
  • JS
  • CSS
Source
How it's built
The app uses React, React-Router, omdbapi and TailwindCSS. omdbapi is a RESTful open movie data base and I use it to fetch all info about the movies. React-Router was used to handle routing between "discover" and "favorites".
What was hard
This project was the first after a longer break from React and programming for the web. So the major hurdle was to get back into the grove. Other than that, the part i spend most time dealing with was communication with omdbapi. I had to tailor the request to my use case, and make sure that I did either fetch unnecessary data, or slightly wrong data.
What I learned
I relearned a lot of React with this project, and it forced me to quickly catch up on old concept but with a new point of view. I had improved a lot in my general programming knowledge and skill since I last used React so it was gave me the ability to see things in a different way. I also was exposed to dealing with a RESTful api, which gave me insight in how to design a RESTful api.