DEV Community: Timotej Avsec

LearnQuest – Your Gamified Learning Companion 🎮📚

Timotej Avsec — Tue, 21 Jan 2025 18:08:43 +0000

What I Built

LearnQuest is a dynamic and engaging learning assistant that combines advanced features of Agent.ai to redefine how users interact with educational content. The agent creates an immersive, gamified experience by seamlessly integrating logical workflows, AI capabilities, and personalized tools for effective learning.

It all starts with the user choosing a topic to explore. Here, LearnQuest gets smart: it asks whether the user has their own learning material to upload or would like the agent to search the web for them. If the user uploads files—like PDFs or notes—the agent extracts and processes the content into digestible learning chunks. If the user opts for web resources, LearnQuest uses Agent.ai to perform a Google search and gathers the top 25 results. Using an LLM, the agent organizes this raw data into logically grouped sections and delivers a clean, friendly summary. 🧠✨

But it doesn’t stop there! To add a fun twist, LearnQuest brings in some humor by invoking a separate Meme Maker agent, generating a custom meme related to the learning topic. Because who says studying can’t be entertaining? 😄

Quizzes are where the learning gets truly interactive. The agent invites the user to specify how many questions they’d like. Using the LLM again, it creates a tailored quiz based on the topic or uploaded material. Once the user submits their answers, the agent evaluates them with AI, providing a detailed breakdown of correct and incorrect responses, study recommendations for improvement, and even a final grade. The feedback loop is quick, constructive, and motivating.

Finally, LearnQuest ensures the learning journey isn’t lost. The user can export the summary, quiz results, and recommendations to Google Docs or send them directly to their email, keeping their progress accessible for future reference.

LearnQuest’s power comes from its seamless use of Agent.ai’s robust features: it integrates search results, leverages LLMs for summarization, grading, and categorization, processes logical workflows like file uploads and user inputs, and effortlessly combines data extraction with content delivery. The icing on the cake is its ability to invoke and incorporate another agent (the Meme Maker), making it a creative and playful companion for learners of all ages. 🎓🔥

Demo

https://agent.ai/agent/learn-quest

Selecting the topic and source of information

Agent fetches the information from the source and groups it into logical sections

Invoking another (Meme Generator) agent to generate a thematic meme to make the learning more fun

Input how many questions do you want to be generated in a quiz

Quiz answers and LLM's grading

Agent.ai Experience

Agent.ai provided a very powerful framework for building AI agents, which can utilize not only LLM calls, but also come with a lot of useful building blocks, in my case the most useful are uploading and parsing files and searching for Google results. If I would to develop this agent from scratch, using some other programming language, the setup itself would take me more time as it did to make a whole agent using agent.ai

🎬 MovieCrafter: AI Movie Script & Storyboard Generator ✨

Timotej Avsec — Wed, 09 Oct 2024 11:43:35 +0000

What I Built

I created the AI Movie Script & Storyboard Generator, an AI-powered tool that helps users craft movie scripts and visual storyboards with ease. Users simply input a movie title, description, and genre, and the application generates a complete script using OpenAI’s GPT-4. Next, the app generates corresponding storyboard images using DALL-E 3, visually mapping out key scenes in the movie. These images are stored securely using Pinata Cloud’s Files API, making it easy for users to access their creations via signed URLs. This project demonstrates how AI and decentralized storage can come together to streamline the creative process for filmmakers and storytellers. 🎥✨

Technologies

Laravel (TALL stack): Tailwind CSS, Alpine.js, Laravel, Livewire creating a responsive and interactive frontend and a powerful backend.
OpenAI GPT-4: For generating movie scripts from user-provided input.
DALL-E 3: For creating visually engaging storyboard images.
Pinata: For securely storing and managing the storyboard images via their Files API.

Demo

Since this application relies on OpenAI tokens, a live demo has not been deployed. However, you can explore the application by pulling the code from the repository or watching the demo video below:

Screenshots:

Landing page

List of projects

Create new movie script

Generated script and story boards

My Code

The complete code for the project can be found in the GitHub repository:

tavsec / movie-crafter

🎬 AI Movie Script & Storyboard Generator – An AI-powered tool that creates movie scripts with GPT-4 and visual storyboards using DALL-E 3, securely stored with Pinata Cloud. 🚀✨

🎬 MovieCrafter | AI Movie Script & Storyboard Generator

