DEV Community: Ferdo Vukojević

Image Sorting Visualizer

Ferdo Vukojević — Wed, 21 Apr 2021 06:42:58 +0000

Hello World! 👋

It's been a year since I created this small project for fun. I was having fun learning algorithms and data structures, and solving various problems. With the free time I had at the moment I decided to make small app demonstrating how various Sorting algorithms work, by using them to get the original image from shuffled one.
Sorting algorithms are probably the on of easier topics when it comes to algorithms but still pretty fun to visualize. Also coming from a Backend background I decided to do this using Javascript and a bit of Vue, just because learning something new is always fun and I want to start getting into Frontend languages as well, so don't judge my code too hard if you decide to open it :D . Nevertheless here is the end-result.

You can test the app at: https://image-sorting-visualizer.herokuapp.com/
Git repo is: https://github.com/fvukojevic/Image-Sorting-Visualizer if some of you want to ⭐ the project, highly appreciated

This is my old post about the app, you can watch the demo video there and see how it works: https://www.linkedin.com/posts/ferdo-vukojevic-2a9370181_javascript-frontend-vue-activity-6624224236007415808-to_k

Data Structures: QuadTree

Ferdo Vukojević — Thu, 01 Oct 2020 14:21:21 +0000

Hello Community! 👋

I was thinking about starting a series on dev.to called Wednesday Data Structures (yes, my names are very original). And in this series I will try to post a new data structure every Wednesday, go in depth about how it works and when it is used. Hopefully I will have some cool examples and images to showcase as well.

There are so many cool structures out there, from Trees, Heaps, Tries, Linked Lists, Doubly Linked Lists, and so many more.

QuadTree

For first in hopefully many data structures in this series, I decided to talk about Quad Trees.

1) What's QuadTree?

Quadtrees are trees used to efficiently store data of points on a two-dimensional space. In this tree, each node has exactly four children. (so no children, or 4)
We can construct a quadtree from a two-dimensional area using the following steps:

Divide the current two dimensional space into four boxes.
If a box contains one or more points in it, create a child object, storing in it the two dimensional space of the box
If a box does not contain any points, do not create a child for it
Recurse for each of the children.

2) When's it used?

So let's say you own a car dealership company. Your main focus is to sell as many cars as you can. And let's say you don't want to open a shop in a place with a lot of other car dealerships, because it may lower your business. Your problem is very simple:

Go over a place you want to start your business
See where the least amount of car dealerships are
Open your shop there, and start selling!

Can you notice how QuadTrees can be good here? Well think about it, if we say that every point on a 2D map points to a car dealership, we can keep dividing our quadtree until we reach a smaller areas where we see no points at all, or at least lower than the threshold we give it -> and there we start building!

That was just one very simple usage of quadtrees, more advanced usages, applied in real life would be:

1.) Image compression

Each node contains the average colour of each of its children. The deeper you traverse in the tree, the more the detail of the image.

2.) Searching a 2D Area

Kinda the example I gave above. For instance, if you wanted to find the closest point to given coordinates, you can do it using quadtrees.

3.) Collision Detection

A Brute Force algorithm for Collision Detection would take O(n²) time. (Too slow!)

Creating a quadtree allows us to analyse only adjacent squares, reducing the number of comparisons greatly.

3) Implementation

Now the fun part, implementation. There are many implementations out there, and I wanted to create one by myself. It might not be the most optimized one, but it makes a lot of sense to me and hopefully you will also be able to read it.

Just for reference, I will be using Python for this, as I feel matplotlib is the easiest for representing what I want to achieve in the end

Let's start looking at 3 classes we will need:

`Point`

Well, we said we want to keep points on a map. And what does a point has to have? Coordinates. So let's create it!

point.py

class Point:
    def __init__(self, x, y, data):
        self.data = data
        self.x = x
        self.y = y

    def __str__(self):
        return 'P({:.2f}, {:.2f})'.format(self.x, self.y)

`Node`

We said in the beginning. Each node of QuadTree has exactly 4 or no children. So we need a node class to represent each 2D square in QTree.

from classes.point import Point


