I am pretty active console-gamer, especially when it comes to simulator games on the PlayStation console. One of the games is EA WRC-game on Playstation, and there isn't any way to store best stage times while playing career or multiplay-mode, so I decided to make simple website where players can input their best stage times. The special stages selected for the system have been chosen from the game in such a way that the real-world long stages are driven as stages divided into two or three parts. The stages have been arranged, and their driving direction has been determined to correspond to the real-world stages.
There isn't any user authentication features or authentication valid records, but this suits for our group of friends to share their times vie user-friendly interface. System is public, and I tried to take care sql-injection and tried to sanitize inputs, but if a lot flooding appears in the table, I must consider to make more protection.
The special stages selected for the system have been chosen from the game in such a way that the real-world long stages are driven as stages divided into two or three parts. The stages have been arranged, and their driving direction has been determined to correspond to the real-world stages.
Users can manually input their lap times via an intuitive web interface. The times are stored in an SQL database, ensuring structured data management. The system automatically sorts times in ascending order, ranking the fastest laps at the top.
The interface displays a real-time ranking of the top 10 best lap times. A "Show All" button allows users to view the complete list of times stored in the database via a pop-up window. The leaderboard is automatically updated when a new time is added.
When a new lap time is successfully saved, a popup confirmation message appears. The system prevents duplicate or incorrect entries by validating the input.
The interface is designed with CSS media-queries, making it fully responsive for both desktop and mobile users. Tables and pop-ups adjust dynamically to fit different screen sizes. Input field is implemented with html pattern -attribute, which ensures valid input from users, e.g. so you can enter only numbers on time-input fields on correct format.
Frontend: HTML, CSS, JavaScript (for pop-ups and dynamic updates). Backend: PHP (for handling SQL queries and data retrieval). Database: MySQL (for storing and managing lap times)
This was pretty fun and useful project! Check online or Github-repo:
The goal of this practice project was to explore various PHP functionalities and utilize an SQL database in such a way that data could be directly saved, retrieved, and modified from a web form. The project was built entirely from scratch with PHP, HTML and SQL. This was also one of my biggest projects so far.
As an example, I adapted the site into a fault report/ticketing system for a property management company. In this system, a resident can report an issue in their apartment. The report is stored in the database and can be retrieved as a list, which is displayed on the site as separate cards.
Additionally, I implemented a login system using PHP. The site includes a registration form where users can sign up by providing a username, password, and email address. The system stores this information in the database. After registering, users can log in with their credentials. The login process uses PHPs built-in password hashing function password_hash(), ensuring that passwords are securely encrypted while stored in the database. During login, the system verifies the user-provided password against the hashed password in the database. If the credentials match, a unique session ID is created and stored in the user's browser, enabling authentication.
The ticketing system and the login system are independent features, but I integrated them into this practice project. Unlike a real-world implementation, the logged tickets can be freely viewed by anyone. Finally, I created a bilingual version of the site. I built separate files for each language, from which the PHP script retrieves the necessary translations using a key-value approach. This required significant effort but allows content changes to be made in a single file, keeping different language versions easy to manage.
During the project, I also practiced using PHPs MVC architecture, which separates functionalities into different files. This makes updating and debugging the system more efficient. Additionally, I implemented error-handling functions in the login system, ensuring that required fields are filled out, email addresses have the correct format, and that the username or email is not already in use. Based on these checks, the user receives clear error messages.
All form inputs are sanitized using PHPs htmlspecialchars() function, which converts the input data into a safe format. SQL queries utilize prepared statements, ensuring that user input is treated strictly as data before being stored in the database, preventing SQL injection attacks.
See Live version or whole project from Github via buttons down below
At first, my purpose was to create a portfolio site using a CMS content management system like WordPress. However, after considering it, I decided to build it using pure HTML and CSS combined with some functions written in PHP.
My goal was to create a landing page with three static background sections which would switch seamlessly when scrolling, which was perhaps the most challenging part to implement. Another difficulty was making the website as scalable as possible. I tested it on different resolutions, from widescreen to mobile. Additionally, I aimed to include some small CSS effects and animations, at least in the full-screen view. The hover effect was already familiar to me and adds a lot of "liveliness," but I also tested a so-called typing text animation using the @keyframes CSS-rule. To improve scalability, I used relative size units for elements and images. In some cases, I also utilized CSS @media-queries and made adjustments for three different screen resolutions.
I implemented the contact form using PHP with the PHPMailer-library. PHPMailer supports sending emails via SMTP and includes good error-handling functions. The configuration file stores login credentials for the SMTP server, and the script sends the form data in a predefined format to a specified email address. Added also reCaptcha from Google to prevent flooding.
For the burger menu, which opens from the sidebar, and the image carousels on the project pages, I used JavaScript.
I believe I could have completed this much more easily using WordPress, but writing code from scratch gave me a lot of freedom in design without relying on third-party plugins.
See Github repo via button
An exercise where I practiced using the Chrome browsers API interface and the browser's local storage method together with JavaScript. This practice is also from Scrimba Fronend Developer course.
A simple Chrome extension that works somewhat like a bookmarks-feature. The extension allows you to save URLs either from an open tab or by manually entering it into an input field. The saved URLs are stored in the browsers cache and can be accessed with a single mouse click from the toolbar.
To install the Chrome extension, you need to add a manifest.json file to the installation files, including the necessary content and parameters. This extension was created for saving marketing leads, but it can be used for other purposes as well.
Below is a link to the GitHub repository where you can download the extension I created. After downloading the extension, you can install it in Chrome by extracting the downloaded zip-file, selecting "Manage Extensions" in the Chrome browser, clicking "Load Unpacked," and then accessing Lead Tracker from the Extensions button located to the right of the address bar.
A password generator exercise that creates strong, random passwords. The application employs JavaScript's Math.random() method to generate passwords of varying lengths (5, 10, or 15 characters) using a combination of letters and special characters. Users can instantly copy the generated password to their clipboard by clicking a button, which uses the JavaScript function navigator.clipboard.writeText().
From the buttons below, you can check Github repo of this exercise, and check online how it works.
Just another simple excercise with javascript from Scrimba Front End Developer -course. Uses Math.random() -static method to draw random cards from the deck and keep tracking when exceeding 21. Applies scores so the ace is 11 and jack, queen and king counts as 10. Number cards have their face value.
From the buttons below, you can check Github repo of this exercise, and also try it out on live version.
This small project is part of the Scrimba Front End Developer Path. This JavaScript application keeps track of the scores in a basketball game based on user inputs. User can add 1, 2, or 3 points to either the home or guest side.
Ive also added some "extra features," such as a timer for periods, a highlighted leading team, and some popup windows.
From the buttons below, you can check Github repo of this excersize, and also try it out on live version.
Web and frontend development has felt like a good fit for me, and I also have previous experience with online stores, so I took a closer look at the WordPress platform. I did a test project where I used the same ready-made material as in the Taitotalo demo work in the spring. This is how the online store for a fast food restaurant was created.
In the project, I followed as closely as possible the specifications and details that need to be taken into account if a similar project were to be carried out in a real environment. The online store has been installed with, among other things, payment and delivery method modules and a plugin containing cookie policies. I also gained experience in updating products via an Excel spreadsheet, downloadable products, discount campaigns, and custom CSS definitions. In addition, in connection with security issues and database handling, it was also necessary to delve into the PHP programming language, on which the entire WordPress environment rests.
When publishing this project, I first tried various free hosting providers with little or no success before deciding to pay for slightly higher quality hosting. In addition to speed, I got a bunch of other useful features, such as 300 databases and ssh access to the server.
A fun and educational project that I hope will be useful in the future.
I have started to improve my front end developing skills on Scrimba platform. This Front End Developer Career Path -course aims to teach participiants into a job-ready frontent developer in less than six months. Course includes hundreds of interactive coding challenges with several independently made portfolio projects
The course follows the Mozilla Developer Network curriculum and includes over 80 hours of teaching material, in addition to exercises and projects. The modules and subject areas included in the course include, among others, Web development HTML and CSS, interactive content with JavaScript, Chrome extensions, Mobile apps, Responsiveness and accessibility, API interface and Rest, Async and React.
From the button below, you can view the Github repository where I save the assignments made during the course, and for the larger independently made projects, I save the content in separate repositories. More info about Scrimba Frontend Developer Career Path course can be found on https://scrimba.com/frontend-path-c0j
We have a beloved dog named Bablo. Bablo is a Labrador Retriever, and he loves biscuits like other labs do. That inspired me to create a simple game in Python, which was an ideal project for learnin Python. The idea is simple: just guide Bablo to collect as many biscuits as you can. If you catch a biscuit, you get one point, and if you miss one, you lose one life. Note that enen though Bablo loves delicacies, he wont eat just anything. You lose points if you collect something that Bablo doesn'n like. If you collect a carrot, you lose 1 point, and if you collect an olive, you lose 2 points because he hates olives. And it's been said that there are also some poisoned sausages aroung. If you accidentally collect a poisoned sausage, the game will end immediately.
The game was initially developed using the PyGame Zero -library, which is a beginner-friendly way to get into game development with Python. This was made possible by some easy-to-use features and by running the program without a traditional game loop. However, at some point, the limitations of PyGame Zero became apparent, so the game switched to using the actual PyGame library, which is a very popular game development module.
I originally published the game made with Python. To gain experience in web development and JavaScript programming, I have now also made the game in JavaScript so it can be run in a web browser. I've also implement the .exe files compiled with the PyInstaller module so the game will also work in standalone version.
Developing the game was fun, and it provided additional practical experience in programming. One challenge was ensuring the game ran at the same speed on all devices. Even though I locked the screen refresh rate to use the same FPS value every time the code is executed, the speed can still vary slightly, especially in virtual environments.
In the future, the plan is to develop the game further by adding different difficulty levels, which will affect the falling speed of objects and objects spawning interval. Additionally, I will explore the possibility of saving high scores to an SQLite database.
This is an exercise converting a UI framework created in Figma into Python code, with an added feature for saving entered data directly to an Excel-sheet.
This is made possible by the Tkinter Designer tool (Copyright (c) 2021, Parth Jadhav), which as the name suggests, uses Python’s Tkinter library -the most commonly used library for creating UI-applications in Python.
As an experiment, I created a small form-like UI in Figma, which I then converted to Python code. I also added the Openpyxl library into the converted code, allowing the user’s form entries to be saved directly to an Excel sheet. Or creating it if it doesn't excist.
Although similar results can certainly be achieved more easily with ready-made tools, this exercise demonstrates that comparable functionality can be accomplished locally without additional cloud services or coding the entire application from scratch. However, enabling Excel-saving required quite a bit of code modification.
This practice project was an application that I made as a demonstration work for the Taitotalo Low-Code System Developer training program. The project involved implementing a restaurant ordering system for a fictional fast-food restaurant. The purpose of the project was to create a system that serves as a channel between customers and the restaurant staff. The goal was to simulate a system as realistically as possible, ensuring it could be used in a real-world environment.
For the implementation, I primarily used Microsoft Power Platform applications, such as Power Apps, Power Automate, and SharePoint. The project was carried out with a strong focus on functionality and practicality, applying fundamental software concepts learned during my studies. A significant portion of the project time was spent learning new functionalities from various sources. Additionally, image editing and modeling software, as well as AI-based generation tools, were used in the project.
The objective of the implementation was to develop a system that would transmit customer orders directly from restaurant tables to the staff. The system is designed to first send orders to the kitchen for processing and then notify the appropriate party when the orders are ready. Customer terminals can only be used to place orders, the kitchen interface allows acknowledging orders as received for processing or as completed, and the cash register interface can only confirm that an order has been delivered.
The customer interface operates on a shopping cart principle. Product data and attributes are retrieved from a SharePoint table, and the contents of the shopping cart are stored as a variable named "cart" within Power Apps. When a customer confirms an order, the order details are stored in another SharePoint table. The shopping cart is then cleared, and the order is sent to the kitchen and cashier staff for processing.
The final outcome of the project was a relatively simple yet highly reliable and user-friendly ordering system suitable for small businesses. One funny detail that I noticed afterward was that the IKEA Bistro café had introduced an ordering system almost identical to mine, down to the graphical layout. This confirms that the system is also practical for real-world use.
This is the first practice project for the Taitotalo Low-Code System Developer course. In this project, I implemented a reservation system for an imaginary water sports equipment rental company for internal use. I used the Microsoft Power Platform for this project.
The user interface was implemented using Microsoft Power Apps, which used Sharepoint tables as data sources. The user interface had five views: home page, list of rental equipment, customer register page, reservation page, and reservation calendar. There were three Sharepoint tables: One for the database of rental equipment, one for the customer register, and one that acted as a database where reservations were stored.
The bookable vehicle and customer were selected from the register for the reservation. The delivery and return dates and the price of the device per hour were also saved in the reservation. A record of the reservation was made in the Sharepoint table, which triggered a Power Automate automation that sent an automated email and created an Outlook calendar entry for the reservation.
This exercise gave me a good background on what can be done with the Microsoft Power Platform. The project work was done as a teamwork during the Taitotalo training, where we followed the Scrum project management framework, which gave valuable experience in group work.
Copyright © 2025 Niko Nmaki