Welcome to the AI Movie Script & Storyboard Generator – an innovative application built to streamline the process of creating movie scripts and visual storyboards using AI technology. This project was created as part of the DEV.to x Pinata Hackathon to showcase the powerful integration of Pinata for secure and efficient digital asset storage. 🚀

📖 Project Overview

Ever had a great idea for a movie but didn't know where to start? With this tool, you can input a movie title, short description, and genre, and let our AI models handle the rest! Using OpenAI GPT-4 and DALL-E 3, the app generates a fully-fledged movie script and accompanying storyboard images that bring your ideas to life. The storyboards are stored on Pinata Cloud using their Files API, ensuring they're accessible and securely stored.

🛠️ Technologies Used

This project is built using…

View on GitHub

More Details

For this project, Pinata plays a crucial role in securely storing and serving the AI-generated storyboard images. After the images are generated using DALL-E 3, they are uploaded to Pinata Cloud via their Files API. Each image is stored as an asset on Pinata, and I use signed URLs to make the images accessible to users without exposing them publicly. This ensures that the images remain secure and can be accessed by users anytime, without compromising privacy or security. Pinata’s efficient file storage API made this integration smooth and hassle-free, enabling me to focus on building the core features of the app.

Nylas Assistant

Timotej Avsec — Mon, 26 Aug 2024 19:12:53 +0000

What I Built and Why

I built Nylas Assistant, an AI-powered email assistant that integrates the Nylas API with OpenAI and the Qdrant vector database. This project implements Retrieval-Augmented Generation (RAG) mechanisms, allowing users to interact with an AI agent that can search and retrieve information from their inbox.

How It Works

The core of Nylas Assistant involves seamless integration of email data, AI-driven insights, and real-time user interaction:

Email Syncing: Upon user login, a Laravel background worker kicks off, syncing emails from the user’s inbox via the Nylas API. This is handled by the SyncEmailsToQdrant job, which processes each email to extract relevant content.
Embeddings Generation: The email content is then transformed into embeddings using the OpenAI API. These embeddings are vector representations of the email content, capturing semantic meaning.
Vector Storage with Qdrant: The generated embeddings are stored in a Qdrant vector database. Qdrant is a high-performance, vector search engine that allows for efficient similarity searches. In this context, it’s used to store and index the embeddings, enabling quick retrieval based on context during chat interactions.
AI-Powered Chat: When a user interacts with the chat UI, the OpenAI model retrieves the most relevant email embeddings from Qdrant, ensuring that the AI’s responses are contextually aware and tailored to the user’s specific email history.

I have also written a comprehensive README file on the Github repository, which also includes steps to build and configure this application, so you can try it yourself.

Demo

Code

tavsec / nylas-assistant

OpenAI and Qdrant powered AI assistant, which connects to your email inbox using Nylas API and can be used as an assistant

Nylas Assistant 🚀

Nylas Assistant is an AI-powered email assistant built with Laravel, Nylas, OpenAI, and Qdrant. Sync your inbox, parse emails, and store them as OpenAI embeddings in a Qdrant vector database. Interact with an OpenAI agent through a chat-like interface that provides context-aware responses based on your emails. ✉️💡

🎯 Features

Email Syncing: Automatically syncs your inbox using the Nylas API.
Email Parsing: Parses and stores emails as embeddings with OpenAI.
AI Chat Interface: Chat with an OpenAI agent that understands your email context.
Vector Storage: Efficient embedding storage and retrieval using Qdrant.

🛠️ Tech Stack

Laravel: Backend framework.
Nylas API: For email syncing and management.
OpenAI: For generating embeddings and chat responses.
Qdrant: Vector database for storing and querying embeddings.

🚀 Installation

Clone the repository.
Install dependencies.

composer install

Set up environment variables. Add the following…

View on GitHub

Your Journey

For this hackathon, I aimed to create an application that demonstrates the combined power of the Nylas API and the OpenAI language model. My goal was to build a chatbot assistant that provides deeper insights into a user's inbox.

I chose to develop the application using Laravel, even though PHP is not the typical choice for AI projects. I wanted to push the boundaries and see if I could build a robust AI application with it. I’m pleased with how it turned out!

The most challenging part was converting emails to vector embeddings, especially considering the large number of emails a user might have. I addressed this by dispatching asynchronous background jobs that can be batched into smaller tasks. This approach allows users to start chatting with the assistant even if email syncing is still in progress.