class Node:
    def __init__(self, x, y, w, h, points):
        self.x = x
        self.y = y
        self.width = w
        self.height = h
        self.points = points
        self.children = []

    def set_points(self, points):
        self.points = points

    def add_point(self, x, y):
        self.points.append(Point(x, y))

    def get_width(self):
        return self.width

    def get_height(self):
        return self.height

    def get_points(self):
        return self.points

Because we are going to plot it with matplotlib in the end, having the coordinates and width and height is pretty straightforward.

Also we want to keep track on how many points (think car dealerships) every node has so we can stop splitting in into 4 when we reach our goal.

`QuadTree`

Our main class where all the "magic" is taking place.

from classes.node import Node
from matplotlib import pyplot as plt
from matplotlib import patches


class QuadTree:
    def __init__(self, threshold):
        self.threshold = threshold
        self.root = Node(0, 0, 10, 10, None)

    def add_point(self, x, y):
        self.root.add_point(x, y)

    def get_points(self):
        self.root.get_points()

    def subdivide(self):
        recursive_subdivide(self.root, self.threshold)

    def graph(self):
        fig = plt.figure(figsize=(12, 8))
        plt.title("Quadtree")
        ax = fig.add_subplot(111)
        c = find_children(self.root)
        print(f"Number of segments: {len(c)}")
        areas = set()
        for el in c:
            areas.add(el.width * el.height)
        print(f"Minimum segment area: {min(areas)}")
        for n in c:
            ax.add_patch(patches.Rectangle((n.x, n.y), n.width, n.height, fill=False))
        x = [point.x for point in self.root.points]
        y = [point.y for point in self.root.points]
        c = [point.data['color'] for point in self.root.points]
        red_patch = patches.Patch(color='red', label='Gas Station')
        blue_patch = patches.Patch(color='blue', label='Police')
        yellow_patch = patches.Patch(color='yellow', label='Hospital')
        plt.legend(handles=[red_patch, blue_patch, yellow_patch])
        plt.scatter(x, y, c=c)
        plt.show()
        return


def recursive_subdivide(node, k):
    if len(node.points) <= k:
        return

    w_ = float(node.width / 2)
    h_ = float(node.height / 2)

    p = contains(node.x, node.y, w_, h_, node.points)
    x1 = Node(node.x, node.y, w_, h_, p)
    recursive_subdivide(x1, k)

    p = contains(node.x, node.y + h_, w_, h_, node.points)
    x2 = Node(node.x, node.y + h_, w_, h_, p)
    recursive_subdivide(x2, k)

    p = contains(node.x + w_, node.y, w_, h_, node.points)
    x3 = Node(node.x + w_, node.y, w_, h_, p)
    recursive_subdivide(x3, k)

    p = contains(node.x + w_, node.y + h_, w_, h_, node.points)
    x4 = Node(node.x + w_, node.y + h_, w_, h_, p)
    recursive_subdivide(x4, k)

    node.children = [x1, x2, x3, x4]


def contains(x, y, w, h, points):
    pts = []
    for point in points:
        if x <= point.x <= x + w and y <= point.y <= y + h:
            pts.append(point)
    return pts


def find_children(node):
    if not node.children:
        return [node]
    else:
        children = []
        for child in node.children:
            children += (find_children(child))
    return children

As there is quite a few things to discuss let's try to explain it.

The class takes 1 parameter called threshold. This is simply the number of threshold we have to be under to stop splitting the qTree.

add_point and get_point are pretty straightforwards. Graph is the main one being called where it plots the whole class. It will go through each children with find_children helper method and plot all of them on the same canvas. Children are just the children of the current node (again, every node has 4 or 0). I also added different markers, so red points to gas stations, blue to police and red to yellow to hospital just for fun.

Subdivide method will keep splitting our QTree until we reach the nodes where the number of points is under the threshold. The logic there is pretty simple -> Count the points and if bigger then threshold, keep calling yourself recursively.

And viola! In the end we just call everything we created in my main start.py file.

from classes.quadTree import QuadTree
from classes.point import Point
from numpy import random


def random_point_data(items):
    return random.choice(items)


