Bella AI was production work on a driving-school student management system: attendance, photo capture, academic and practical assessments, multi-tenant administration, role-based access and realtime kiosk check-in/check-out.

Some product details and internal flows are under NDA, so this page only describes safe technical and delivery-level points.

NDA-aware case

I worked directly with an English-speaking client: clarified requirements, broke work into tasks, estimated scope and kept the delivery rhythm without a separate project manager.

Direct client work

The next major step was payment integration. I asked the client to prepare legal and payment documents before connecting a provider; after that the work was paused, while the built system remained functional.

Project status

Delivery context

Architected flows across database, API routes and UI using Next.js, TypeScript, next-ts-api, RTK Query and Zod.

Type-safe app architecture

Designed and executed 30+ PostgreSQL/Supabase migrations with Row-Level Security and role-aware access patterns.

Database and permissions

Built RBAC: role-based authorization, permission-aware access, custom middleware and invitation-based registration using Supabase tokens.

Authentication and onboarding

Added Playwright E2E coverage and configured Sentry monitoring across server, client, components and edge errors.

Production confidence

What I owned

The important portfolio point: this was not a decorative prototype. It was a real operational platform with admin controls, tenant boundaries, realtime flows, monitoring and maintainability concerns.

Next.js 15, React 19, TypeScript, Redux Toolkit, MobX, Tailwind CSS and Headless UI.

Frontend

Next.js API Routes, next-ts-api, Zod, Supabase Auth and PostgreSQL.

Backend/API

Playwright, Vitest, Testing Library, Sentry, PostHog, ESLint, Husky and Vercel.

Quality

Stack signals

Production driving-school management platform with multi-tenant admin, RBAC and realtime kiosk flows.

bella-ai-cover.png

I created this extension to maintain scheduled breaks, becouse work-life balance is important.

When I searched how to visually indicate break, I couldnt find any good visual indication on those extensions, so I decided to create my own. Now, meet presentation: 

Focus Blocker is your personal break enforcer inside VS Code. It keeps you productive and healthy by actively reminding you to rest — with a full-screen overlay you can't ignore.

It features a persistent status bar timer, customizable durations, localization (EN, UA), and an extremely simple interface. It automatically starts counting down on VS Code launch — set it and forget it.

Starts a countdown automatically when VS Code launches and enforces breaks with a fullscreen overlay

Automatic break enforcement

Set your own work and break durations using a simple settings interface

Customizable intervals

Displays a webview that overlays your code — can’t be ignored

Unskippable fullscreen blocker

See time left before the next break right in the status bar, updated live

Status bar timer

Fully localized in English, Ukrainian, and Russian

Multilingual support

Use command palette to restart the timer if needed

Restart timer manually

Customize durations in a visually clear and user-friendly settings window

Webview-based settings panel

No bloat, no distractions — does one job and does it well

Lightweight & unobtrusive

Focus Blocker Features

Created as a reminder to take care of yourself while doing deep work. Simple, lightweight, and surprisingly effective — highly recommended for solo developers and productivity nerds.

VS Code extension for enforced productivity cycles with full-screen break alerts.

thumbnail_25353013-designstyle-grunge-u.png

focus-blocker-icon.png

This is a heavily improved fork of the original folder structure generator extension. It lets you quickly scaffold folders and files based on customizable templates, with dynamic variable substitution.

The core idea: templates can now patch existing files instead of overwriting them. I introduced a new syntax to allow inserting content after or before specific substrings inside a file. This enables precise, safe augmentation of existing logic (like Redux reducers or route declarations).

You can also use parts of the current absolute path as template variables. To do that, specify <Path0> - <PathN> up to  depending on the folder depth. For example, if the path is "P:/projects/contributing/vscode-folder-templates", then <Path0> = P, <Path1> = projects, and so on. These can be transformed with casing filters too.

Insert new lines into existing files using substring-based search instead of full replacement

Patch instead of overwrite

Define whether the inserted content should go before or after the matched substring inside the file

Before/After substring syntax

Use parts of the absolute path as dynamic values via , , ... tokens

Absolute path variable support

Create and manage multiple project scaffolding templates for various scenarios

Multi-template system

Actively used by teammates in a professional environment for real-world work setups

Used in production

Fast Folder Structure V2 Features

If you use Redux, feature folders, or any kind of repetitive setup — this extension can save you hours every week.

Advanced file/folder generator with patch support and dynamic path variables

fast-folder-structure-icon.png

I've been seek of yotube music dumping my sacred albums into void, so I decided to create my own music website, where I can upload my music and share it with my friends and family.

The website is built with Next.js and Google Firebase, and it's hosted on Vercel.