In the end, I created a simple chat UI that displays the chat history between the user and the assistant.

Neon Scaffolder

Timotej Avsec — Fri, 23 Aug 2024 11:59:54 +0000

My Kit

For this challenge, I created the Neon Scaffolder, a Node.js CLI tool that goes beyond a single starter kit. Instead of focusing on one specific starting template, I wanted to build a dynamic system that can accommodate multiple starter kits, giving developers the flexibility to choose the setup that best fits their needs. With Neon Scaffolder, you can easily create and set up new projects that are instantly connected to a Neon database, using a variety of predefined templates like Laravel, Astro, and more.

This tool is designed to save developers time by handling the boilerplate setup and configuration, allowing you to focus on what really matters—building your application. The templates are stored in a centralized GitHub organization, making it easy to manage, update, and add new templates as the ecosystem evolves.

Try it out!

If you want to try it out, all you need is NodeJS installed (version >= 18.0), and run the following commands:

$ npm install -g neon-scaffolder
$ neon-scaffolder

This will install the scaffolder, and run the set up project.

Demo

To demonstrate the dynamic capabilities of this application, I created two scaffolding templates, one for Laravel and one for Astro.

Laravel

Astro

How It Works

Here’s a quick overview of how Neon Scaffolder works:

1. Creating a Neon Project

When you run the CLI tool, it first interacts with the Neon API to create a new Neon project. This step sets up the necessary infrastructure in the Neon database, so you don’t have to worry about manual setup.

2. Downloading the Template

After creating the Neon project, the CLI will prompt you to select a template from the available options. Templates are stored in a centralized GitHub organization, which makes it easy to manage and update them.
Once you choose a template, the CLI downloads the corresponding scaffold from the GitHub repository to your local machine.

3. Templating the Project

With the scaffold downloaded, Neon Scaffolder uses Mustache templating to configure the project. This step replaces placeholders in the template with the necessary configuration details, such as database connection strings and other project-specific settings.
The result is a fully-configured project, ready to start development right away.

Link to Kit

You can find the Neon Scaffolder on GitHub: Neon Scaffolder Repository

tavsec / neon-scaffolder

CLI for scaffolding Neon projects for different frameworks

🚀 Neon Scaffolder

Neon Scaffolder is a Node.js CLI tool designed to streamline the process of creating and setting up a new project connected to a Neon database. With Neon Scaffolder, you can select from a variety of predefined templates (e.g., Laravel, Astro) and generate a fully-configured project ready for development out of the box.

✨ Features

🎯 Create Neon Projects: Automatically create a new Neon project using the Neon API.
📦 Predefined Templates: Choose from multiple project templates such as Laravel, Astro, and more.
🔧 Dynamic Configuration: The CLI uses Mustache templating to inject necessary configuration into the scaffolded project.
🌐 GitHub Integration: Templates are stored in the Neon Scaffolder GitHub organization, making it easy to add new templates.
⚡️ Out-of-the-box Setup: Generated projects come pre-configured and connected to the Neon database, allowing you to start coding right away.

📥 Installation

To…

View on GitHub

The repository includes a comprehensive README with detailed instructions on how to get started, including installation, usage, and how to contribute by adding new templates.

Your Journey

When I started this project, I didn’t want to limit myself to creating just one starter kit. Instead, I envisioned a system that could grow and adapt, offering multiple starter kits to suit a wide range of projects and developer preferences. The idea was to build something dynamic—where adding a new template is as simple as updating the centralized repository, without the need for heavy lifting on the user’s part.

I learned a lot about creating flexible, user-friendly CLI applications (using NodeJS Commander library), as well as the power of templating engines like Mustache for dynamic configuration.

Creating Neon Scaffolder has been a rewarding journey. I'm excited to see how others in the community will use this tool, and I’m hopeful that it will evolve with new templates and features, making it even more valuable to developers who want to hit the ground running with their projects with Neon.

How I developed GitHub Actions file Generator application

Timotej Avsec — Sat, 20 May 2023 17:05:48 +0000

What I built

I built a simple website, which will help developers generate GitHub actions file by filling up the single form.

Category Submission:

I think that my app belongs in two categories:

Maintainer Must-Have: this application helps maintainers to generate GitHub actions CICD file for their application, making their life easier
DIY Deployments: As this application also provides instructions and different deployment options (AWS S3, GitHub pages, Heroku, Netlify), this application can help developers set up their deployment environment.

App Link

https://tavsec.github.io/github-actions-generator/

Screenshots

Description

My main goal was to develop a simple application, where developer can:

choose Javascript framework (Angular, React, Vue),
choose build processor (NPM or Yarn),
optionally choose test suite and
select their desired deployment method (AWS S3, GitHub pages, Heroku or Netlify)

Based on that information, the system will generate the GitHub actions file, which the developers can include in their repository. The system will also generate a list of instructions, which helps developer to set up their actions, along with instructions from external platforms, if needed.

I was aiming to make the process as simple as possible for developer, but also customizable to some extend. For example, developer can override default build command under "additional settings" field, or change the test command. The developer can also change the default branch, on which the actions are triggered.

Link to Source Code

tavsec / github-actions-generator

Web application which can generate GitHub Actions file for selected options.

github-actions-generator

This application was developed as a part of GitHub + Dev hackathon. The main purpose of this app is to help developers create GitHub Actions files from a simple form, and also provide them with the instructions on how to set up their CICD process.

My entry: https://dev.to/timotej_avsec/github-actions-file-generator-2nf

Setup

To run this application you need to have NPM and NodeJs installed. Once you have it, simply run npm install and npm run dev. This will set up your local server.

View on GitHub

Permissive License

MIT

Background (What made you decide to build this particular app?

When I first started working with GitHub actions, I was overwhelmed with all of the possibilities that GitHub actions provide. I also discovered, that the simple process of building, testing and deploying the front end application is not a hard thing to do using GitHub actions, and can be easily configured. That's why I decided to develop this simple app, which helps frontend developers achieve this goal.

How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?)

I developed this application using NuxtJS framework. Most of the work was done on GitHub Codespaces, which worked out of the box for my project (NodeJS was set up, I only had to run two Node commands, and the development environment was set up!).

The site is hosted on GitHub pages, and a simple Actions Job is set up, which deploys new version of the app every time new change is pushed to the main branch.

If you want to try the app, feel free to fork my repository above! I will probably be adding some new framework - my next goal would be to enable Docker option for building, and some other, container-oriented platform for deployments.

Additional Resources/Info

Video content search using MongoDB Atlas Search and Google Machine Learning

Timotej Avsec — Fri, 25 Nov 2022 12:15:46 +0000

What I built

I’ve built an application in Golang, which is able to find video content from all of the videos that have been uploaded to the application. It utilises the Google Cloud Video Intelligence API to detect the features (content) inside the video.

Category Submission:

I decided to submit my application into multiple categories. Below is a list of all of the categories that I would like to submit my application in, as well as description as why I think the app can be submited into listed category.

Search No More: Main feature of the application is to perform a quick search on ALL of the uploaded videos. That’s why I used Atlas Search, as it provides quick setup and is querying super fast.
Think Outside the JS Box: As an backend developer, it was my goal for quite some time now to learn Golang, but I was procrastinating with learning Go, that’s why decided that the best way to learn new programming language is to build something with it. That’s why I picked Golang as my API language.
Google Cloud Superstar: The “brains” behind the Video Feature detection Google Cloud Video Intelligence API, which provides Golang SDK and enables the developer to utilise powerful Google Cloud ML engine to detect the video features.

App Link

Because I use Google Cloud Video Intelligence API, which is not free, I did not want to post my application publicly and create some “unwanted” costs on my Google Cloud bill 😃. However, I recorded a short demo video, as well as screenshoted the application. After all, if you would like to try my app, you can always clone Git repo, add your Google Cloud credentials, and run the API.

Video

Screenshots

Background

My main motivation to build this application was to learn a few things:

learn how to implement MongoDB into application using SDKs and libraries, and also connect Atlas Search
learn how Google Cloud Video Intelligence works
learn new programming language (Golang)

How I built it

I started my project with developing API server in Golang. For the HTTP library I used Gin framework, as it provides an friendly interface to build REST ready API.

For my application, two endpoints were enough. One was used for video upload, and one for video search. This is how endpoints are defined in Gin:

func main() {
    r := gin.Default()
    r.POST("/videos", Controllers.VideoStore)
    r.GET("/videos", Controllers.VideoSearch)

    err := r.Run()
    if err != nil {
        log.Fatalf(err.Error())
        return
    }

    fmt.Println("Server running on :8080")
}