if __name__ == '__main__':
    pointItems = [
        {
            'name': 'gas_station',
            'color': 'red'
        },
        {
            'name': 'hospital',
            'color': 'yellow'
        },
        {
            'name': 'police',
            'color': 'blue'
        }
    ]
    points = [Point(random.uniform(0, 10), random.uniform(0, 10), random_point_data(pointItems)) for x in range(1000)]
    quadTree = QuadTree(3)
    quadTree.root.set_points(points)
    quadTree.subdivide()
    quadTree.graph()

We generate the random 1000 points and start subdividing the QuadTree. Here I set my threshold to be equal to 3.

What I get in the end looks like this:

My image may look different than yours, because points are randomly generated every time so keep that in mind.

Conclusion

And that's it for episode 1. Hope you found it useful or at least not so boring to read.

I will the git repo down below if you want to check it out. Feel free to contact me on LinkedIn if you ever want to chat!

Github Repo: https://github.com/fvukojevic/QuadTree-Python

Trying gRPC for the first time

Ferdo Vukojević — Tue, 29 Sep 2020 12:09:21 +0000

So I have been asked about gRPC quite a few times in the last couple of months. I have read about it briefly and thought it would not be hard to migrate to if need be, but I haven't gotten any hands on experience with it so far. That changes now.

So, What is gRPC?

Well the g stands for Google because they created gRPC back in 2015. RPC part stands for Remote Procedure Calls. RPC isn't exactly a new way of doing things, it is just calling a procedure from your machine on another machine. What is modern about it, is just the fact that machine in question can be located on cloud somewhere (like GCP for example).

What is also cool, gRPC uses HTTP/2. So one of the main advantages of HTTP/2 as oppose to HTTP/1.1 for example (used by REST by default) are following:

It is binary, instead of textual
It is fully multiplexed, instead of ordered and blocking
It can use one connection for parallelism
It uses header compression to reduce overhead
It allows Server Pushing to add responses proactively into the Browser cache.

So in more laic terms: Http2 is binary so it's faster, meaning the latency is better. Serialization and deserialization of HTTP/1.1 is slower.

It also uses something called protobuf in stead of json objects for communicating. The only advantage is json is that it has bigger community (for now). Ok, maybe I'm to hard at json, it is also very simple to write, and very easy to understand for beginners.

But let's talk about protobuf. Basically think XML, but smaller, faster, and simple. You just define the .proto file (the examples will be in my app I will get in a second), and with just one command you can generate whole files and classes for yourself. So no need to worry about anything, the library does it for you.

And that's about it for the intro. Let's jump into an app.

APP

The app is pretty straight forward in the end. On frontend side, you will simply be pressing squares and circles in as fast as possible. But what's cool, is that we will be using one REST microservice the frontend will hit, and 2 gRPC microservices under it, for keeping track and fetching your highscore, and also calculating the size of next appearing objects.

The faster you are able to hit objects, the smaller they will appear next, and the slower you are, the bigger the next object will be.

So as said, game is pretty simple. And I will not really go into how frontend works as it is just one index.html file, where the hardest things are a few ajax calls to the REST microservice.

But, let's get into first gRPC microservice.

gRPC Highscore microservice

So this microservice does two things: Get Highscore and Set Highscore. Not very original but let's go with it. I never said this project was rocket science 😁

1) Define the .proto file

As said in the intro, gRPC uses protobuf, and to use it, we first define the .proto file. Seeing as we don't need to send anything to get the highscore, rather just read it, that part will take nothing, and the set highscore will take the score, and see if it is better than the one stored so far.

syntax = "proto3";

option go_package = "game";

service Game{
    rpc SetHighScore(SetHighScoreRequest) returns (SetHighScoreResponse);
    rpc GetHighScore(GetHighScoreRequest) returns (GetHighScoreResponse);
}

message SetHighScoreRequest {
    double high_score = 1;
}

message SetHighScoreResponse {
    bool set = 1;
}

message GetHighScoreRequest {}

message GetHighScoreResponse {
    double high_score = 1;
}

Viola. As simple as it gets. Let's quickly talk about it.
The syntax part just says the version of proto we are using, and proto3 is the newest one available, so we are going with that.

option go_package just means, the .go file i creates, will be inside game package.

