Projects


Web applications

Client project

Contributors

Markus Maal (me) - Development, testing, documentation

Angelika Glaser - Project lead, planning, communication

Karel Schattschneider - Design, understanding client's requirements, conception

Challenges

  • Schedule didn't go as quickly as originally planned
  • One team member was often sick and had to work a lot

Schedule

  1. Creating the initial plan for the project
  2. Choosing development tools
  3. Designing a wireframe
  4. Creating a visual prototype
  5. Setting up Wordpress with multiple administrators
  6. Installing and setting up various plugins
  7. Creating a base for the website
  8. Creating inial versions of the web pages
  9. Testing the web page on different devices and browsers
  10. Finalizing the web page pages

Details

Client project screenshot

A website, which allows the client to introduce permanent makeup services and book an appointment for the service.

CMS: Wordpress
Plugins: Elementor, Smart Slider 3, Visual Portfolio, LiteSpeed Cache, Bookly
Design platform: Figma

Link: http://schattschneiderkarel.ikt.khk.ee/wordpress/

New Year countdown and music player webapp

Challenges

  • Each version was developed on a tight schedule, so throughout the version history, various small bugs can be seen
  • This project was the first time I used <audio> and <video> tags with a HTML5/Javascript application
  • Sometimes, with scheduled playback, the media file would try to play itself twice, which caused problems for me in version 5.0 and getting that fixed was pretty difficult
  • Testing was difficult. Altough the program includes a test mode, which sets the countdown target to 3 hours ahead, it was sometimes still neccessary to set the computer's clock time manually for testing

Schedule

  • Version 1.0 - First version written in Visual Basic: December 2018 (live stream)
  • Version 2.0 - First verison with video playback support: December 2019 (live stream)
  • Version 3.0 - First web-based version written in PHP: December 2020 (live stream)
  • Version 4.0 - Python+Flask rewrite: December 2021 (demonstration video)
  • Version 5.0 - Added more animations, better randomization, and device responsiveness: December 2022 (live stream)

Features

  1. Custom music tracks, images, and videos can be added by copying them to specific folders (see user manual)
  2. Shuffled playback of music tracks
  3. Timer until a selected date. By default it's set to count down to 1st January at 00:00 +0s
  4. In addition to new year, other modes are supported, including...
    • Christmas Eve
    • Christmas Day
    • Birthday (with custom birth year and name)
    • Flag Day (Estonia)
    • Independence Day (Estonia)
    • Valentine's Day
    • Good Friday
    • Summer Equinox
    • Winter Equinox
    • Midsummer Day
    • Victory Day (Estonia)
    • St. Patrick's Day
    • Halloween
  5. The text above the timer can be customized
  6. Display custom texts at certain times of day
  7. Use videos as backgrounds
  8. Randomization
  9. Schedule custom programming (multimedia, text messages, background videos, etc.)
  10. Interface
    • At the top left, name of the current music track and other important messages are displayed
    • At the top right, current date and time, as well as volume and current media file playback progression are displayed
    • In the middle, time until the next year is displayed
    • At the bottom,

Details

New Year Celebrator screenshot