Video upload and feature detection

Video store method consists of the folowing steps:

File upload and transfer to Google Storage Buckets

User can upload the video to our API. Our API then uploads it to the Google Storage Bucket. This is the code that accomplishes that:

// ...
// Client init, ...
// ...

f, uploadedFile, _ := c.Request.FormFile("video")

    if filepath.Ext(uploadedFile.Filename) != ".mp4" {
        c.JSON(http.StatusUnprocessableEntity, gin.H{
            "error": "Uploaded file must be mp4 video",
        })
        return
    }

  // Upload file to Storage Bucket
    sw := Services.StorageBucket.Object(fileUuid.String()).NewWriter(ctx)

    _, err = io.Copy(sw, f)
    err = sw.Close()
    if err != nil {
        return
    }

Uploaded file is added as an record to the MongoDB database, so we can reference it later. We save video file name, size and unique UUID, which we can reference when retrieving the private object.

// ...

coll := Services.MongoClient.Database(os.Getenv("MONGO_DB_DATABASE")).Collection("videos")
    doc := bson.D{{"filename", uploadedFile.Filename}, {"size", uploadedFile.Size}, {"uuid", fileUuid.String()}}
    mongoRecord, err := coll.InsertOne(context.TODO(), doc)

    if err != nil {
        panic(err)
    }

3.File can be sent to Google Video Intelligence API, and retrieve the video features.

// ...
op, err := client.AnnotateVideo(ctx, &videopb.AnnotateVideoRequest{
        InputUri: "gs://" + os.Getenv("GOOGLE_CLOUD_STORAGE_BUCKET") + "/" + fileUuid.String(),
        Features: []videopb.Feature{
            videopb.Feature_LABEL_DETECTION,
        },
    })
    if err != nil {
        log.Fatalf("Failed to start annotation job: %v", err)
    }

    resp, err := op.Wait(ctx)
    if err != nil {
        log.Fatalf("Failed to annotate: %v", err)
    }
    result := resp.GetAnnotationResults()[0]

Retrieved features are saved to the corresponding video entity in MongoDB database, where Atlas search can index them.

// ...
filter := bson.D{{"_id", mongoRecord.InsertedID}}
    update := bson.D{{"$set", bson.D{{"features", featuresList}}}}
    _, err = coll.UpdateOne(context.TODO(), filter, update)
    if err != nil {
        return
    }

After that, the video upload process is complete. If you would like to see the whole method, and not only the code snippets, you can access it on the GitHub: https://github.com/tavsec/devto-mongodb-hackathon-api/blob/main/Controllers/VideoController.go

Video search

If user wants to search all of the keywords, there is a VideoSearch method for that. The steps to utilise the Atlas Search engine is the following:

type SearchBody struct {
    Keyword string `form:"keyword"`
    Page    int64  `form:"page"`
    PerPage int64  `form:"perPage"`
}

type PaginatedResult struct {
    Videos     []Video
    Pagination pag.PaginationData
}

func VideoSearch(c *gin.Context) {
    var searchBody SearchBody
    err := c.BindQuery(&searchBody)
    if err != nil {
        println(err.Error())
        err = c.AbortWithError(http.StatusBadRequest, err)
        return
    }

    collection := Services.MongoClient.Database(os.Getenv("MONGO_DB_DATABASE")).Collection("videos")

    searchStage := bson.M{"$search": bson.D{{"index", os.Getenv("MONGO_DB_SEARCH_INDEX")}, {"text", bson.D{{"path", bson.D{{"wildcard", "*"}}}, {"query", searchBody.Keyword}}}}}

    aggPaginatedData, err := pag.New(collection).Context(context.TODO()).Limit(searchBody.PerPage).Page(searchBody.Page).Aggregate(searchStage)
    if err != nil {
        panic(err)
    }

    storageClient, _ := storage.NewClient(context.Background())

    opts := &storage.SignedURLOptions{
        Scheme:  storage.SigningSchemeV4,
        Method:  "GET",
        Expires: time.Now().Add(15 * time.Minute),
    }

    var results []Video
    for _, raw := range aggPaginatedData.Data {
        var v *Video
        if marshallErr := bson.Unmarshal(raw, &v); marshallErr == nil {
            v.SignedURL, _ = storageClient.Bucket(os.Getenv("GOOGLE_CLOUD_STORAGE_BUCKET")).SignedURL(v.UUID, opts)
            results = append(results, *v)
        }

    }

    c.JSON(http.StatusOK, PaginatedResult{Videos: results, Pagination: aggPaginatedData.Pagination})

}

