Hi, my name is Leo Hannolainen

I'm a web developer with a passion for building scalable web applications

With a Bachelor's Degree in Software Engineering, I have developed a strong foundation in web development, focusing on both front-end and back-end technologies. I possess expertise in HTML, CSS (SCSS & CSS Modules), JavaScript (TypeScript), and hands-on experience with frameworks like React (Next.js), Angular (Universal), and Vue (Nuxt). Additionally, I am skilled in building server-side solutions using Express, NestJS, and Swagger, with database management experience in SQL (TypeORM) and MongoDB/Mongoose.

I am always eager to learn and embrace new challenges, striving to create innovative and user-friendly digital solutions.

Projects I'm proud of

Workki AI

Web pages Similar Report on Device Management

To date, I have successfully added end-to-end tests with Cypress, significantly enhancing application reliability. I adapted the frontend to meet evolving business needs and migrated static data and blog content to the Sanity CMS, optimizing content management workflows. Additionally, I updated SEO practices to align with the latest standards, resulting in improved search engine visibility and traffic. I continue to contribute to ongoing development and optimization efforts.

Technologies used include:

Screenshot of Workki

Thesis project(LAB, UAS)

Device View Management System Device View Management system report

The thesis aimed to design and develop a web application dedicated to managing device content across various locations within LAB University of Applied Sciences. The primary focus was on simplifying and streamlining the content update process, which had previously been complex and time-consuming. The project adhered to all customer requirements and comprised three main components. Firstly, there was the server-side data handling and storage, ensuring a robust foundation for content management. Secondly, a user-friendly client-side admin panel was developed, accessible through a web browser, empowering administrators to seamlessly manage and update displays. Finally, a specialized view-app was created for each device, ensuring the timely and accurate display of information. The integration of these components successfully enhanced the overall efficiency of content management across the university's diverse locations.

Technologies used include:

Screenshot of the task manager project

Psyche's Royale Gaming ry / Volunteer work

Altzone webpages Altzone-WebPages Github Altzone WebPages

Information about the organization and them project can be found here.
I am solely responsible for the implementation of the web pages in this project. I'm currently working on pages that provide comprehensive information about the project and its participants. Future plans include adding features such as news publishing and a forum. The project uses a modular development approach, and almost every module developed is tested. The project is currently in the process of moving towards integrating a server-side rendering approach using Next.js.

Technologies used include:

Screenshot of the Altzone WebPages

School investigation project

Task Manager Task Manager github Task Manager report

The goal was to create a prototype user interface for a web app using a modular approach and modern technologies. The study chose React as the development tool and discussed the benefits of modularity and the Feature-Sliced Design methodology. The design and configuration phases were explored, and the app's features were divided into modules. Testing was conducted using unit and visual regression testing. The resulting interface allowed users to manage personal tasks, and all planned features were implemented.

Technologies used include:

Screenshot of the task manager project

Solita / dev-academy-2023-exercise

City Bike App City Bike App Github City Bike App task description Github

Information about the task can be found here.
I developed an application with a strong separation of concerns between the frontend and backend. The backend was implemented as a REST API using the Express framework and MariaDB database, and documented with Swagger. It follows the MVC (Model-View-Controller) architecture pattern, with services responsible for handling business logic and controllers handling the communication between the client and server. The frontend was created as a single-page application using the React and React-Bootstrap libraries. In my opinion, such an approach makes the application well-maintainable and scalable.

Technologies used include:

Screenshot of the Converter App

Hobby Project

Smart App Smart App Github Smart App ERD

The project is currently on hold

An application for managing smart devices. This is a hobby project, we gathered friends to practice our skills in our free time, at the moment I managed to make a little part of the backend for web application and implement the MobX library, as well as learn how to create locales for applications using i18n.

Technologies used include:

Screenshot of the Converter App

Hobby Project

Random API Random API Github Random API Youtube

Random API lets you add any kind of data to an API and use it later as you wish. For example you often need to use any random firstname-lastname pair. All you need to do is simply create a SQL table with firstnames, create a table with lastnames and use it via handy API requests. All of that can be via great UI.
I have done the frontend part of its by using first time Bootstrap for building UI. The conclusion is that Bootstrap can be useful if need to build fastly some user interface without big customizations , otherways I would use another frameworks (e.g,
styled components && || StoryBook ).

Technologies used include:

Screenshot of the Converter App

LAB-Internship

Door Tablet App

Each class at the universities of Lahti and Lappeenranta has a tablet with an application on which you can view all the booking information. My main task was to improve the current application. During this internship, I got acquainted with the basics of Angular, recreated the application from scratch, updated all dependencies, transferred logic from components to services so that the application can be easy expanded in the future, added additional markup, also added ssr support, although later I realized that it was redundant in this application, but it was great to master a new one technology and understand in essence where it needs to be used.

Technologies used include:

Screenshot of the Door App.

Big-Flash - Internship

Map App Map App github Map App Documentation Sensors on wheels youtube

The main goal of this project was to create a tool, which can help delivery companies to find the best route between different places in many ways .More information about the project can be found on the Big-Flash website or in the video format here.
This was my first React project. I learned the basics of React and the Leaflet library and at the end of the project, having received props hell, I began to further study the topic and realized the importance of using state management libraries.

Technologies used include:

Screenshot of the Converter App

School Project

Students App The Students App github

The application is to handle students’ directory. The application has two APIs, api1 and api2, and the students records are saved into Mongo db. Api1 listens to port 3001 which receives request from frontend site, and forwards the request to api2. Api2 listens to port 3000. Cors is configured to Api1, in which only api2 (localhost:3001) access it.

Technologies used include:

Screenshot of the Students App.

School Project

Converter The converter github

This Converter app was a course work made in Web Frameworks @LAB fall 2021. Framework stack used was Angular v10.1. Source code was written in TypeScript using VS Code. Ui framework used was Angular Material v10.2.

Technologies used include:

Screenshot of the Converter App

School Project

Terrain game Terrain game youtube link

One of my Unity games, while doing this project I learned how to create on unity platform terrain levels, add different effects and make basic animations for objects. Thanks to this project , for myself, I realized that now, at the hobby level,creating games can be quite interesting and exciting.

Technologies used include:

Screenshot of the IoT project

School Project

Weather station Weather station report

The task was to build a weather station to monitor the atmosphere. The application sends data to the cloud, the gateway is “NodeMCU”. The operating system of the project was Azure IoT Hub. This work is the perfect solution for remote weather stations, home environment monitoring systems, and farm or garden monitoring systems.

Technologies used include:

Screenshot of the IoT project

School Project

Weather station (proto) Weather station(proto) report

Thanks to this project, I got acquainted with the world of IoT, and realized how promising this direction is. In this project, I was mainly responsible for the installing software and setting alert messages, but also was actively involved in connecting sensors and creating circuits for them
This project served as the starting point for the above project.

Technologies used include:

Screenshot of the IoT project

Contact me

I'm always interested in hearing about new studying or working opportunities.

Email me