Hi. I'm Kalin.

Web Dev (wannabe)

boy

About Me


Junior programmer with strong interest in web development, coding languages, computer networking and data science
Based in Kingston upon Thames, London, UK
Graduate in Information Technology with First-Class Honours @ University of West London (2017 - 2020)
Trained and Certified Python Web Developer @ The Software University (2021 - 2022)
Completed the Full-Stack Engineer Path @ Codecademy (2023 - 2024)
Passionate about music, cinema, winter and water sports, traveling and exploring

Tech Stack


html and css logo

HTML/CSS


JS logo

JavaScript


python logo

Python


django logo

Django


react logo

React


Redux logo

Redux


express.js logo

Express.js


PHP logo

PHP


wordpess logo

WordPress


SQL logo

SQL


MongoDB

NoSQL


router symbol

Networks


My Projects


composite image of screenshots from project karaliev.com

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.

composite image of screenshots from project Phonotheque

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.

composite image of screenshots from front end app Vinylarium

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.

composite image of screenshots from back end app Vinyl-shop

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.

composite image of screenshots from Gyzytti

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.

composite image of screenshots from project Notes

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.

composite image of screenshots from project Notes

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.

composite image of screenshots from project Notes

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.

composite image of screenshots from project Tenzies game

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.

Notescomposite image of screenshots from project 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.

Contact Me