As you can see, Atlas Search provides simple interface to search. All we need is the following line:

    searchStage := bson.M{"$search": bson.D{{"index", os.Getenv("MONGO_DB_SEARCH_INDEX")}, {"text", bson.D{{"path", bson.D{{"wildcard", "*"}}}, {"query", searchBody.Keyword}}}}}

I left the Atlas Search parameters as default, as I discovered that they work great for my usecase. They search across all of the saved video features:

Link to Source Code

API

tavsec / devto-mongodb-hackathon-api

API server for Dev.to MongoDB hackathon, using Google Cloud services and Atlas search

devto-mongodb-hackathon-api

API for my DevTo MongoDB hackathon project. https://dev.to/timotej_avsec/video-content-search-using-mongodb-atlas-search-and-google-machine-learning-1f32

Build

Firstly, add you application_default_credentials.json to the source of the project. This will enable Google Cloud API.

Then, edit .env file

mv .env.example .env

Edit contents of the .env file.

Finally, you can run the application as you would any other Golang application:

go build -o devto-mongodb-hackathon github.com/tavsec/devto-mongodb-hackathon-api

You can also use Docker:

docker-compose up -d

View on GitHub

Frontend

tavsec / devto-mongodb-hackathon-app

Frontend application for DevTo Mongodb hackathon

devto-mongodb-hackathon-app

Frontend application for my DevTo MongoDB hackathon project. https://dev.to/timotej_avsec/video-content-search-using-mongodb-atlas-search-and-google-machine-learning-1f32

Build Setup

# create and update .env file
$ cp .env.example .env

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

View on GitHub

Permissive License

Both repositories are licensed as MIT.

Final thoughts

I really enjoyed building this application, as I discovered and learned a lot about MongoDB, as well as Google Cloud APIs. I was also fascinated about ease of use of Atlas Search, as it basically worked out-of-the-box (well, for my use-case, anyways). I will deffinietly use MongoDB for some of my personal projects in the future.

How I created website mockup generator app?

Timotej Avsec — Sun, 17 Apr 2022 12:26:35 +0000

In this article, I will present to you the idea, execution and problems that I encountered during the development of my new app, called Marketron.

The Idea

Did you ever want to create a simple mockup of your website, to see how it would look like on other devices? And I don't mean opening up Chrome Inspector and enabling responsive views, but having the actual image of a device (be it iPhone, desktop computer, or any other device) with your website on it? It is possible of course, but it is time consuming, even for only one device. First, you have to create a screenshot of your website with the right resolution, so it will match the display size on your device. Then, you would have to find an image with your wanted device on it. After finding it, you would have to open an image editing software (Photoshop, for example), and spend some time resizing the screenshot and combining both images together, to make the mockup look good.

But my idea was to simplify the whole process. I would like to just enter the URL of my website and select the image of device that I would like my website image to be on, and then let the application do the work. And that's how I came up with the idea for Marketron.

Execution

Mockup generator

First part of the web application that I had to do was to create a simple CLI tool, which would:

Create a screenshot of a website
Transform that image, using perspective transform, to fit the selected template
Merge transformed screenshot with template image

I decided to go with Python to create the CLI app, since it offers some amazing libraries for image manipulation (Pillow and OpenCV), as well as library for getting the screenshots of a website (Selenium).

The Python app was built on top of a Click library, which made the development of a CLI app much easier. I predefined some template images with perspective transform parameters and created the app, which accepts website URL and a preset as an input arguments. The Python app will then get the screenshot of a website, perform a perspective transform on it, and save the generated image.

Web API

The API was the easiest part of the project. For the API project, I went with Laravel, as I'm quite familiar with it, and it offers everything I needed out of the box. I created the authentication controllers and Image service, which was just an proxy from the user to the Python app. I saved the generated images as a private objects on AWS S3 Buckets. When authorized user wanted to access the image, presigned URL was generated for the user only. This enabled images to be private for authorized users only, and were not accessible for unathorized users.

Frontend application

When API and Python app were created, I quickly create a simple design for the website. Website only has 3 main screens:

