ClimaFever

May 2021

ClimaFever aims at providing researchers with means of finding out how climate change affects hay fever sufferers, while also benefitting the sufferers. The platform consists of an iOS and a web application.

The iOS application provides environmental data, such as the pollen count information throughout the whole year. It is the first application on the market that provides the data with postcode accuracy. Some features, exclusive to the platform, are pollen count information for subcategories, as well as an individualised pollen health risk. The iOS app also offers information about the air quality and weather conditions. Finally, the application contains a questionnaire, used for conducting research. The web application is focused on the researchers. They can invite and suspend users. The gathered data can be previewed on the website, or exported as an Excel spreadsheet so that it can easily be analysed.

The iOS application is built using SwiftUI — Apple's brand-new framework for building user interfaces. ClimaFever is tightly integrated with Ambee’s Environmental API which provides the data displayed to users, as well as stored with the survey responses. The ResearchKit is used for the study onboarding, asking for consent, as well as for the survey itself. The open-source framework has already proven to be a great success. It is used by a wide variety of institutions, such as Sanford University and Johns Hopkins University. The web application is built on Rails. It uses the latest version of Bootstrap, 5, as a front-end framework.

Annotate.ME

May 2021

Annotate.ME allows two or more users to join a common chat room with a shared photo that can be annotated. The photo can either be from an URL, chosen from a local file or captured using the device’s camera via WebRTC. The participants can communicate via each other using a chat window. As the solution was implemented using Socket.io, both the annotations and the chat features work in real-time. The website also implements Knowledge Graph, allowing users to link annotations with information for various entities, such as people or places.

Custom UI was built, rather than relying on a front-end framework, such as Bootstrap. The back-end was implemented using Express. The communication between the client and the server is via AJAX with JSON requests and responses. Time-consuming operations are performed using native APIs with promises to avoid blocking the main thread. The application makes use of a service worker with a stale-while-revalidate strategy. This ensures that files can be delivered fast, if available in the cache, and be up to date the next time they are requested. By implementing a service worker and utilising IndexedDB, the application also works offline. Users can upload images offline, which then get synchronised with the MongoDB server when online again. IndexedDB was used to store the images, the annotations, and the chat content, allowing users to re-join the room even while offline. The project’s documentation was written using Swagger.

Personal Website

November 2019

I have maintained my website since I was 13-year-old. Initially, I was using WYSISYG type of web creation software. During my first year at University, I learnt to write websites from scratch and in 2018 I released my first one written without the usage of any third-party tools. Apart from introducing myself to the world, my website has been a playground for me to experiment with the newest web technologies and design trends. For instance, mine was among the first websites ever to provide a dark appearance — about a year before support for it was officially added by all major browsers.

During my placement year, I decided to rewrite the project as a dynamic web application, so to meet my then-current and future needs. I also wanted to showcase and build on the knowledge I have had gained throughout the years. It was based on the design of what I had released a year earlier, however, all the code was re-written following the Block Element Modifier (BEM) methodology, ensuring modularity and flexibility (with the concurrent use of SCSS). As expected, the website is based on HTML5. For the back-end, I employed Ruby on Rails 6 which was just released. While I had experience with Rails from University, I had to catch up on some technologies, such as Webpack which was the default bundler with Rails 6. The biggest addition to my website was my blog which gradually increased the traffic to my website.

As of January 2022, the website has received seven “feature” updates. Each one has been planned in advance and has added new features, expanded the content, introduced performance improvements and bug fixes. There have also been tens of minor updates, each focused on fixing issues. The website has continuously scored excellent scores on website auditing tools, such as Google’s Lighthouse (which gives 100% for Performance, Accessibility, usage of Best Practices, and SEO). The performance, as part of the user experience, has always been of utmost importance to me. While it fluctuates based on the packages the website relays on, as well as on the server the project is hosted on, the application has a long record of achieving extraordinarily good loading speeds. Implementing a website-wide lazy loading and relying on the compact WebP image file format are just some of the measures taken to achieve this.

The next major release will adopt forward-looking technologies that will allow for future developments. As a result, brand-new experiences will be made available in the following years.

Vassilen Vasevski

October 2019

In October 2019, I redesigned the personal website of the Bulgarian artist Vassilen Vasevski. Vassilen was born in Bulgaria and began exhibiting his art in Europe. He currently lives in Chicago, where he makes work that critics describe as tranquil, dreamlike and captivatingly fluid. His paintings are deep introspective visions that touch on profound themes such as love, nature and the transcendental. Through sharing them with others, the artist finds his true vocation.

His previous website was developed in 2006, so it was quite outdated content, features and design-wise. Unlike the old one, which used to have a very colourful and saturated background, the new one is simple and elegant. This allows the content to stand out. The home page presents the artist’s art grouped in galleries each with a different theme. The individual galleries are displayed as a grid with appropriate image size, based on the device’s display. Expanding each drawing reveals the full-size version with additional information, such as the name and the size.

