How I build - Real World Project series

PSC Application

What is PSC Application?

PSC Application is business app specially build for some Ship Logistic Company based in Rijeka Croatia. Main part of this app and how is everything build will be explained in article bellow. First version of this app is launched in 2015 and it's coded with PHP. In 2018 all code that I wrote in PHP is refactored and I wrote new backend in .NET Core and also new frontend is build with Vue.js. You can find starting points of backend and frontend on my Github here and here. ( EDIT: App is specially created for this company and I can't show you whole code )

Part 1: Inspections Module

In inspections module of app we have visual overview of Ships Inspections. User can insert new Inspection for particular ship and add some deficiencies (ISM and NON ISM) . More informations of terms can be found here: All inspections can be sorted and searched with various filters and also we can create all kind of reports from that table. ( we will see reports later ). In table we see some buttons that is used for CRUD operations and also for insert some metadata in other ( joined ) tables.

Add Inspections

As we see here when inserting new data we have forms that is connected to our tables and you can see that you can select some data from joined tables. On multiple places I implement autocomplete funcionality in select boxes so user can easily find right data to insert. Also database is MySql and I heavily use all relational goodies ( One To One, One To Many, Many To Many relationships )

Part 2: Nested Deficiencies Module

When you add ship inspection you can insert also all kind of deficiencies that is spotted through inspection. Deficiencies can be ISM and NON ISM. More info at So here we use nested tables so we can have ships with zero or more deficiencies. Also as you see on picture here is also possible to search and filter all kind of data for insert, update etc...

Part 3: Ship Risk Calculator

This calculator dynamically pulls data from various tables in our database and automatically calculate ship risk data. Data is then visually represented in colors so user can see ship risk performance easily in table for some ship. This ship risk calculator is forked from ship risk calculator on


Part 4: Accident Module

Beside Inspections module client needs module where he can add all sorts of accidents that happened on ships. This module also have all CRUD capabilities and we also have nested tables for witnesses statements about accident

Part 5: Company Calculator

Company calculator is module which pulls data from various tables and automatically  calculate current company performance according Paris-MOU based on number of ships that company owns and deficiencies that happens in last 36 months. Also I build visual representation in colors.


Part 6: MOU Module

Here is table with CRUD capabilities for various MOU regions besides Paris MOU and Tokyo MOU that are most important for my client.

Part 7: Ship Module

Ships can be added to our database and joined to certain company that owns them. Also here we see module in which we define all kind of ship types 


Part 6: Tokyo MOU Company Calculator

Beside Paris MOU Company calculator here is module which pulls data from various tables and automatically  calculate current company performance according Tokyo-MOU based on number of ships that company owns and deficiencies that happens in last 36 months. Also I build visual representation in colors. Tokyo Mou and Paris Mou have differences in calculating performance so data and visual representation is different in two calculators

Part 8: Organizations list

List of all ship organizations in the world with names and initials


Part 9: Codes management

Here we have links and tables with CRUD capabilities for all kind of codes that we need in our application sorted and listed by category.

Part 10: Charts and Reports

There are many various reports that can be generated with chars and table data that client then can print from app and include in their annual reports. Bellow you can see some examples. All reports have custom filters, datepickers and search capabilities...


In case you need more information or just want to give me feedback, please feel free to contact me.


I'am serious about deadlines.

Even if they are cronically too short. So, look at it like this. A good salesperson knows that customers have pain points.

  • Analytical mind — If you have an important decision to make, there is no one better to have on your side than someone with an analytical mind
  • Patience — Learning to wait with patience could bring dividends in more than one way
  • Love for learning — Time and time again I’ve stated that I believe in a lifelong, continual learning process. I love learning and I love knowledge.
  • Attention to detail —  if you wanna good app then details is everything.

  • Creative vision — Ideas are rather like bricks. Each one is largely useless. But cement them together in the right way, and they can collectively become a wall, a house, a castle.
  • Discipline — I'm trained to obey rules in code

What are your benefits if you hire me

Unlimited Vacation

Leave your next project to me and go to your earned vacation.


No more sleppless nights and health issues because of project deadlines

Gym Membership

You can cut your Gym budget to half because there is no stress that you need to overcome in gym.

Free Drinks

I'm not asking for free drinks all the time, just cofee from time to time


Your next web project will run smoothly on every computer

Flexible Schedule

I respect your business hours so I will reschedule my hours

Team work

I'm flexible and love to work in teams, so your team is my team

Retirement Plan

I'm not planning to retire myself in near future so you can count on me on every of your next projects

Copyright by Kristijan Klepač 2018