Landing page
Generator page: page where the user can choose the desired configuration for mockup
My mocks: page for signed in users, with the history of their mocks

The whole frontend application was created with NuxtJS and Bootstrap framework.

Next steps

As application is still in early stages, there are some things that would need improvements. Mainly:

Speed: I would like to improve the performance of Python application, to improve the speed of mockup generation
More templates: enable user more choice when creating a mockup
Configurable: give users more options when creating a mockup

Thank you!

Thank you for your time reading this article. I would like to hear your ideas and critiques of Marketron application, as it is nowhere near finished yet 😊. The application is available on https://www.marketron.app .

How I created URL shortener using Serverless and MongoDB

Timotej Avsec — Fri, 07 Jan 2022 15:16:21 +0000

Overview of My Submission

For my hackathon project I decided to create a URL shortener, using two serverless technologies: Serverless Framework and MongoDB Atlas.

Submission Category:

Choose Your Own Adventure

Link to Code

My application is separated into two different repositories:

Backend for handling entry creation and redirects
Frontend for displaying form and utilising API

Backend

Backend is created with Serverless Framework and is using NodeJS as a runtime. It is hosted on AWS Lambda.

timotej-avsec / mubo-backend

Serverless backend for Mubo URL shortener

Serverless Framework Node REST API on AWS

This template demonstrates how to make a simple REST API with Node.js running on AWS Lambda and API Gateway using the traditional Serverless Framework.

This template does not include any kind of persistence (database). For a more advanced examples check out the examples repo which includes Typescript, Mongo, DynamoDB and other examples.

Usage

Deployment

This example is made to work with the Serverless Framework dashboard which includes advanced features like CI/CD, monitoring, metrics, etc.

$ serverless login
$ serverless deploy

To deploy without the dashboard you will need to remove org and app fields from the serverless.yml, and you won’t have to run sls login before deploying.

After running deploy, you should see output similar to:

Serverless: Packaging service
Serverless: Excluding development dependencies...
Serverless: Creating Stack...
Serverless: Checking Stack create progress...
........
Serverless: Stack create finished...
Serverless: Uploading CloudFormation file to S3...

…

View on GitHub

Frontend

Frontend is created with NuxtJS framework and is hosted on GitHub pages.

timotej-avsec / mubo-frontend

URL shortener with statistic tracking

mubo-frontend

Build Setup

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

For detailed explanation on how things work, check out the documentation.

Special Directories

You can create the following extra directories, some of which have special behaviors. Only pages is required; you can delete them if you don't want to use their functionality.

`assets`

The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.

More information about the usage of this directory in the documentation.

`components`

The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.

More information about the…

View on GitHub

Additional Resources / Info

Project is available on https://www.mubo.one.

My First Front-End-Only Project

Timotej Avsec — Fri, 14 Aug 2020 18:34:10 +0000

Hey guys!

Recently I decided to make a front-end-only application, since I felt that as a full-stack developer, I was lacking in my front-end skills.
So here is a little post on how I created moviez.io

Idea

I wanted to create something that would be challenging, but also useful. So after some time of thinking and brainstorming, I decided to go with movie-fetching app, which displays info about movies, TV series or actors.

Frameworks

For JavaScript framework I decided to go with VueJS, since it is the primary FE framework that we use in our company and would benefit me the most to improve on it.

I also went for Buefy Vue package, which is built on top of Bulma CSS framework.

Data source

Since the idea was to create only front-end, the app had to fetch data from external API. I decided to go with TMDB since it provides clean API interface.

CI/CD

For the convenience reasons I also implemented simple CI/CD using GitLab's CD/CD system.
It works in the following way: when I push changes to my development branch, project gets built and is deployed on staging AWS S3 bucket. When the development branch is merged into master branch, project is built and deployed to primary/production AWS S3 bucket. On production server there is also AWS CloudFront, that enables caching and overall better loading times.

TODO

There is still a lot of improvements to be done. Here are some of them:

Create and share list of your favourite movies / TV shows
Enable users to write review to movies and rate them (even tho it will require some back-end action 😊)
Improve overall page performance

Conclusion

In the end, I feel like I have learned a lot through this simple project. Even through this project is relatively simple, I tried to follow Vue good practises and front-end good practices overall.

So this is it from my part, if you have any opinions, well-intentioned criticism or just potential improvements, please do share them in the comments 🤗.