This WordPress website is a digital portfolio of an artist - my father Georgi. I take some pride in the fact that it is a solo effort of mine - from physically taking the photos, to editing them with Gimp, to arranging the domain name and hosting, to the actual design, implementation and deployment. It was part of the my final year project at University of West London and have won the award for Best Project on the BSc Information Technology course.

Phonotheque is a web application combining social media, online forum, data scraping and data storage features. Its objective is to act as a platform where users can share their favourite music albums and communicate with one another. The back end has been created using the Python-based framework Django. The About section provides in-depth info about the technicalities while the app itself can be tested safely and effortlessly with mock registration credentials.

Gazetteer is an app displaying interactive maps of any country based on device location or user selection, as well as essential information about it. It is based on the Leaflet JavaScript library and additional plugins for it. The front end utilizes jQuery for the traversal and manipulation of the webpage, the event handling and sending the AJAX requests to the server. The backend itself is written if PHP - dedicated modules get data from a variety of APIs (REST Countries, World Bank, GeoNames, OpenWeatherMap, ExchangeRate-API, Country InfoAPI) as well as from local files. This data is then filtered, processed and rendered as a modal. Users can also switch between 4 main overlays (i.e. map types), as well as select additional overlays - railway routes, main cities, earthquakes, wikipedia articles, the latter being grouped in clusters.

Company Directory is a basic CRUD application connected to a relational database. It is built with PHP, MariaDB, Jquery & JavaScript. Strong emphasis has been put on utilizing Bootstrap's JS modal plugin. The DB consists of 3 tables: personnel, department and location. Each staff member must be assigned to an existing department and each department - to a location. It dynamically loads these options when an entity is being created or updated. The app allows searching of the personnel table, it will be initiated on keyup event. The use can filter the personnel table based on location or department. Deleting entities is only possible when no dependency to a child element exist. The app was in a partially developed state with certain restrictions on what could be modified which proved to be quite challenging.

Vinylarium is a mock online shop for vinyls. The front end app has been created with React. (Please note, the back end server is hosted under Render's free tier, hence it needs approx. 30 seconds to spin up and send its first response.) Users can register, log in (including with Google credentials), browse the catalogue, manipulate their cart and place orders after simulated payment. Apart from this users with admin privileges (the back end confirms/rejects the requests depending on the submitted JWT) have access to admin interface, allowing them to perform CRUD operations on the DB, e.g. adding new items to the catalogue, editing or deleting users etc.

The back end of the shop was created with Express JS. The app connects to a Postgres DB (hosted at ElephantSQL) and provides additional endpoints to the ones currently in use. The ERD can be seen here. The DB design uses intermediary tables to avoid many-to-many relations between some entities, e.g. album/order. Dedicated middlewares are used to verify users' authentication credentials and admin privileges, while passwords are stored in encrypted format. OAuth 2.0 via Google is also implemented.

Mini Reddit was created with React and react-router-dom and is extracting data from Reddit's API. The index page loads, filters and displays data (properties like "accounts_active", "subscribers", "created_utc", "public_description", "icon_img") about 19 subreddits I am following. (This initial loading process due to its nature takes a second or two, I am afraid). The user can then select a subreddit (or ALL) and sort the posts by different criteria ("Best", "Top", "Hot", "Controversial"). If a post preview card <div> is clicked a details page will be displayed, including the related user comments. Again, data will be filtered and truncated before being processed for rendering as the original json files are immense. The app offers search functionality as well, either within a specific subreddit or for all subreddits.

Spotify Playlist Creator is an app created with React which allows users to search Spotify's DB, create a playlist by adding and removing tracks, give it a name and eventually save it to their actual Spotify account. It utilizes Implicit Grant Flow meaning that the process of logging in / obtaining JWT is carried out entirely on the client side. The app will ask the user to log in and grant access to their account (scope is limited to 'playlist-modify-private playlist-modify-public'). If approved Spotify will respond with an URL containing a hash from which an access token and related data can be derived.

QuiQui (Quick Quizz) is build with React and uses Open Trivia DB's API. The user can create and answer a 10-question quiz by customizing its topic, difficulty and type of questions (boolean or multiple choice). Once the questions have been answered (or have been left unanswered), the app will check the answers and count the correct ones.

Tenzies is a basic game where the user rolls "the dice", then can click on a die in order to "freeze" its current value. The objective is to reach a state where all dices have the same value. It has been created with React (under the guidance of Bob Ziroll's excellent "Learn React for free" online course) and utilizes some fundamental React features like conditional rendering, use of components/props, hooks (useState(), useEffect()) etc.

Notes

Notes is a React Markdown Editor which can be used for creating documentation/readme files. It is based on the 'react-mde' package. The program maintains/updates state of [notes] array locally and writes it in localStorage each time it is modified.