It was planned to be a simple website, but I decided to add some features, like preview of images I gathered during compositon of tracks, to complete the experience. Pay attention to A letter next to track to view the gallery

The website is still in development, but you can check it out here:

I collected all tracks during whole time I was making music, so some of them are pretty old, and some of them are new. I hope you will enjoy it! Though, I'm not a professional musician, so don't judge me too hard :D

If you not a fan of my music, you can check the Latest albums section, generally tracks there are better qualtiy, and more recent.

large_Frame 2.png

medium_Frame 2.png

small_Frame 2.png

thumbnail_Frame 2.png

Frame 2.png


It was originally conceived as a simple application for quickly and conveniently organizing a list of tasks.

With time I added some features, and it became a little bit more complicated. 

Choose between light and dark themes for personal preference

Theming options

Allows viewing of completed todos for tracking and reference

View completed tasks

Mark tasks as regular, urgent, or warning to prioritize

Set task importance

Not completed urgent tasks are indicated in the main list with a distinct color for visibility

Highlight urgent tasks

Monitor creation and updated dates of tasks

Track task time

Upload images to tasks with a feature to zoom in on previews

Image upload and zoom

Easily create or view a list for today with a single button at the top of the list

Quick create/view today's list

Support for Progressive Web App, optimized for mobile use. You can add it to your home screen

Mobile-ready PWA

On mobile, easily hide, show, or wrap views with a swipe gesture

Responsive mobile views

Create and manage lists that can be shared with friends, allowing them to see and add tasks. Add friends by email

Shared lists with friends

Dimas Planner features

Made in 48 hours, because this is the first project with some kind of logic.

There are shortcomings, there are inaccuracies, but there is something to be proud of! How do you like it, one-button entry? I think this is super convenient, and this should be on all sites.

I also got to know Graphql and Typescript a little closer here. Acquaintance with the fucking script (code name at the beginning of the operation) later bore fruit, but some problems remained unresolved because I could not understand why it was impossible to write an array of objects to the store. I'll deal with this in the future, but that's all for now, I think.

It took 6-7 hours for styles, and everything else for learning and understanding applications of this kind.

I want to write more such things, so that when I have my own idea, I can implement it in the best way. Thank you for reading. Have a good day! And check if he's still alive!)

NestJS + NextJS + Typescript + Graphql + Yup + Formik

large_25353013-designstyle-grunge-u.png

medium_25353013-designstyle-grunge-u.png

small_25353013-designstyle-grunge-u.png

25353013-designstyle-grunge-u.png

UseNotes demonstrates a full-stack product flow: public landing, protected area, Clerk auth, Convex backend, note CRUD and AI summary states.

usenotes-create-modal.png

Authenticated create-note modal with AI summarization enabled.

usenotes-summary.png

Detail view with generated AI summary state.

Clerk login, protected notes dashboard and user-scoped data.

Authenticated product flow

Convex queries, mutations and seeded demo data for repeatable screenshots.

Realtime backend

Advanced summarization toggle and summary detail state.

AI workflow surface

What this shows

Full-stack notes app with auth, realtime backend and AI summary workflow.

Arcane Origins demonstrates interactive UI: character stats, inventory, story timeline, suggested actions and skill checks.

arcane-origins-skill-check.png

Seeded internal game state with story, inventory and skill check result.

Persisted character and history stores for a continuous game session.

Stateful UI

API routes for character/story generation and action continuation.

AI-ready flow

Suggested actions, inventory interactions and skill checks.

Interactive mechanics

Interactive AI fantasy game prototype with character state, story actions and skill checks.

Arcane Origins internal game state with story and skill check

5-Hours Shop is a compact ecommerce prototype with a complete path from category browsing to product detail and cart state.

shop-category-electronics.png

Category page: product grid, Electronics category context and basic shop navigation.

shop-product-detail.png

Product detail: dedicated product page with price, description and quantity control.

shop-cart.png

Cart state: selected item, quantity and total calculation.

Catalog flow

Dedicated product page with price and quantity control.

Product detail

Client-side cart with totals and item controls.

Cart state

Small ecommerce prototype with category, product and cart flow.

Bella AI — production робота над student management system для driving schools: attendance, photo capture, academic/practical assessments, multi-tenant administration, role-based access і realtime kiosk check-in/check-out.

Деталі продукту та частина внутрішніх flows не розкриваються через NDA, тому тут описані тільки безпечні технічні та delivery points.

Я працював напряму з англомовним замовником: уточнював requirements, сам декомпозував задачі, оцінював scope і тримав delivery rhythm без окремого менеджера.

