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.
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
- 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
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
- 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
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
- 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.