Apart from being optimised for various device sizes, as the website is content-heavy, special care was taken to ensure fast performance. CDN is used so that the content can be delivered fast, no matter where the user is accessing the website from. Lazy loading was implemented to guarantee that galleries and full-size images are loaded only if and when necessary. The website makes use of the Bulma front-end framework. However, a custom build with only the essential for the website classes was produced. Furthermore, it was highly customised to provide a unique experience to the users.

Geosoft

August 2019

Geosoft Ltd. specialises in the development of digital elevation models (DEM), application of geographic information systems for research, planning and management in the field of cadastre, as well as preparation of thematic maps of protected areas. The company produces calendars, posters, flyers, leaflets, folders, brochures, books, banners, etc.

The client wanted a new website to replace what was in place. The previous website was over-engineered. While it provided many features, such as content management, the performance was suffering. The customer did not want to spend time managing their website. Furthermore, the content is static, meaning changes would rarely be needed. The new website has an a stylish design. The main purpose of the website is to showcase some of the materials produced by the company throughout the years.

The website front-end is built on the Skeleton CSS boilerplate. Skeleton is very lightweight, but it provides all the essentials needed for prototyping or designing a project in a short time. As it is not meant to be a UI framework, it does not take away from the developer’s creativity — a phenomenon which is usually seen with frameworks, such as Bootstrap. CDN is used to ensure fast performance and reliability.

Learning Spaces

May 2019

“Learning Spaces” is a group project which I had to work on during my second year at university. It was part of the “Software Hut” module which meant to mimic real work environment.

Our client was the University of Sheffield Library who was looking to replace its current static website with a dynamic application. “Learning Spaces” is about helping students to find their preferred study space, based on location and filters. We were shown a similar system, made by another UK-based university, as an example of what was expected as a final result. Having seen the example provided, I wanted to build an app that would provide similar functionality more simply and effectively, while also providing familiar experience to the University of Sheffield students.

The project was built with Ruby on Rails and it uses different web technologies, such as SCSS, HAML, and JavaScript. It was designed and developed in a way that would allow an easy expansion, both content and feature-wise. User, admin, and developer manuals were written and delivered to the client, so that other developers can implement new features and make changes, if needed. Apart from communicating with the client, eliciting requirements, designing and building the system, writing manuals and managing the team, I also took part in the quality assurance process, during which I had to test a system, built by another team.

TehNiki

January 2019

Nikolai Nikolov performs building finishing and completion activities, as well as home and office maintenance. I have been working on his website since 2012. This is when the original one was released. While it was relevant back then, by 2019 web design trends and techniques have changed. The original website represented a room with different interior elements. However, due to the complexity of the design, it was not responsive. Subsequently, I offered him a new, business-friendly layout.

The website focuses on the variety of the services provided, in a concise manner. It also offers users the price list and additional contact details. This information is expected from such a business. However, it is now much better communicated, due to the simplicity of the new design. Furthermore, many accessibility issues, raised with the original design, were addressed and resolved.

The Skeleton CSS boilerplate was used for the foundations of the front-end. Yet, the website is developed from scratch, ensuring that the company’s identity is integrated within the design. CDN and lazy loading are taken advantage of for better performance.

University Management System

December 2018

University Management System is a Java-based application that includes all features needed for a university to manage its students and courses. The system supports users with different roles — administrators, registrars, teachers, and students. All of them have different privileges. The administrators are responsible for creating users and assigning roles, adding departments, degrees, and modules. Registrars deal with students — they make new student registrations and assign optional modules to them. Teachers can add grades and decide if the student can progress, based on their status and grades. The students can see details, such as registration number, modules and grades, and the degree outcome.

The system has a robust design that was also presented using different UML diagrams — use case, class, database and state machine. Building a secure and efficient database was a major part of the design process. My main responsibility was the GUI, although I have contributed to all stages — design, implementation, and testing. The GUI was built in a way that would prevent all possible user mistakes, such as trying to delete a student without it being selected or changing grades for a previous year of study. What is more, all of the user input is validated and only accepted if sensible. As MySQL was used for the database implementation, different security risks had to be considered. Formal and informal methods of verification and testing were applied to ensure correctness.

Tweet A Pie

May 2018

Tweet A Pie is a dynamic web application that allows clients to order pies from a pastry shop chain via Twitter. The system supports two different locations, each with a distinct menu, clients, and order handlers. Clients create a customer account that contains personal information, such as the client’s Twitter handle, delivery address and phone number. Once someone tweets the pastry shop an order, it appears on the website. The Tweet is colour-coded in red in case the Twitter handle does not belong to a registered user. The order handlers are responsible for taking orders and interacting with the customers via the system’s UI. Admins can change the menus and assign special offers to customers. They can also remove customers from the system.

The key technologies used were HTML5, CSS, JavaScript, Sinatra, SQLite, and Ruby. GitHub and Slack were used for version control and team communication, respectively. As ordering of the pies was meant to be done via Twitter, Twitter API was utilised. The testing was performed with a combination of automated tests, using Cucumber, as well as manual tests. SimpleCov was used for computing the test coverage. A server-side verification was implemented so that the system accepts only sensible input and also for the prevention of SQL injections.