Наступним великим кроком була payment integration. Я попросив підготувати юридичні та платіжні документи перед підключенням провайдера; після цього робота була поставлена на паузу, а готова система залишалась функціональною.

Проєктував flows через database, API routes і UI на Next.js, TypeScript, next-ts-api, RTK Query та Zod.

Зробив 30+ PostgreSQL/Supabase migrations з Row-Level Security і role-aware access patterns.

Database та permissions

Будував RBAC: role-based authorization, permission-aware access, custom middleware та invitation-based registration через Supabase tokens.

Auth та onboarding

Додав Playwright E2E покриття і налаштував Sentry monitoring для server, client, components та edge errors.

Що я закривав

Важливий portfolio point: це не декоративний прототип. Це реальна operational platform з admin controls, tenant boundaries, realtime flows, monitoring і вимогами до maintainability.

Next.js 15, React 19, TypeScript, Redux Toolkit, MobX, Tailwind CSS і Headless UI.

Next.js API Routes, next-ts-api, Zod, Supabase Auth і PostgreSQL.

Playwright, Vitest, Testing Library, Sentry, PostHog, ESLint, Husky і Vercel.

Production платформа для driving schools з multi-tenant admin, RBAC і realtime kiosk flows.

Я створив це розширення, щоб підтримувати заплановані перерви, бо баланс між роботою та життям важливий.

Коли я шукав спосіб візуально позначити перерву, не зміг знайти жодного хорошого рішення, тому вирішив створити власне. Отже, ось демонстрація:

Ось як виглядає блокування

А ось як виглядає в панелі завдань

Focus Blocker — це ваш особистий наглядач за перервами в середині VS Code. Він підтримує вашу продуктивність і здоров'я, активно нагадуючи про відпочинок — за допомогою повноекранного накладення, яке неможливо проігнорувати.

Розширення має таймер у статус-барі, налаштовувані тривалості, підтримку локалізації (EN, UA) та надзвичайно простий інтерфейс. Воно автоматично запускається при старті VS Code — налаштував і забув.

Автоматично запускає таймер після запуску VS Code і вмикає повноекранну перерву

Автоматичне нагадування про перерви

Задайте власну тривалість роботи та перерв через прості налаштування

Налаштовувані інтервали

Відображає webview, який перекриває код — ігнорування неможливе

Повноекранне блокування, яке не можна пропустити

Бачте скільки часу залишилось до перерви прямо в статус-барі

Таймер у статус-барі

Повна локалізація англійською, українською та російською мовами

Підтримка декількох мов

Можна вручну перезапустити таймер через палетку команд

Ручний перезапуск таймера

Налаштовуйте тривалість через зручне візуальне вікно

Налаштування через webview

Без надмірностей — виконує свою задачу ефективно і без шуму

Легкий та ненав'язливий

Можливості Focus Blocker

Створено як нагадування піклуватись про себе під час глибокої роботи. Простий, легкий і надзвичайно ефективний — ідеально підходить для соло-розробників і фанатів продуктивності.

Розширення VS Code для примусових циклів продуктивності з оповіщеннями про перерви на весь екран.

Це значно покращений форк оригінального розширення для генерації структури папок. Він дозволяє швидко створювати папки та файли на основі настроюваних шаблонів із динамічною підстановкою змінних.

Основна ідея: тепер шаблони можуть доповнювати існуючі файли замість того, щоб перезаписувати їх. Я додав новий синтаксис для вставки контенту до або після певного підрядка у файлі. Це дає змогу безпечно й точно доповнювати наявну логіку (наприклад, редьюсери Redux або оголошення маршрутів).

Також можна використовувати частини абсолютного шляху як змінні шаблону. Для цього вкажи <Path0> - <PathN> залежно від глибини шляху. Наприклад, для шляху "P:/projects/contributing/vscode-folder-templates" значеннями будуть: <Path0> = P, <Path1> = projects тощо. Можна також застосовувати фільтри до регістру.

Вставляє нові рядки в існуючі файли, використовуючи пошук підрядка замість повної заміни

Доповнення замість перезапису

Визначає, чи потрібно вставити вміст до або після знайденого підрядка у файлі

Синтаксис Before/After

Використовуй частини абсолютного шляху як динамічні значення через токени <Path0>, <Path1> тощо

Підтримка змінних з абсолютного шляху

Створюй і керуй кількома шаблонами для різних типів проектів

Система кількох шаблонів

Активно використовується командою в професійному середовищі для реальних завдань

Bella AI

Commercial product work across Next.js, API routes, Supabase/PostgreSQL, type-safe contracts, migrations, tests and monitoring.