Olipa Kerran Kavall Portfolio Item

Olipa Kerran Kavall

HTML, CSS, Javascript, PHP, MySQL

Merging historical insights with web software development: an exploration of Kavallinmäki's legacy through mapping technology.

Info

End-To-End Development: Bringing Kavallinmäki, Espoo History to Life

In collaboration with Viherlaaksolaiset Ry and funded by the City of Espoo, I embarked on a journey to create a web software that digitally documents Kavallinmäki Espoo’s rich historical heritage. “Olipa Kerran Kavall” is an innovative map application that offers users a dynamic view into the region’s storied past. With five maps ranging from 1932 to the present day, users can explore heartfelt stories of historic homes, nfluential figures, and long-standing businesses by clicking on pointers displayed on the maps. With a Google Maps API integration, users can also generate historical walking routes from these pointers and navigate them using Google Maps. Released in the summer of 2023, this project not only showcases the region’s heritage but also ensures that future generations can experience it. Moreover, with a specially designed admin view, future updates can be made without needing my intervention, making “Olipa Kerran Kavall” a versatile tool for all users.

Visit Application
Client: VIherlaaksolaiset Ry
Date: 1-08-2023
Services: End-to-End Development
Programming Languages: HTML, CSS, Javascript, PHP, MySQL

Brief

Looks simple, but sure didn’t feel like it: 100+ hours of work, 10000+ lines of code – a solo project from start to finish.

The project quickly grew from an estimated 40 hours to over 100+ hours due to evolving requirements and the need to learn new software development dimensions; these included generating maps with Google Maps API, and Leaflet API. Despite a touch of naivety and initially underestimating the project’s challenges, the client undoubtetly got their money’s worth. The project was a huge eye-opener in customer interaction, recognizing own worth, and the challenges of development using a waterfall model. Now that the project is completed, I feel equipped to handle large-scale project – and I can’t deny the immense satisfaction when all the pieces finally came together.

The development commenced with extensive back-and-forth communication with the client. As the client were uncertain about their exact needs, only posessing a vague end-goal vision, I really had to generate that vision from scratch – heck, I even went to the extent of real-time hand-drawing interface visualisations. Prioritizing user experience and intuitive design, I emphasized affordances to ensure a user-friendly, responsive application. I wanted the aesthetic of the application to have an antique vibe, achieved through the choice of fonts, backgrounds, and presenting the maps in a picture-like frame. The final product, I believe, met all of these aims.

Moving Forward

There’s always room for improvement; for upcoming projects, I plan to adopt a more structured software architecture and embrace modern frameworks.

The current project, Olipa Kerran Kavall, stands as a testament to the simplicity of hard-coding pure HTML, CSS, and JavaScript. However, as the scale and complexity of such projects increase (hopefully more areas will follow Kavallinmäki, you know where to find me), a more structured and modular approach becomes essential. Transitioning to a modern web framework like React or Vue.js could bring several benefits. These frameworks offer component-based architectures, making the codebase more maintainable and scalable. Moreover, they come with built-in state management solutions, which can streamline the handling of dynamic data, such as user interactions and story updates. Integrating a backend system using Node.js or Django would further enhance data storage and retrieval processes. By migrating to such a framework, I’d not only improve the performance and responsiveness of Olipa Kerran Kavall but also pave the way for easier feature additions and updates in the future.

Leave a Reply

Your email address will not be published.