New Year Celebrator is a web application, that displays a countdown until a specified date, while showing various background images, as well as playing background music. It contains image transitions, media playback scheduling (i.e. at 23 o'clock, a certain video file is played), randomization, music fading, and animated backgrounds. I've used it for making several automated live streams on YouTube for celebrating New Year's Eve/New Year.

Client-side languages: Plain HTML5/CSS3/Javascript
Server-side languages: Originally written in PHP (LAMP server), later re-written in Python with Flask.

Project page (GitHub): https://github.com/MarkusMaal/Uue_aasta_vastuv6tja/

React project: My expenses

Project schedule

  • Project started on 10th January 2023
  • Project finished on 26th January 2023

Challenges

  • Since this was one of my earlier React projects, it was difficult for me to initially understand the concept of hooks
  • Getting the filter dropdown menu to correctly update the list of expenses

Details

My Expenses Screenshot

One of the first applications I ever made in React for Javascript Frameworks lesson in Tartu Vocational College

Framework: React
Languages: Javascript, JSX

GitHub repository
Web page

E-portfolio

Project schedule

  • First structure layout was created on 20th October 2022
  • First finished version of the website was due on 7th November 2022
  • Presentation and demo on 11th November 2022
  • Logo redesign on 9th February 2023
  • Custom 404 and 403 pages on 22nd March 2023

Challenges

  • Navigation bar and page title were originally planned to always stick to top. This decision was reversed at the last moment, because it didn't work well with scrolling to sections.
  • Carousel on the details page didn't initially work. It was fixed by modifying the Bootstrap script reference.
  • Footer didn't always stay at the bottom of the page and depending on screen height, was pulled up along with the content. This was fixed by setting the minimum height of the page content container to 100%.

Details

E-porfolio screenshot

A website for my portfolio. Created as the final project for a course. This project has no organizers listed, because it's an individual project.

Framework: Bootstrap 5.0
Language(s): Javascript (HTML5, CSS3)

Sample SASS website

Project schedule

Submitted for grading: 19th October 2022

Details

SASS screenshot

Aim of the project was to practice a CSS compiler called SASS. It was created by following a course found here: https://www.youtube.com/watch?v=_a5j7KoflTs

CSS compiler: SASS
Language(s): Javascript (HTML5, CSS3)
Link: /veebiarendus/sass

KHT Hotell

Project schedule

Final version: 19th October 2022

Details

KHT screenshot

Aim of the project was to practice writing HTML and CSS code spanning multiple pages. It was created as part of a school task.

Language(s): HTML5, CSS3
Link: /veebiarendus/hotell

Other applications

Project Sudoku

Contributors

Markus Maal (me) - Back-end development

Jan Markus Rokka - Front-end development

Project schedule

Final version: 4th June 2020

Functionality implementation schedule (per Programming practice lesson):

  1. Scheduling, planning out the game
  2. Determining the programming language, draw the grid on screen
  3. Adding design elements (buttons)
  4. Display correct numbers for unsolved grid using 2D arrays and sudoku logic. First row numbers were to get aligned unrepeatedly to an ArrayList randomly, next rows would be set randomly and checked. Some boxes should be left empty depending on the difficulty
  5. Depending on what the user decides, place numbers on selected squares
  6. Numbers cannot be set to predefined squares, highlighting preset numbers
  7. Checking function for a number inputted by the user
  8. Add shortcut keys
  9. Difficulty levels - how many empty squares should the user have to fill
  10. Selectively clear squares
  11. New game function - squares get cleared and intial numbers are added
  12. Checking function - checks if the player entered specific numbers to correct squares. If not, highlight invalid numbers with red.
  13. Correct or wrong solution screen - when all squares are filled, display a message that says if the solution is right or wrong
  14. Solution function - the computer tries to autosolve the sudoku
  15. Finalize the solution function
  16. Finishing up, debugging, bug fixes
  17. Finishing up, debugging, bug fixes
  18. Finishing up, debugging, bug fixes

Challenges

  • The inital scope of the project involved creating an algorithm that generated unique sudoku puzzles, but it turned out to be too difficult to make
  • The solving function didn't end up working for harder difficulties

Details

Sudoku screenshot

Sudoku is a classic Japanese puzzle game, where you have to put correct numbers to squares by following certain restrictions. This project was created as a part of the programming practice lesson at Nõo Reaalgümnaasium.

Language(s): Python (Tkinter library)
Repository: github.com/MarkusMaal/ProjektSudoku

Blue screen simulator plus

Project schedule

First public release: 15th September 2019

Source code published: 6th July 2020

Code refactoring: 13th August 2021

Version 2.0 release: 29th August 2021

Version 2.1 release: 16th June 2022

Version 2.11 release: 16th October 2022

Features

  1. Can be used for checking out various Windows blue screens without potentially risking hardware/software failure
  2. Useful for making screenshots of various blue screens
  3. Tons of unique customizable options
  4. Prank mode with various triggers (including timer, program execution, USB insertions)
  5. Selecting a specific error code from the dropdown menu
  6. Automatically detects, which Windows version is being used
  7. Automatic updates (doesn't work by default, set the update server to https://markustegelane.eu/app, version 2.0 or later required to change update server)
  8. Multiple display support
  9. Import/export configuration files
  10. 20+ command line parameters
  11. I'm feeling unlucky feature (generates a random error)
  12. 12 + 1 different Windows error screens in version 2.x, 10 for 1.0 (+1 means a hidden error screen)
  13. All OS-s are saved to class objects, which means you can make multiple configurations with the same operating system and delete default configurations (explained in the user manual, exclusive to 2.0+)
  14. Windowed and full screen modes

Challenges

  • Several blue screens (e.g. Windows 9x, NT4, 2000) required creating custom raster fonts to look realistic
  • Custom labels were required to force disable ClearType on Windows XP blue screen
  • The code in version 1.x was messy and for 2.0 a massive rewrite and rethinking of the system was required in order to keep the project maintainable
  • The update system was difficult to test

Details

BSSP screenshot

This program allows you to simulate various Windows blue screen error message. All messages are customizable. The whole code for this program is publically available and a video about the first version of this software is the most popular video on my YouTube channel.

Language(s): C# (.NET)
Source: github.com/MarkusMaal/BlueScreenSimulatorPlus
Binaries: github.com/MarkusMaal/BlueScreenSimulatorPlus/releases
User manual: markustegelane.eu/bssp/help.pdf

Unstoppable stick figures (Peatamatud kriipslased)

Project schedule

Final version: 16th December 2021

Challenges

  • The algorithm for moving the boxes turned out to be difficult to make
  • The time spent on making levels was longer than anticipated

Details

Peatamatu screenshot

It's a puzzle game, where you have to collect all of the blue flags and reach the finish line. The catch is that the characters won't stop moving until they hit an obstacle. The game is lost if characters collide or if one of the characters falls into a hole. There are various obstacles and modifier blocks, including arrows, sticky parts, boxes and more. The game has 25 different levels. This game was made as a project for the programming basics course at University of Tartu.

Language(s): Python (Pygame)
Presentation: Projekti esitlus
Game files: peatmatu_final