service is actually the bread and butter of gRPC and you can think of two rpc calls as just procedures or functions on remote machine we are trying to call. And as I said in the beginning as well, it's not using jsons, so we define two message signatures that represent what we have to send to use the gRPC. Here we have 4 message types: SetHighScoreRequest, SetHighScoreResponse, GetHighScoreRequest, GetHighScoreResponse. The only thing that I have to mention here is this funny number 1 you are seeing. That just means, in future, if we add or drop more fields, those numbers will help us save the backwards compatibility.

2) Run the command for autogenerating the class for us.

Well I'm using go, so my command requires just these 2 steps:

go install google.golang.org/protobuf/cmd/protoc-gen-go

and

protoc -I ./protobuf-import -I ./ ./v1/*.proto --go_out=plugins=grpc:./

and you can see it inside my Makefile. I will not go deep into Makefile, it's pretty simple so is the .sh script, but if you are curious about it, and have no experience, ping me and I'll explain it 🙂

3) Create the gRPC server

Well, the step 2 created this very cool highscore.pb.go file for us. Now let's use it.

I created a following structure internal_usage/server/grpc/grpc.go. The reason why it is inside interal usage, is just because, once implemented, we really shouldn't worry about it. It will always work and we can start working on other parts of the code.

But let's see what's inside this grpc.go file.

package grpc

import (
    "context"
    v1highscore "github.com/fvukojevic/grpc_test/m-apis/m-highscore/v1"
    "github.com/pkg/errors"
    "github.com/rs/zerolog/log"
    "google.golang.org/grpc"
    "net"
)

type Grpc struct {
    address string //address where the gRPC will listen at
    srv     *grpc.Server
}

func NewServer(address string) *Grpc {
    return &Grpc{
        address: address,
    }
}

var HighScore = 999999.0

func (g *Grpc) SetHighScore(ctx context.Context, input *v1highscore.SetHighScoreRequest) (*v1highscore.SetHighScoreResponse, error) {
    log.Info().Msg("SetHighscore in m-highscore is called")

    HighScore = input.HighScore
    return &v1highscore.SetHighScoreResponse{
        Set: true,
    }, nil
}

func (g *Grpc) GetHighScore(ctx context.Context, input *v1highscore.GetHighScoreRequest) (*v1highscore.GetHighScoreResponse, error) {
    log.Info().Msg("GetHighscore in m-highscore is called")

    return &v1highscore.GetHighScoreResponse{
        HighScore: HighScore,
    }, nil
}

func (g *Grpc) ListenAndServe() error {
    listener, err := net.Listen("tcp", g.address)

    if err != nil {
        return errors.Wrap(err, "Failed to open tcp port")
    }

    var serverOpts []grpc.ServerOption

    g.srv = grpc.NewServer(serverOpts...)

    v1highscore.RegisterGameServer(g.srv, g)

    log.Info().Str("Address", g.address).Msg("Starting gRPC server for highscore microservice")

    if err := g.srv.Serve(listener); err != nil {
        return errors.Wrap(err, "Failed to start gRPC server")
    }

    return nil
}

As you can see, even though it looks very complex, what does it really represent? Well the functions GetHighscore and SetHigshcore are here, they were defined inside .proto file if you remember. Also we created a struct to hold our gRPC server.

And in the end, we have this ListenAndServe method, because every gRPC has to listen on a certain address(port) and be served so it can be used.

4) Call our server from the main

If you are familiar with go, you know every entry point is package main and main.go file. In this main.go, what do we really need to do? Well just initialize our server and serve it.

main.go

package main

import (
    "flag"
    grpcSetup "github.com/fvukojevic/grpc_test/m-apis/m-highscore/internal_usage/server/grpc"
    "github.com/rs/zerolog/log"
)

func main() {
    var addressPtr = flag.String("address", ":50051", "address where you can connect to gRPC m-highscore service")

    flag.Parse()

    s := grpcSetup.NewServer(*addressPtr)

    if err := s.ListenAndServe(); err != nil {
        log.Fatal().Err(err).Msg("Failed to start grpc server")
    }
}

And that's it!.

gRPC Game Engine microservice

Even though the name sounds cool, it is just the same as highscore microservice, so I'll let you go over the code on your own. Again, it's pretty much the same

REST for communicating between frontend and backend

Well I did end up using REST in the end. Why? Well it made no sense to call gRPC directly from javascript..at least not to me. So I created a small gateway that will provide few routes, and every route it hits, will internally call gRPC and execute what it needs to.

I am using gin gonic for rest, it is a very cool and fast package and fairly simple to set up.

But my REST microservice has to be aware of gRPC running eternally. So, that created the clients.go file.

So we have our servers, highscore and game engine. But what calls them? Well that would be clients. They basically connect to the ports of the servers and communicate with them.

Here's how simple the clients.go file looks.

package domain

import (
    v1gameengine "github.com/fvukojevic/grpc_test/m-apis/m-game-engine/v1"
    v1highscore "github.com/fvukojevic/grpc_test/m-apis/m-highscore/v1"
    "github.com/rs/zerolog/log"
    "google.golang.org/grpc"
)

func NewGRPCGameServiceClient(serverAddr string) (v1highscore.GameClient, error) {
    conn, err := grpc.Dial(serverAddr, grpc.WithInsecure())

    if err != nil {
        log.Fatal().Msgf("Failed to dial: %v", err)
        return nil, err
    }

    log.Info().Msgf("Successfully connected to [%s]", serverAddr)

    if conn == nil {
        log.Info().Msg("m-highscore connection is nil")
    }

    client := v1highscore.NewGameClient(conn)

    return client, nil
}

func NewGRPCGameEngineServiceClient(serverAddr string) (v1gameengine.GameEngineClient, error) {
    conn, err := grpc.Dial(serverAddr, grpc.WithInsecure())

    if err != nil {
        log.Fatal().Msgf("Failed to dial: %v", err)
        return nil, err
    }

    log.Info().Msgf("Successfully connected to [%s]", serverAddr)

    if conn == nil {
        log.Info().Msg("m-game-engine connection is nil")
    }

    client := v1gameengine.NewGameEngineClient(conn)

    return client, nil
}

Just connect, see if you got any errors (your really shouldn't, unless maybe u missed a port or something), and that's it.

Now for grand finale we make our REST routes public with following code:

package main

import (
    "flag"
    grpcSetup "github.com/fvukojevic/grpc_test/m-apis/m-highscore/internal_usage/server/grpc"
    "github.com/rs/zerolog/log"
)

func main() {
    var addressPtr = flag.String("address", ":50051", "address where you can connect to gRPC m-highscore service")

    flag.Parse()

    s := grpcSetup.NewServer(*addressPtr)

    if err := s.ListenAndServe(); err != nil {
        log.Fatal().Err(err).Msg("Failed to start grpc server")
    }
}

Final result

In the end, the final result should look something like this, just a simple app for clicking and tracking the speed of user.

Project resources

Github: https://github.com/fvukojevic/grpc_test

The app will work even without microservices, but they are still cool to showcase.

Again, I know this might be hard to follow with, so if you have any questions feel free to contact me with email and/or on linkedIn if you want to learn more about gRPC and we can chat about it!

My LinkedIn profile: https://www.linkedin.com/in/ferdo-vukojevic-2a9370181/

Till next time! 🚀🚀

Image Recognition Website using Python & Javascript

Ferdo Vukojević — Fri, 18 Sep 2020 09:32:03 +0000

Hello Community! 👋

Example before we start

Background

So the other day I decided to dig deeper into Flask. Due to not having the opportunity to use it professionally I decided it would still be a fun framework to pick on the side. I started making some small API's for fun, testing them, getting a better feeling how it works.

After learning a thing or two I decided it would be fun to create a small app that would use my flask api and display the data.

Image recognition is always an interesting topic so went on internet and found a really cool package from TensorFlow. It is called inception 2015 and it designed for image recognition. It is not super advanced and it works best with stuff like animals, food, etc. (also having transparent background as white helps, and having so many things happening inside the image usually signals worse results).

Setup

Setup is fairly simple and I would suggest visiting my Github page where I will link the app so you can test it yourself. There I have detailed setup so I will not repeat myself here if you don't mind.

Info

I always like meeting new people and exchanging knowledge. So feel free to add me on linked in if you are interested.

My LinkedIn profile: https://www.linkedin.com/in/ferdo-vukojevic-2a9370181/
App Repo: https://github.com/fvukojevic/image_recognition
Live Demo: https://image-recognition.frans.thedev.id/ -> Credit goes to Frans Allen in the comments :)

If you test the app and like it, staring it would help me greatly! ⭐

I'm still very new to this site so hopefully this post is fine.

Till next time! 🚀 🚀 🚀

I created Image Sorting Visualizer with Javascript

Ferdo Vukojević — Tue, 01 Sep 2020 19:20:33 +0000

Hello Community! 👋

For a while now I have been a huge fan of algorithms and data structures. I have been slowly solving problems on leetcode and algoexpert and I wanted to showcase some of my skills.

Sorting is a staple when it comes to algorithms and one of the first things i learned while studying. There are a lot of easy algorithms, such as bubble sort (one all of us are probably familiar, two for loops for the win!), but there are also harder ones, such as quicksort and maybe a heap sort.

IDEA

So the idea I had is just to visualize how the sorting algorithms work (I know there are many apps already doing that, but I wanted to create something on my own).

The app would be very simple. You just go online, find a picture, copy the image url and paste it in. Additionally you can choose number of rows and cols, which I will use to slice the image into smaller parts.

Once the image is sliced, I would reshape it so it would look all jumbled.

And then you simply decide on what sorting algorithm you want to use, and watch how the animation shows the way algorithm solves the problem.

On the bottom you will get a display saying, how long algorithm ran in the backend, what it's time complexity is and how many animations will processed to get an original image back.

IMAGES

Presorted

Sorted

Where you can find the app

App is hosted on heroku and it's very light and easy to use so feel free to test it out. I would suggest having maybe not more than 10 rows or columns because the number of animations might get too big, and you will probably get bored of watching the whole image reshape itself 😁

I would love if you can give me a feedback on what do you guys think.

Live demo of the app: https://image-sorting-visualizer.herokuapp.com/

Github link of the app is: https://github.com/fvukojevic/Image-Sorting-Visualizer in case any of you kind souls really likes it and decides to star the project 😁

So I created Slack Clone in Vue(kinda)

Ferdo Vukojević — Fri, 28 Aug 2020 14:30:54 +0000

Hello Community! 👋

Before I dive into the app, just wanted to give a few pointers, so nobody get's confused.

This app is only created for fun. So it is only working locally and I do not intend to host in anywhere. It would probably be illegal to do so, due to usage of Slack logo and their name in my application. So this is as said, only for fun and learning purposes.
The App is heavily inspired by Youtube channel Clever Programmer and their livestream, where they did the app using React. I created it again using Vue.js and plan on adding a lot more functionalities, because they only added a few in their 4 hours livestream.

How does it work

This app currently supports the following.

Login with Google
Get channels from database (I am using firebase - Cloud Firestore)
Adding new channels, switching between them, reading and adding messages

Things to be added in short future:

Editing and Deleting the messages
Adding Threads to messages
Notifications about unread messages
Editing channels (public/private, editing name, etc...)

Project Screenshots

Char Room Page

Dynamic Slugs

Dynamic Channels

User Data from Google

What next?

Again, the app is still very much under construction. I intend to add more and more features, like threads, notifications, deleting messages, editing them, pushing files, and many more. If you would like to help and be a part of my journey you can always ping me and we will get you started! This is a good learning experience and I look forward to working with different people

Reflection

So at this point I just want to reflect on this app and why I decided to use it. So I have been working as a software developer for the last 2 years, and my main focus has been more on the backend side of things. So creating api's, microservices, interacting with databases (nosql, sql, key value stores, etc.) has always been my main focus.

Recently I decided to switch gears and try learning more about frontend and devops things. I picked up dockers, started learning them, and after a while got pretty good at it (this app will potentially be dockerized). When it comes to frontend I picked up Vue.js pretty fast as it is probably the fastest and easiest frontend language to start with. I created bunch of little small apps, just testing how everything works, how lifecycles works, how it all connects to Vuex, etc.

Now I am looking to expand and learn more advanced things and topics of Vue.

You can clearly see by my code, that I am no expert when it comes to frontend, so please bare with me while I am trying to improve the code and add new features. While it might take only few minutes to some, I still have to spend some time on stackoverflow and alike to seek help whenever I get into trouble.

And as said before, this is an app in development and there are many known issues and bugs that I will eventually fix.

APP Code and Setup:

App is fairly simple to setup. Only thing confusing might be firebase config, and if there is any trouble, as said in README.md, you can always ping me about that and I will help you get started.

Again, in case of being a contributor on this project, I am always looking for help and exchanging knowledge so you can ping me about that as well.

Github link: https://github.com/fvukojevic/Slack-Clone-Vue

So I created Spotify Clone in React(kinda)

Ferdo Vukojević — Wed, 12 Aug 2020 10:27:31 +0000

Hello Community! 👋

Before I dive into the app, just wanted to give a few pointers, so nobody get's confused.

This app is only created for fun. I decided to do it because I'm new to frontend and especially to React
I was using the spotify api, and because of it all songs have a preview_url so they don't play in full, just first 30 seconds
Huge shout out to youtube channel called Clever Programmer. They are the ones who started this project in React. They implemented the design and showed how the api works. I took it from there to actually make songs work, as well as the buttons that had no functionality. (Their app was just a 'design' clone with not a lot of functionality).
Because I was following someone else's design, the app ended up not being that responsive, and is probably best to be used with your pc's, laptops & tablets.

How does it work

This app currently supports the following.

Login with spotify api
Get user playlists created on spotify
Clicking on playlist displays songs on the screen
Switch between songs, and play 30 seconds of them
Volume is adjustable

Things to be added in short future:

Shuffle and Repeat buttons are functional ( Finished ✅ )
Previous and Next buttons are functional
You will be able to ❤️ your favourite songs and they will be placed in their own playlist
Recreate design with bootstrap so the app is more responsive

Project Screenshots

Body Page

Dynamic Slugs

So what made me create this?

As I already wrote above, I am new to frontend scene. I've been working as a software developer for the last 2 years, and my main focus has been more on the backend side of things. So creating api's, microservices, interacting with databases (nosql, sql, key value stores, etc.), dockers, etc. have always been my main focus.

Recently I decided to switch gears and try learning more about frontend. I picked up Vue.js pretty fast as it is probably the fastest and easiest frontend language to start with. I created bunch of little small apps, just testing how everything works, how lifecycles works, how it all connects to Vuex, etc.

Now I decided it would not be the worst idea to try something new (like React) so I can compare the two frameworks and have a better grasp on how they both work. Advantages and disadvantages of both.

State of the app

This application is still in development. It is not close to being finished. I am trying to create issues and add new features as I go. Working doesn't give me a lot of spare time so my developing process is pretty slow. Also, being new to fronend doesn't help either.

You can see issues regularly being added to the repo and I will try to tackle them as I go.

What's next

Depending if the community wants, I would be very interested in recreating this app in Vue.js once I finish everything I want in React. That way, I can have a post created and going over benefits and flaws of both frameworks and which one is easier to learn for beginners.

But please tell me if that is something you want to see.

Kind Regards, and I am pretty new in this community so hopefully my posts make sense.

Github link: https://github.com/fvukojevic/Spotify-React-Clone

Image sorting visualizer

Ferdo Vukojević — Mon, 10 Aug 2020 10:07:39 +0000

Hello Community

I recently got into learning about algorithms and data structures. With so many cool projects online I decided to create one of my own.

IDEA

So the idea I had is just to visualize how the sorting algorithms work (I know there are many apps already doing that, but I wanted to create something on my own).

Once the image is sliced, I would reshape it so it would look all jumbled.

And then you simply decide on what sorting algorithm you want to use, and the algorithm logic will display how it shifts the image back to the original form.

As a beginner I knew nothing about time complexity of sorting algorithms, so it helped me to better see why some of them are better than the others.

App is hosted on heroku and it's very light and easy to use.

I would love if you can give me a feedback on what do you guys think

Live demo of the app: https://image-sorting-visualizer.herokuapp.com/

Github link of the app is: https://github.com/fvukojevic/Image-Sorting-Visualizer in case any of you kind souls really likes it and decides to star the project 😁

Thanks and I'm new, joined today (10.08.2020) hopefully I am not making a fool of myself 😁