Professional software engineer

About Me

Web Development

My story

My name is Marko Mutić, and I'm a professional full stack engineer (frontend-focused) with 7+ years of experience, proficient in React, Node, Typescript, Javascript, and various other technologies across the stack, as well as designing and building entire apps from scratch. Due to extensive experience in both corporate environments and freelance projects, I became proficient in managing a wide range of responsibilities, from architecture design to deployment, ensuring high-quality and scalable solutions.

Feel free to reach out to me for networking, collaboration, or exciting new opportunities.

Resume

Skills

Typescript

NextJS

JQuery

ReactJS

GatsbyJS

Redux

NodeJS

ExpressJS

PostgreSQL

MongoDB

Mongoose

GraphQL

Socket.IO

Docker

Redis

AWS

Complete experience

Whether you need an aesthetic and functional user interface, an efficient web server with a database, or you just have a vague idea and need an entire project, you've come to the right place. Instead of displaying one long list, skills have been divided into three general areas. Clicking on the links above the title of this article will show more information about each one of them.

My Work

Few quick examples of my code

  • BalanceChat

    BalanceChat

    ReactJS - CSS - NodeJS - ExpressJS
    Socket.IO - MongoDB

  • Solutions

    - Used clarifai-nodejs-grpc package and passed it the adequate id

    - Used two loops to iterate over responses then stored all the data into one array

    - The greeting message checks the time of the day and renders an appropriate message

    - Added detailed loading screens and error messages to make sure the user knows what's going on

    Potential improvements

    - Adding the ability to e-mail the converted text

    - Adding more Clarifai models and with them more options

    - Improving routing and adding more pages

    - Adding a counter and stats for ranking users and/or achievements

    Live Code

    Overview

    An app that's built around Clarifai's OCR model, which uses AI to transcribe symbols from images and convert them into plain text. Immediately upon conversion, the text can be edited, copied, or pinned to your profile for later use. The accent is on integration with AI models, the app itself is pretty simple for now.

    Includes

    • 3D authentication forms
    • Interactive output area where you can modify the text
    • Overview of pinned items
    • Node & Express backend connected to Clarifai
    • PostgreSQL & knex

    Challenges

    - Clarifai models switched to gRPC, and connecting to their API is completely different

    - The AI returns small pockets of text instead of one large document, and the app should display the latter

    - The home page should display an adequate greeting

    - The user should know what's going while waiting, at any given step

    BalanceChat

    ScanSight

    ReactJS - CSS - NodeJS - ExpressJS
    PostgreSQL - Clarifai API

  • Solutions

    - Emailing function is handled by a small PHP script directly uploaded

    - React i18next enables language support without reloading the page

    - One language button is a link that leads to a page with no other data

    - The provider has been placed into a layout component, that wraps page content

    Potential improvements

    - Adding the delayed support for German

    - Adding a separate page about the machine park and services

    - Adding the ability to order Air Guides automatically

    - Adding more product info and detailed specs

    Live Code

    Overview

    A static website developed for a company specialized in construction of various tools, moulds and casts. In 2021 it was migrated to GatsbyJS, but since the vast majority of content and design remained the same, the website still states the original year of development, despite using more modern features.

    Includes

    • Interactive photo galleries
    • Optimized images using gatsby-plugin-image
    • Switching languages without reloading
    • A contact form without any third party service
    • Landing page

    Challenges

    - Should be able to send an e-mail directly without any third party

    - Should be available in several languages without duplicate pages or reloading

    - One language button should lead to a page

    - Should use a provider, even without access to routing and top components

    MJR Alatnica

    MJR Company

    GatsbyJS - GraphQL - CSS - PHP

  • Solutions

    - Utilized YouTube API's free tier, then used DIY-related queries

    - Used Magic Link, with customized and visually consistent windows

    - Enabled watch history and the ability to save favorite videos to signed in users

    - Used Hasura to enable GraphQL queries and fetch just the necessary data

    - Used Magic's DID token and JWTs, to ensure only valid users are accepted

    - Added requests for both signing user out, clearing cookies and cleared session storage

    Potential improvements

    - Connecting the banner to the API (free tier limit)

    - Building a custom video player with controls

    - Improving authentication and error handling

    - Building a page for detailed watch history

    - Adding search functionality

    - Adding like and dislike functionality

    Live Code

    Overview

    An example app for streaming DIY videos and tutorials. It can be used with an account or as a guest. You can browse popular videos, or go by category, and watch videos instantly in a modal.

    Includes

    • Modal video view
    • Ability to save videos
    • Magic Link authentication
    • Hasura GraphQL server
    • Neon Postgres database

    Challenges

    - Should use an API with a rich offer of DIY videos

    - Should enable quick and secure sign in to both new and old users

    - Should offer additional functionality to signed in users

    - Should allow us to fetch various data without big complex requests

    - The database should stay in sync with authentication data

    - Should clear everything on sign out

    YouFixr

    YouFixr

    NextJS - Typescript - GraphQL
    Hasura - CSS

  • Solutions

    - Three props (two for size, one for seeds) determine which view should be rendered

    - Single item route checks for category in the url, and adds it if it's missing

    - Reselect is used to optimize Redux state loading

    - Passwords have been encrypted using bcrypt

    - Redirects to the login page store urls through the react router

    Potential improvements

    - Turning the orders page into an admin dashboard

    - Adding the ability to purchase online

    - Storing refresh tokens

    - Adding profile pages for users

    Live Code

    Overview

    An example app of an elite fast-food restaurant. The client can order food from the menu, or create their own custom burger. Successfully submitted orders are displayed on the ‘Orders' page, and while only some information is currently visible in the UI, all the necessary data is stored in the database.

    Includes

    • Interactive visual burger builder
    • Authentication and guarded routes
    • Interactive shopping cart
    • ExpressJS server with outsourced routers
    • PostgreSQL database with knex

    Challenges

    - Should display custom burger images

    - The seed switch shouldn't affect items already in the cart

    - Single item should use a dynamic route, but be accessible from different places

    - Each component should load only the necessary Redux state

    - Passwords shouldn't be stored as plain text

    - After logging in, the user should proceed to where he clicked

    BurgerElite

    BurgerElite

    ReactJS - Redux - CSS - NodeJS
    ExpressJS - PostgreSQL

  • Solutions

    - Two different forms use two different PHP files

    - A JSON file with identical IDs converts the content before sending an order

    - Menu component uses a type prop that determines the view

    - react-router-sitemap generator and react-snap have been added for SEO

    - The .htaccess file has been modified to render index.html on every route

    Potential improvements

    - Splitting categories into different pages

    - Adding the entire offer to the store

    - Adding accounts and online shopping

    - Adding a list of stores that sell their products

    Live Code

    Overview

    A web app developed for a goat farm which produces a wide variety of natural organic agricultural products. Visitors can also order products online, without registration. Due to the rapid expansion of the offer, and with it, frequent updates to the app, some features are developed to suit larger apps than this one currently is.

    Includes

    • Interactive shopping cart
    • Guarded checkout page
    • Switching languages without reloading
    • A contact form without any third party service
    • Banner with parallax scrolling effect

    Challenges

    - Should be able to send two types of emails

    - Orders should auto-translate the content for the owners

    - Different menus in different views shouldn't use different components

    - SEO should be optimized

    - Users should be able to manually look up different routes

    Gazdinstvo Kovačević

    Farmstead Kovačević

    ReactJS - Redux - CSS - PHP

  • Solutions

    - Utilized Mongoose virtuals to connect different data models

    - JWT signing and password hashing have been moved into a method in the user model

    - Password hashing has been placed in a pre-save function that runs only if the password is modified

    - The number of days is also calculated in the user model, upon signing in

    - The component for user profiles checks the data against the signed in user's and renders different versions

    - Context API has been used to pass data around

    Potential improvements

    - Adding profile pictures for users

    - Adding the ability to edit profile data

    - Adding protected chat rooms that require a password

    - Adding the option to send images

    Live Code

    Overview

    A simple chat app that arranges users into rooms. Authentication is required, after which, each user can create their own rooms. User creators can edit or delete rooms. You can visit other users' profiles.

    Includes

    • Authentication forms
    • List of rooms with a filter to see only yours
    • Real time chatting using socket.io
    • Authentication and CRUD operations using ExpressJS
    • MongoDB & Mongoose for storing data

    Challenges

    - Some data needs to be shared, even though the database is non-relational

    - JWT signing and password hashing should not clutter the code

    - We shouldn't run hashing functions unnecessarily

    - Users should have a number of days on their profile, extracted from a timestamp

    - A component for profiles should differentiate between the current user and others

    - User data should be accessible everywhere in the app, without a third party

    BalanceChat

    BalanceChat

    ReactJS - CSS - NodeJS - ExpressJS
    Socket.IO - MongoDB

  • Solutions

    - Used clarifai-nodejs-grpc package and passed it the adequate id

    - Used two loops to iterate over responses then stored all the data into one array

    - The greeting message checks the time of the day and renders an appropriate message

    - Added detailed loading screens and error messages to make sure the user knows what's going on

    Potential improvements

    - Adding the ability to e-mail the converted text

    - Adding more Clarifai models and with them more options

    - Improving routing and adding more pages

    - Adding a counter and stats for ranking users and/or achievements

    Live Code

    Overview

    An app that's built around Clarifai's OCR model, which uses AI to transcribe symbols from images and convert them into plain text. Immediately upon conversion, the text can be edited, copied, or pinned to your profile for later use. The accent is on integration with AI models, the app itself is pretty simple for now.

    Includes

    • 3D authentication forms
    • Interactive output area where you can modify the text
    • Overview of pinned items
    • Node & Express backend connected to Clarifai
    • PostgreSQL & knex

    Challenges

    - Clarifai models switched to gRPC, and connecting to their API is completely different

    - The AI returns small pockets of text instead of one large document, and the app should display the latter

    - The home page should display an adequate greeting

    - The user should know what's going while waiting, at any given step

    BalanceChat

    ScanSight

    ReactJS - CSS - NodeJS - ExpressJS
    PostgreSQL - Clarifai API

  • Solutions

    - Emailing function is handled by a small PHP script directly uploaded

    - React i18next enables language support without reloading the page

    - One language button is a link that leads to a page with no other data

    - The provider has been placed into a layout component, that wraps page content

    Potential improvements

    - Adding the delayed support for German

    - Adding a separate page about the machine park and services

    - Adding the ability to order Air Guides automatically

    - Adding more product info and detailed specs

    Live Code

    Overview

    A static website developed for a company specialized in construction of various tools, moulds and casts. In 2021 it was migrated to GatsbyJS, but since the vast majority of content and design remained the same, the website still states the original year of development, despite using more modern features.

    Includes

    • Interactive photo galleries
    • Optimized images using gatsby-plugin-image
    • Switching languages without reloading
    • A contact form without any third party service
    • Landing page

    Challenges

    - Should be able to send an e-mail directly without any third party

    - Should be available in several languages without duplicate pages or reloading

    - One language button should lead to a page

    - Should use a provider, even without access to routing and top components

    MJR Alatnica

    MJR Company

    GatsbyJS - GraphQL - CSS - PHP
  • YouFixr

    YouFixr

    NextJS - Typescript - GraphQL
    Hasura - CSS