Forem: Jervi

I thought you couldn't run Vite HMR Laravel on a remote VPS. I was wrong.

Jervi — Thu, 19 Mar 2026 13:11:17 +0000

So here's the thing. I've been building a Laravel + Inertia + React project and deploying it on a VPS. My workflow was:

npm run build
php artisan serve --host 0.0.0.0

from my blog: source

The problem

When you run npm run dev, Vite starts a dev server and a WebSocket for HMR. By default it binds to localhost — meaning only processes on the same machine can reach it. The browser, sitting on your laptop, can't connect.

But Vite has a server.host option that makes it bind to all interfaces, including the public one. And a server.hmr.host option that tells the browser where to connect for the WebSocket. That's the key piece most tutorials miss.

Step 1 — update vite.config.ts

Add a server block to your existing config. Everything else stays the same:

import { wayfinder } from '@laravel/vite-plugin-wayfinder';
import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
import laravel from 'laravel-vite-plugin';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.tsx'],
            ssr: 'resources/js/ssr.tsx',
            refresh: true,
        }),
        react({
            babel: { plugins: ['babel-plugin-react-compiler'] },
        }),
        tailwindcss(),
        wayfinder({ formVariants: true }),
    ],
    esbuild: { jsx: 'automatic' },

    // 👇 add this block
    server: {
        host: '0.0.0.0',
        port: 5173,
        hmr: {
            host: 'YOUR_VPS_IP', // e.g. '123.123.123.123'
            port: 5173,
        },
    },
});

Why hmr.host matters: Without it, the browser tries to open the WebSocket on localhost — which is your laptop, not the VPS. It silently fails and you get no live updates.

Step 2 — update .env

The Laravel Vite plugin reads APP_URL to know where the backend is. Set it to your real VPS IP and port:

APP_URL=http://YOUR_VPS_IP:6040    # public ip of the vps

You'll know it's working when npm run dev shows:

➜  APP_URL: http://YOUR_VPS_IP:6040    # public ip of the vps

Step 3 — open the ports on your firewall

This is where I got stuck the longest. UFW alone isn't enough if you're on a cloud provider.

OS firewall (UFW):

sudo ufw allow 5173
sudo ufw allow 6040
sudo ufw reload

Cloud firewall (Hetzner / DigitalOcean / AWS):

Most VPS providers have a separate cloud-level firewall that sits in front of your server. UFW never even sees the traffic. You need to open the port there too.

For Hetzner: go to console.hetzner.cloud → Firewalls → your firewall → Add inbound rule → TCP port 5173.

💡 Security tip: Instead of allowing 0.0.0.0/0, restrict port 5173 to your own IP only. The dev server has no auth — you don't want it public.

Step 4 — run both servers

Open two terminal sessions on your VPS (or use tmux):

# terminal 1 — Laravel
php artisan serve --host 0.0.0.0 --port 6040

# terminal 2 — Vite
npm run dev

Summary

What	Command	Port
Laravel backend	`php artisan serve --host 0.0.0.0`	6040
Vite HMR dev server	`npm run dev`	5173

Edit the vite.config.json

Now open http://YOUR_VPS_IP:6040 in your browser, edit a React component, and watch it update instantly. No rebuild. No refresh. Full HMR on a remote VPS.

How to Add Swap Space on Ubuntu (5GB Example)

Jervi — Mon, 16 Mar 2026 10:38:03 +0000

Article from blog

Description

A step-by-step guide to creating a swap file on Ubuntu, making it persistent across reboots, and tuning swappiness for better performance.

Disclamer

This article was made with Ai, but I have tested all these commands since I needed swap too

Why Swap Matters

Swap is disk space that your OS uses as overflow when physical RAM fills up. Without it, the kernel may start killing processes (the dreaded OOM killer) when memory is exhausted. With it, your system degrades gracefully instead of crashing.

My setup: 7.57 GB RAM, 0 KB swap. Adding 5 GB swap gives the system room to breathe under heavy loads.

Step 1: Create the Swap File

sudo fallocate -l 5G /swapfile

fallocate instantly allocates the space on disk without writing zeroes - fast and efficient. If for some reason fallocate isn't available, use dd as a fallback:

sudo dd if=/dev/zero of=/swapfile bs=1M count=5120

Step 2: Lock Down Permissions

sudo chmod 600 /swapfile

This ensures only root can read/write the swap file - important for security. A world-readable swap file is a potential data leak.

Step 3: Format as Swap

sudo mkswap /swapfile

You should see output like:

Setting up swapspace version 1, size = 5 GiB (5368705024 bytes)
no label, UUID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

Step 4: Enable the Swap

sudo swapon /swapfile

Step 5: Make It Permanent

Without this step, your swap disappears after a reboot.

echo '/swapfile none swap sw 0 0' | sudo tee -a /etc/fstab

This appends the swap entry to /etc/fstab, which is read at boot time.

Step 6: Verify

free -h

You should see something like:

               total        used        free      shared  buff/cache   available
Mem:           7.5Gi       3.2Gi       1.1Gi       512Mi       3.2Gi       3.6Gi
Swap:          5.0Gi          0B       5.0Gi

Swap is now active. ✅

Bonus: Tune Swappiness

By default, Ubuntu sets vm.swappiness=60, which tells the kernel to start using swap when RAM usage hits ~40%. For a desktop or workstation with plenty of RAM, that's too aggressive — you want to stay in RAM as long as possible.

Check your current value:

cat /proc/sys/vm/swappiness

Set it to 10 (apply immediately):

sudo sysctl vm.swappiness=10

Make it permanent across reboots:

echo 'vm.swappiness=10' | sudo tee -a /etc/sysctl.conf

Swappiness reference

Value	Behavior
`0`	Avoid swap entirely (only use in emergencies)
`10`	Prefer RAM strongly — great for desktops/workstations
`60`	Ubuntu default — balanced
`100`	Swap aggressively

For most desktop users with 4GB+ RAM, 10 is the sweet spot.

Quick Summary

# 1. Create
sudo fallocate -l 5G /swapfile

# 2. Secure
sudo chmod 600 /swapfile

# 3. Format
sudo mkswap /swapfile

# 4. Enable
sudo swapon /swapfile

# 5. Persist
echo '/swapfile none swap sw 0 0' | sudo tee -a /etc/fstab

# 6. Verify
free -h

# Bonus: tune swappiness
sudo sysctl vm.swappiness=10
echo 'vm.swappiness=10' | sudo tee -a /etc/sysctl.conf

How to Access Your Ubuntu VPS from a Browser Using Chrome Remote Desktop (LXDE)

Jervi — Thu, 12 Mar 2026 23:22:01 +0000

In this guide, we'll set up Chrome Remote Desktop with LXDE so you can access your VPS from anywhere using https://remotedesktop.google.com.

The Article from Blog

Why LXDE?

LXDE is ideal for VPS servers because it is:

Lightweight
Fast
Low RAM usage
Stable on headless servers

Perfect for cloud machines with 1-2GB RAM.

Step 1 - Install LXDE (if not already installed)

sudo apt update
sudo apt install lxde-core lxterminal lxsession dbus-x11 -y

This installs a lightweight graphical desktop environment.

Step 2 - Install Chrome Remote Desktop

Download the official package:

wget https://dl.google.com/linux/direct/chrome-remote-desktop_current_amd64.deb

Install it:

sudo apt install ./chrome-remote-desktop_current_amd64.deb -y

Step 3 - Configure Chrome Remote Desktop to Use LXDE

Chrome Remote Desktop needs to know which desktop session to start.

Create the session file:

echo "exec startlxde" > ~/.chrome-remote-desktop-session

Step 4 - Add Your User to the Chrome Remote Desktop Group

sudo usermod -aG chrome-remote-desktop $USER

Step 5 - Link Your VPS to Your Google Account

Open the Chrome Remote Desktop setup page:

https://remotedesktop.google.com/headless

After signing in, you will receive a command similar to this:

DISPLAY= /opt/google/chrome-remote-desktop/start-host \
--code="XXXX" \
--redirect-url="https://remotedesktop.google.com/_/oauthredirect" \
--name=$(hostname)

Run that command on your VPS.

Then set a PIN when prompted.

Step 6 - Restart the Chrome Remote Desktop Service

sudo systemctl restart chrome-remote-desktop@$USER

Step 7 - Connect from Your Browser

Open:

https://remotedesktop.google.com/access

You should now see your VPS machine listed.

Click it, enter your PIN, and you will get full desktop access in your browser.

Tips for Better Performance

• Use LXDE or XFCE instead of GNOME
• VPS should have at least 2GB RAM
• Disable heavy visual effects

When Should You Use This?

Chrome Remote Desktop is useful when you want to:

Manage a remote desktop from anywhere
Use GUI applications on your VPS
Access development tools visually
Control your server without SSH

Alternative Browser Desktop Solutions

If you prefer no Google account dependency, consider:

NoVNC
KasmVNC
RustDesk
X2Go

These tools can also provide browser-based desktop access.

Hackintosh the Easy Way: Generating a Clean EFI with OpCore-Simplify (Windows First)

Jervi — Sat, 31 Jan 2026 23:18:54 +0000

In this guide, I’ll show a practical, reproducible workflow to generate a working EFI using OpCore-Simplify, starting from Windows (Ubuntu also works with some tweaks — I’ll cover that later).

Source Jervi-writes

This approach focuses on:

Correct hardware detection
Automatic ACPI + kext selection
Minimal manual OpenCore editing

Prerequisites

A Windows machine (Ubuntu works too, but Windows is easier for the first step)
A USB drive (16GB+ recommended)
Basic BIOS knowledge (disable Secure Boot, enable AHCI, etc.)

Step 1: Dump Your Hardware & ACPI (Windows)

First, we need a precise hardware report. This is critical — don’t skip it.

1️⃣ Download Hardware Sniffer

Download Hardware-Sniffer.exe from GitHub:

👉 https://github.com/lzhoang2801/Hardware-Sniffer

Run it as Administrator.

2️⃣ Export Hardware Report

When prompted:

Press H → Export hardware report
Press A → Dump ACPI tables
Quit the program

This will generate:

SysReport/
 ├── Report.json
 └── ACPI/
     ├── *.aml

Keep this folder safe — we’ll need it next.

Step 2: Generate EFI with OpCore-Simplify

Now comes the magic ✨

1️⃣ Clone OpCore-Simplify

git clone https://github.com/lzhoang2801/OpCore-Simplify.git
cd OpCore-Simplify

Run the tool:

python OpCore-Simplify.py

2️⃣ Load Hardware Report

In the menu:

Choose 1 – Select Hardware Report
Drag & drop Report.json from SysReport/

3️⃣ Choose macOS Version

When asked for macOS version:

Usually Tahoe 26 → option 25

(Pick another version only if your hardware requires it.)

4️⃣ Load ACPI Tables

Drag & drop the SysReport/ACPI folder

5️⃣ Audio Kext Selection

When prompted for audio:

Choose AppleALC

(This works for most Realtek codecs.)

6️⃣ Generate EFI

Back in the main menu:

Choose 6 – Generate EFI

After a few seconds, your EFI folder will be ready 🎉

Step 3: Create macOS Installer USB (Windows)

1️⃣ Download macOS `.raw` Image

Get a vanilla macOS installer image from Olarila:

👉 https://olarila.com/topic/6278-olarila-vanilla-images-macos-installer/

Download the .raw file for your chosen macOS version.

2️⃣ Burn the Image with Rufus

Use Rufus:

Device → your USB
Boot selection → Choose any file
Select the .raw image
Start

This will create a bootable macOS installer.

Step 4: Replace USB EFI with Generated One

Rufus creates an EFI partition, but Windows doesn’t mount it automatically.

1️⃣ Assign a Drive Letter to EFI

Use DiskGenius (or any alternative):

👉 https://www.diskgenius.com/

Select the USB
Assign a drive letter to the EFI partition

2️⃣ Copy EFI Folder

Use Explorer++ (run as admin):

👉 https://explorerplusplus.com/

Open the USB’s EFI partition
Delete existing EFI (if any)
Paste the EFI generated by OpCore-Simplify

Your USB is now ready 🚀

Step 5: Install macOS

Boot from the USB
Install macOS normally
Make sure it boots fully into the desktop before continuing

Step 6: Move EFI to Internal SSD (Important!)

Right now, macOS boots only because of the USB.
We need to install EFI onto the internal disk.

1️⃣ Mount EFI Partitions in macOS

Download Hackintool:

👉 https://hackintool.com/

Open Hackintool
Go to Disks
Mount:
- USB EFI
- SSD EFI (where macOS is installed)

2️⃣ Copy EFI to SSD

Copy the EFI folder from the USB
Paste it into the SSD’s EFI partition

Reboot without the USB — if all goes well, macOS boots normally 🎯

Final Notes

This method avoids manual OpenCore editing
ACPI tables are hardware-accurate
Works great for modern Intel systems
AMD & laptops may need extra tweaks (future article 👀)

Personal Notes & Caveats

With Tahoe, dual-monitor setups work out of the box with no extra configuration
Dual GPU (iGPU + dGPU) is not realistically achievable
- Prefer using the dGPU
- AMD GPUs are generally more stable than NVIDIA
HDMI audio volume cannot be controlled (stuck at 100%)
- Use MonitorControl: https://filecr.com/macos/monitorcontrol/
- Or use a USB audio interface for proper volume control

Fix: Microphone Permissions Not Showing Up on Hackintosh (macOS Tahoe/Sonoma)

Jervi — Mon, 26 Jan 2026 00:23:41 +0000

If you're on a Hackintosh and apps like Brave or OBS won't ask for microphone permissions—leaving your "Privacy & Security" list empty—the system's TCC (Transparency, Consent, and Control) database is likely stuck.

Here is the quick fix to manually inject those permissions.

Source Jervi-writes

1. The "Nuclear" Reset

Before trying tools, try resetting the microphone database to force macOS to "re-discover" apps.

Close your apps.
Open Terminal and run:

tccutil reset Microphone

Restart the app and check for the pop-up.

2. Manual Injection (The `tccplus` Way)

If the reset fails, you can manually force apps into the permission list using tccplus.

Download `tccplus` from GitHub.
Find the App ID in Terminal:
Brave: osascript -e 'id of app "Brave Browser"' (usually com.brave.Browser)
OBS: osascript -e 'id of app "OBS"' (usually com.obsproject.obs-studio)
Run the Injection:

chmod +x ~/Downloads/tccplus
~/Downloads/tccplus add Microphone [Bundle ID Here]

3. The "Terminal Proxy" Workaround

If you need a fix right now and the database won't update, launch the app via Terminal. macOS will often grant the permission to Terminal instead, which "leaks" the access to the app.

For OBS:

open /Applications/OBS.app/Contents/MacOS/OBS

For Brave:

open /Applications/Brave\ Browser.app/Contents/MacOS/Brave\ Browser

Click *"Allow"** when the prompt asks if Terminal can access the microphone.*

💡 Pro Tip for Hackintoshers

If these commands fail, check your SIP (System Integrity Protection) status. If SIP is fully locked down, the system might block these manual database edits. You may need to partially disable it via OpenCore (0x803) to make these changes stick.

Fixing HDMI Audio Stuck at 100% on Hackintosh

Jervi — Fri, 23 Jan 2026 21:51:56 +0000

If you’re running a Hackintosh using HDMI audio, you might’ve hit a super annoying issue:

👉 Audio is always at 100% and can’t be controlled
No keyboard keys, no macOS slider, no EFI tweak seems to help.

Source Jervi-writes article

The Usual (Failed) Fixes

All of classic Hackintosh stuff:

Tweaking EFI / OpenCore
Audio layout changes
Patching AppleHDA
Different framebuffer configs

Nothing worked. HDMI audio volume stayed locked at max.

The Unexpected Fix: MonitorControl

Turns out the fix wasn’t in EFI at all.

MonitorControl (yes, the app used for external display brightness) completely solved the issue.

Once installed:

HDMI audio volume became adjustable
Keyboard volume keys worked
macOS volume slider finally did something
No EFI changes needed

Why This Works (Probably)

HDMI audio is tied to the display, and macOS treats it differently than normal audio outputs.
MonitorControl hooks into display-level controls, which indirectly restores proper volume handling for HDMI audio on RX480.

Laravel `php artisan serve` Fails on Windows (Ports 8000–8010) - Here is a quick fix

Jervi — Fri, 23 Jan 2026 14:32:36 +0000

Laravel on Windows Be Like: “No Port for You” 😤

source from Jervi-writes blog

You install Laravel.
You run:

php artisan serve

Laravel replies:

Failed to listen on 127.0.0.1:8000
Failed to listen on 127.0.0.1:8001
...
Failed to listen on 127.0.0.1:8010

Every. Single. Port. ❌
Firewall? Fine.
Project? Fresh.

If you’re on Windows (Herd / XAMPP / custom PHP), welcome to the club.

The Real Culprit 🕵️‍♂️

It’s just PHP config, especially for Windows

Some Windows PHP builds ship with this:

variables_order = "EGPCS"

The Fix (30 seconds, no reinstalling)

1️⃣ Find your active `php.ini`

php --ini

Example:

C:\Users\{username}\.config\herd\bin\php84\php.ini

2️⃣ Edit ONE line

Change this:

variables_order = "EGPCS"

To this:

variables_order = "GPCS"

3️⃣ Restart terminal & run again

php artisan serve

Boom 💥

Starting Laravel development server: http://127.0.0.1:8000

Why This Works (TL;DR)

Laravel trusts $_SERVER more than $_ENV.
Windows PHP said “nah”.
You fixed the order.
Peace restored 🧘‍♂️

Can’t edit php.ini?

Temporary hacks:

php -S localhost:8000 -t public

php artisan serve --host=localhost --port=8080

But let’s be real — fixing variables_order is the grown-up solution.

Fix OBS Studio Microphone Permission Issues on macOS Hackintosh

Jervi — Mon, 19 Jan 2026 00:32:14 +0000

blog: from Jervi-writes

If you're using OBS Studio on macOS (especially Ventura, Sonoma, Sequoia or Tahoe) and the microphone permission prompt never appears - meaning OBS doesn't show up in System Settings > Privacy & Security > Microphone — this guide is for you.

This problem is particularly frequent on Hackintosh setups due to TCC database quirks, unsigned apps or strange launch behavior. Below are the two most effective workarounds: a quick Terminal trick and a more polished Automator launcher that keeps the proper OBS icon in the Dock.

1. Quick Check: Try the Normal Way First

Before anything else:

Go to System Settings > Privacy & Security > Microphone
If OBS is listed (even unchecked): uncheck it, then quit OBS completely (Cmd+Q)
Reopen OBS normally
Immediately add an Audio Input Capture source and select your microphone

If the prompt still doesn’t appear and OBS is not listed → continue.

2. Method A: Launch OBS via Terminal (Most Common Fix)

This often forces the permission dialog to appear.

Open Terminal (Spotlight → Terminal)
Run this exact command:

open /Applications/OBS.app/Contents/MacOS/OBS

As soon as OBS opens → quickly add an Audio Input Capture source and select your microphone
macOS should now show a permission prompt. It might say Terminal or sh is requesting access → click Allow
Go back to System Settings > Privacy & Security > Microphone. You should now see Terminal, sh, or sometimes OBS listed. Make sure it’s checked.

Note about the Dock icon: When launched this way, the Dock usually shows the Terminal icon instead of the OBS icon. This is normal for this one-time fix. Once permission is granted, you can close OBS and launch it normally (double-click the OBS.app icon) for future use — the permission should stick.

Quick test:

Restart OBS normally
Add Audio Input Capture → speak → check if green audio bars move

If this works → you’re done!

If you want a cleaner launch experience with the proper OBS icon every time → use Method B.

3. Method B: Create an Automator Launcher with Proper OBS Icon

This creates a small custom app that launches OBS correctly (with its own icon in the Dock) while still helping trigger the permission prompt.

Step-by-step instructions

Open Automator (Applications → Automator or Spotlight search)
Choose File > New → select Application → click Choose
In the left sidebar, search for Run Shell Script and drag it into the workflow area
In the script box paste:

open /Applications/OBS.app/Contents/MacOS/OBS

Click File > Save, name it e.g. OBS Launcher, save it to Applications or Desktop
(Optional but recommended) Give it the real OBS icon:
- Right-click original OBS.app → Get Info
- Click the icon in the top-left corner → press Cmd + C
- Right-click your new OBS Launcher.app → Get Info
- Click its icon → press Cmd + V → close window
Drag OBS Launcher.app to your Dock
(Optional) Remove the original OBS icon from the Dock to avoid confusion

Usage

Click your new OBS Launcher icon in the Dock
It should open OBS with the correct OBS icon visible
Immediately add an Audio Input Capture source → select microphone
Allow the permission prompt when it appears
After granting access, you can usually switch back to launching the original OBS.app normally

4. If Nothing Triggers the Prompt – Reset Microphone Permissions

Easy option (recommended):

Download TCC Transparency or TCC Manager (search GitHub or Hackintosh forums for latest version)
Use it to reset Microphone permissions
Reboot
Launch OBS (preferably via your new launcher) → add mic source → prompt should appear

Terminal option (may require SIP disabled on some macOS versions):

tccutil reset Microphone

After reset, try launching OBS again and adding the mic source.

Hackintosh-Specific Notes

Make sure you’re using the correct OBS build (Intel or Apple Silicon) for your setup
Ventura/Sonoma/Sequoia/Tahoe often have stricter TCC behavior → the Terminal or Automator methods usually bypass the issue
After permission is granted → restart OBS once more and test in a simple scene

Quick Action Plan

Try normal launch + add mic source
Use Terminal command → grant permission (fastest fix)
Create Automator launcher with OBS icon for daily use
Reset TCC if still no prompt
Test audio bars → enjoy streaming/recording!

Many Hackintosh users have gotten OBS mic working with exactly these steps. If you try them, let me know your macOS version and what happened (especially after the Terminal launch) — I can refine the advice further.

How to Enable the Classic Android Navigation Bar in BlueStacks 5 (Back / Home / Recents)

Jervi — Thu, 15 Jan 2026 00:46:23 +0000

How to Enable the Classic Android Navigation Bar in BlueStacks 5 (Back / Home / Recents)

BlueStacks 5 hides the classic Android system navigation bar by default, which can be frustrating if you’re testing Android apps, debugging UI flows, or working with apps that rely on Back, Home, or Recent Apps behavior.

Fortunately, you can re-enable the classic Android navigation bar by editing a hidden configuration file.

This guide walks you through the safe, manual way to enable it.

Guide from my blog jervi-writes

✅ What You’ll Get

Once enabled, you’ll see the standard Android system buttons at the bottom of BlueStacks:

◀️ Back
⭕ Home
🟦 Recent Apps

From

This is especially useful for:

React Native / Flutter / Android developers
UI & navigation testing
Apps that don’t handle gestures well
Emulator-like behavior without Android Studio

⚠️ Important Notes Before You Start

Close BlueStacks completely before editing any files
Editing config files incorrectly may cause startup issues
Follow the steps exactly

Step-by-Step: Enable Navigation Bar in BlueStacks 5

1. Close BlueStacks Completely

Make sure BlueStacks is fully closed (also check the system tray).

2. Enable Hidden Files in Windows

The required folder is hidden by default.

Windows 10 / 11

Open File Explorer
Click View → Show → Hidden items

3. Navigate to the BlueStacks Config Folder

Go to:

C:\ProgramData\BlueStacks_nxt

ProgramData is hidden by default, which is why step 2 is required.

4. Open the `bluestacks` Configuration File

Inside the folder, locate a file named:

bluestacks

(If file extensions are hidden, it may appear without .conf or .ini)

Right-click → Open with → Notepad

5. Enable the Navigation Bar Setting

Search for the following line:

bst.enable_navigationbar="0"

Change it to:

bst.enable_navigationbar="1"

This flag controls whether the Android system navigation bar is visible.

6. Save the File

Press Ctrl + S
Close Notepad

7. Prevent BlueStacks from Reverting the Change (Important)

BlueStacks may overwrite this file on startup unless you lock it.

Right-click the bluestacks file
Select Properties
Under General, check Read-only
Click Apply → OK

8. Reopen BlueStacks 5

Launch BlueStacks normally.

You should now see the classic Android navigation bar at the bottom of the screen.

9. The end

Real-Time AI-Powered Car Auction Platform (Xano + React vite)

Jervi — Thu, 11 Dec 2025 21:12:12 +0000

This is a submission for the Xano AI-Powered Backend Challenge: Full-Stack, AI-First Application

description: "Xano AI Challenge submission — Real-Time Car Auction App with WebSockets, Tasks, and AI-driven backend logic."

What I Built

Car Auction Live is a real-time car auction platform for classic and luxury vehicles, built with an AI-first backend on Xano and a React + TypeScript frontend.

It solves three main problems of traditional auctions:

Accessibility – anyone can join from anywhere.
Real-time transparency – WebSocket-powered live bidding, no manual refresh or polling.
Automation – scheduled background tasks finalize auctions, compute winners, and handle reserve prices.

Demo

URL:

frontend from Xano: https://car-auctions-xano.vercel.app/
video demo: (youtube): https://youtu.be/OgYgA3pMqHw

Repo:
Backend Xano: https://github.com/Jervi-sir/car-auctions-react-xano-websocket
Frontend React: https://github.com/Jervi-sir/car-auctions-react-xano-websocket-part-2

Test Credentials

Email: xano@mail.com
Password: password

Dev Tools used

IDE: Antigravity: a forked Vs-code IDE made by google, and it provides AI Agents
used Ai:
- for React front end: Gemini 3 pro, in order to get a non over engeneered projects,
- for database schema: Gemini 3 pro
- for backend logic (Xanoscript): Claude Sonnet 4.5
- I have created this GPT Xano|Xanoscript Gpt

Core Features

For bidders

Live bidding with instant WebSocket updates
Bid history & win tracking
Outbid awareness via live updates

For sellers

Create, edit, and delete auctions
Detailed car specs, images, condition reports
Reserve price support
Stats: views, bids, watchers per auction

Platform

JWT-based auth with Xano’s auth system
Background tasks for auction finalization & trending score updates
Indexed tables for performant queries
Responsive React UI (React 19, TS, Tailwind v4, Radix UI)

What You Can See in the UI

Auction Listing Page
- Paginated list of active auctions
- Current price, bid count, time remaining
- Filters (status, price range, location)
Auction Detail Page
- Live countdown until auction end
- Real-time bid feed (via @xano/js-sdk WebSockets)
- Full specs: engine, power, color, VIN, owners
- Image
- Place bid with validation and error feedback
My Posted Auctions
- All auctions created by the logged-in user
- Edit/delete actions
- Basic stats: total views, bids, watchers
User Profile
- Update profile fields
- View your bids / wins overview
- Delete account (handled via Xano auth APIs)

The AI Prompt I Used

I have build the front-end first with Gemini 3 pro, in order to get a non over engeneered projects, made sure it uses types, so I can just use these types as a schema for Xano.

as for backend, I used several prompts to steer AI into generating XanoScript-friendly backend logic and database structure. Here are the main ones (lightly trimmed for clarity):

| Note that after each ai generation made, I will have to push the change to Xano, in order to validate the generated code

1️⃣ Database Schema Generation

I want to build a car auction platform. Generate Xano database tables
following this TypeScript structure:

type Bid = { id: number; bidderName: string; amount: number; time: string; }

type AuctionCar = {
  id: string;
  title: string;
  subtitle: string;
  imageUrl: string;
  year: number;
  mileageKm: number;
  fuel: string;
  transmission: string;
  location: string;
  startingPrice: number;
  currentPrice: number;
  currency: string;
  endsInMinutes: number;
  specs: {
    engine: string;
    powerHp: number;
    color: string;
    vin: string;
    owners: number;
  };
  initialBids: Bid[];
};

Requirements:
- Create user table for authentication
- Prefix tables with numbers (143_, 144_, etc.)
- Add proper indexes
- Include view history tables

2️⃣ API Endpoints (Car Domain)

Create RESTful API endpoints for the car auction platform, grouped under "car":

1. List auctions (GET /auctions/list) with pagination and filters
2. Get auction by slug (GET /auctions/slug) and track views
3. Get bid history (GET /auctions/bids)
4. Place bid (POST /bids/place) - authenticated and validated
5. Create/Edit/Delete "my auctions" endpoints
6. Get auction stats

Use:
- Proper HTTP status codes
- Validation
- Ownership checks
- Efficient queries with joins

3️⃣ Authentication System

Create a complete user authentication system in Xano:
- Signup (email/password validation)
- Login (returns JWT)
- Me endpoint (current user)
- Update profile
- Delete account
- Enforce email uniqueness
- Hash passwords with bcrypt

4️⃣ Background Task: Auction Finalization

Create a background task that runs every 60 minutes and:

- Finds car_auction rows where auction_end < now
- Only process active, not-yet-finalized auctions
- Gets highest valid bid from car_bid
- If reserve price set, check if highest bid meets it
- Update status:
  - Sold + winning_bidder_id if reserve met
  - Ended (not sold) if reserve not met
  - Ended (no bids) if no bids
- Log processing stats

5️⃣ WebSocket Integration

Set up WebSockets for real-time auction updates:

- Channel name: auctionSession
- Support auctionSession:{car_auction_id} dynamic channels
- Allow public viewers
- Add trigger on car_bid.after_insert
- Emit events with bidder info, amount, timestamp
- Frontend should subscribe and update UI on "new_bid"

How I Refined the AI-Generated Code

AI gave me 80% of the structure, but XanoScript is strict and opinionated. The remaining 20% was about turning “almost-right” into “production-ready”.

1️⃣ Fixing XanoScript Syntax

AI often generated invalid queries: inline comments, unquoted names, multi-line conditions.

AI version (invalid):

query 1_list_auctions_GET verb=GET {  // Get all auctions
  stack {
    text bid_source?="web" // web, mobile, api
  }
}

Refined version (valid & safer):

query "109_auctions_list_GET" verb=GET {
  stack {
    text bid_source?="web"
  }
}

Main adjustments:

Always quote query names
Remove inline comments from blocks
Keep comments above or outside the block

2️⃣ Handling Conditionals (No `else if`)

AI tried to do standard else if chains, which XanoScript doesn’t support.

AI version:

conditional {
  if ($condition1) { ... }
  else if ($condition2) { ... } // invalid
}

Refined version:

conditional {
  if ($condition1) {
    // ...
  }
  else {
    conditional {
      if ($condition2) {
        // ...
      }
    }
  }
}

conditional {
  if ($condition1) {
    // ...
  }
  elseif ($condition2) {
      // ...
    }
}

3️⃣ Single-Line WHERE Clauses

XanoScript doesn’t allow multi-line where expressions.

AI version:

db.query car_auction {
  where = $db.car_auction.is_active == true
    && $db.car_auction.is_sold == false
    && $db.car_auction.auction_end < $now
}

Refined:

db.query car_auction {
  where = $db.car_auction.is_active == true && $db.car_auction.is_sold == false && $db.car_auction.auction_end < $now
}

The logic stayed the same, but syntax had to be compact.

4️⃣ Arrays & Markdown Artifacts

Sometimes the AI leaked Markdown into XanoScript:

AI version:

features:
  [
    "Twin Turbo"
    "Carbon Fiber Body"
  ]

Refined:

features: [
  "Twin Turbo",
  "Carbon Fiber Body",
  "Racing Seats"
]

5️⃣ WebSocket Implementation

The biggest gap: dynamic WebSocket channels.

AI didn’t fully infer the pattern from docs, so I:

Watched Xano’s realtime tutorial Realtime Xano
Checked SDK docs for @xano/js-sdk Xano docs
Implemented the base client manually, then let AI help expand usage.

Core client:

// xano/websocket.ts
import { XanoClient } from "@xano/js-sdk";

const instanceBaseUrl = "";
const realtimeConnectionHash = "";

export const xanoClient = new XanoClient({
  instanceBaseUrl,
  realtimeConnectionHash,
});

export const getXanoChannel = (channelName: string) =>
  xanoClient.channel(channelName);

Subscription in React:

// anyware we can to implement the Websocket, must be specifically inside the auction session, not global

useEffect(() => {
  if (!car) return;
  const channelName = `auctionSession/${car.id}`;
  const channel = xanoClient.channel(channelName);

  const handler = (msg: any) => {
    if (msg.action !== "event" && msg.action !== "message") return;
    const data = msg?.payload?.data;
    if (!data || data.action !== "new_bid") return;

    const newBid = {
      id: data.payload.id,
      bidderName: data.payload.bidder_name || `User ${data.payload.bidder_id}`,
      amount: data.payload.amount,
      time: new Date().toISOString(),
    };

    setBids(prev =>
      prev.some(b => b.id === newBid.id) ? prev : [...prev, newBid]
    );

    setCar(prev => prev && newBid.amount > prev.currentPrice
      ? { ...prev, currentPrice: newBid.amount }
      : prev
    );
  };

  channel.on(handler);

  return () => {
    channel.destroy();
  };
}, [car?.id]);

This turned auctions into truly live sessions without polling.

6️⃣ Auction Finalization Task

The AI’s first draft was naive: it just ended everything past auction_end without checking reserve prices or states.

I refined it to:

Only process active, not-yet-finalized auctions
Get the highest valid bid
Compare to reserve (if set)
Mark as:
- sold + winning_bidder_id set
This logic runs in a front end of a user to help out with the auction finalization or if no users are in the auction session page (which is rare) we do:
Run every 30 minutes via Xano task scheduler

My Experience with Xano

What I Loved

Database-first design
Defining tables, filters, and indexes directly in XanoScript feels natural. It forces good modeling from day one.
Built-in Auth
Having auth, JWT, and auth.user context available in queries simplified everything from “my auctions” to secure bid placement.
Also being able to quickly assign which table can be authenticable
WebSockets & Tasks Built-In
No extra infrastructure. Real-time auctions + scheduled finalization tasks all live inside Xano.
API Organization
Grouping endpoints under /car and /user kept things tidy and scalable.

Challenges

XanoScript learning curve
Coming from Laravel/Go, the strict syntax rules (comments, arrays, conditionals) took getting used to, that's why I notice Ai do hallucinate syntax, since its been only trained on most popular coding languages
AI hallucinating syntax
AI often produced almost valid XanoScript with tiny issues that break everything: inline comments, missing quotes, multiline where, Markdown artifacts.
IDE & extension quirks
The VS Code/Antigravity extension is helpful, but syntax errors sometimes caused weird push behavior, sometime it doesn't consider comments as an issue, but then when pushing to Xano, it breaks only because we used comments

My workaround:
I ended up using this loop:

Let AI generate code
Paste into Xano web UI
Fix errors until valid
Copy back into the repo as the “source of truth”
Reuse that validated pattern to guide future AI generations

| Also I have noticed that the more valid XanoScript existed in the codebase, the better AI became at staying within the syntax.

Overall Takeaway

Xano made it realistic for a solo dev to ship a real-time auction backend: DB, auth, real-time, tasks, all in one place.
AI dramatically accelerated boilerplate and structure.
Human judgment was essential for correctness, performance, and security.

The result: Car auction Live — a concrete example that with Xano + AI, one developer can build what used to need a whole team.

Adding New Features After the Core Build

Once the core real-time auction functionality was complete (bidding, live updates, auction finalization), I extended the platform by adding user-driven auction management:

Create auctions
Edit auctions
Delete auctions
Update user profile
Delete user account

Because the project already had a stable codebase with validated XanoScript patterns, adding these new features was straightforward. AI performed well here because:

It could reuse existing query structures
It already understood the API routes and schema
The logic was simpler than real-time bidding or background tasks

The One Unexpected Issue

To support user-owned auctions, I needed to add a new column to the car_auction table:

table car_auction {
  auth = false

  schema {
    ...
    int? created_by? {
      table = "user"
    }
    ...
  }
  ...
}

AI correctly generated the update, but when pushing the file to Xano, the system returned an error:

“Table already exists”

This happened because XanoScript interpreted the updated file as a new table definition rather than a table modification.

Since I only wanted to add a column, not recreate the table, I handled this manually:

Opened the table in the Xano UI
Added the created_by field directly
Synced the codebase afterward to prevent overwriting

After this manual correction, the new features worked seamlessly — AI-generated endpoints flowed normally, and the frontend integrations were smooth.

Takeaway

XanoScript is great for initial schema creation, but certain schema modifications (adding/removing fields) are safer when done manually in the UI.
Once the correct patterns exist in the codebase, AI becomes far more reliable when expanding features.

Time Consumed

This project was completed over 4 days of focused development, with the majority of time spent on testing, debugging, and integrating the Xano backend with the React frontend. While AI accelerated initial development, real production refinement required extensive manual verification.

Breakdown by Phase

Day 1: Planning & Schema Setup (~4 hours): Designing auction logic, generating initial tables with AI, restructuring schema, adding indexes
Day 1.5: React front end (~6 hours): React pages scaffolded quickly using AI (list, detail, bidding, dashboard)
Day 2: API Endpoints (~6 hours): AI generated CRUD endpoints, I refined query logic & validations
Day 2.5: Integrating API in React (~8 hours): This was the most time-consuming early stage: resolving 404/400/500 errors, payload mismatches, schema fixes
Day 3: Background Tasks + WebSockets and integration to React (~5 hours): AI helped draft tasks; dynamic websocket channels & auction finalization required manual logic
Day 4: Testing and adding new features (~8 hours): Ensuring bidding flow works, auctions finalize correctly, reserve logic works, websocket updates fire reliably, also added some new features

Total Time Invested: ~42 hours (≈ 4 full days)

What Took the Most Time?

Although AI generated a large portion of the backend structure, the real work came from:

fixing syntax issues in XanoScript
validating every route manually
debugging incorrect AI-generated logic
adjusting schema changes mid-development
integrating the APIs into React
handling websocket behavior, cleanup, and reconnections
ensuring auctions finalize correctly across all edge cases
testing bids, bids ordering, watchers, price updates
refactoring payloads to match frontend expectations

This testing + integration cycle consumed almost 50% of the total development time.

Xano screenshots

Frontend Screenshots

Thank you

Setup Expo Build Environment on WSL2 (Without Android Studio nor Paying Expo Credits)

Jervi — Tue, 02 Dec 2025 22:10:58 +0000

🔍 Why Even Build Locally?

1️⃣ Expo Cloud Builds cost money

Expo gives a small free quota. After that, you pay per build — which is fine for production, but not for rapid iteration or testing.

Local builds = unlimited free builds.

2️⃣ Android Studio is huge and unnecessary

A full Android Studio install includes:

IDE
Emulators
GUI tools
Extras you don’t need for CI-style builds

You only need the command-line SDK, build-tools, platform-tools, and NDK.

My setup installs only what is required, trimming the install from 30 GB → ~3 GB.

🛠️ Full Setup Guide (WSL2 Ubuntu 24.04)

✔ Works for Expo, React Native CLI, EAS Build
✔ Matches Expo’s cloud build environment
✔ No Android Studio required

1) Base Dependencies

sudo apt update
sudo apt install -y build-essential git unzip zip curl wget ca-certificates openjdk-17-jdk

2) Node 20.19.4 (matches Expo CI)

Expo’s cloud logs showed Node 20.19.4, so we install that with NVM:

export NVM_DIR="$HOME/.nvm"
if [ ! -d "$NVM_DIR" ]; then
  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
fi
source "$NVM_DIR/nvm.sh"

nvm install 20.19.4
nvm alias default 20.19.4

Optional package managers:

npm i -g yarn@1.22.22 pnpm@10.14.0 bun@1.2.20

3) Android SDK + Build-tools + NDK r27b (minimal install)

No Android Studio. Only the components required for building APK/AAB.

Download command-line tools:

export ANDROID_HOME="$HOME/Android/Sdk"
mkdir -p "$ANDROID_HOME"

cd /tmp
wget https://dl.google.com/android/repository/commandlinetools-linux-11076708_latest.zip -O cmdtools.zip
mkdir -p "$ANDROID_HOME/cmdline-tools"
unzip -q cmdtools.zip -d "$ANDROID_HOME/cmdline-tools"
mv "$ANDROID_HOME/cmdline-tools/cmdline-tools" "$ANDROID_HOME/cmdline-tools/tools"

Add to PATH:

export PATH="$ANDROID_HOME/cmdline-tools/tools/bin:$ANDROID_HOME/platform-tools:$PATH"

Accept licenses:

yes | sdkmanager --licenses

Install core packages:

sdkmanager "platform-tools" \
  "platforms;android-35" \
  "build-tools;35.0.0" \
  "build-tools;29.0.3" \
  "ndk;27.1.12297006" \
  "extras;google;m2repository" \
  "extras;android;m2repository"

Set NDK env:

export ANDROID_NDK_HOME="$ANDROID_HOME/ndk/27.1.12297006"

4) Java + Gradle config

Expo uses Java 17 and specific Gradle JVM args:

export JAVA_HOME="/usr/lib/jvm/java-17-openjdk-amd64"

export GRADLE_OPTS='-Dorg.gradle.jvmargs="-XX:MaxMetaspaceSize=1g -Xmx4g -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8" -Dorg.gradle.parallel=true -Dorg.gradle.daemon=false'

5) Expo / EAS CLI + Tools

npm i -g expo-cli eas-cli

Optional but useful:

Maestro:

curl -Ls "https://get.maestro.mobile.dev" | bash

Bundletool:

sudo mkdir -p /opt/bundletool
sudo wget -q https://github.com/google/bundletool/releases/download/1.17.2/bundletool-all-1.17.2.jar -O /opt/bundletool/bundletool.jar
echo 'alias bundletool="java -jar /opt/bundletool/bundletool.jar"' >> ~/.bashrc

6) Add Environment Variables Permanently

Append to ~/.bashrc:

# Android SDK
export ANDROID_HOME="$HOME/Android/Sdk"
export ANDROID_SDK_ROOT="$ANDROID_HOME"
export ANDROID_NDK_HOME="$ANDROID_HOME/ndk/27.1.12297006"

export PATH="$HOME/.nvm/versions/node/v20.19.4/bin:/opt/bundletool:$ANDROID_HOME/build-tools/29.0.3:$ANDROID_HOME/build-tools/35.0.0:$ANDROID_NDK_HOME:$ANDROID_HOME/cmdline-tools/tools/bin:$ANDROID_HOME/platform-tools:$PATH"

# Java
export JAVA_HOME="/usr/lib/jvm/java-17-openjdk-amd64"

# Expo Token
export EXPO_TOKEN="<your-expo-token>"

# Gradle
export GRADLE_OPTS='-Dorg.gradle.jvmargs="-XX:MaxMetaspaceSize=1g -Xmx4g -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8" -Dorg.gradle.parallel=true -Dorg.gradle.daemon=false'

# CI-like behavior
export CI=1

Apply:

source ~/.bashrc

🧪 7) Verify Everything

node -v
npm -v
java -version
sdkmanager --list | head -n 50
bundletool --version
maestro --version

🚀 8) Do a Local EAS Build

Inside your Expo project:

npx eas build --local --platform android --profile production

Now your build runs without consuming Expo credits, and behaves exactly like their cloud runner.

🎯 Final Thoughts

This approach gives you:

Zero-cost unlimited builds
A lightweight Android SDK install (no Studio needed)
A reproducible environment across machines
Perfect alignment with Expo CI logs

I built this by literally checking Expo’s cloud logs line-by-line, copying the exact versions, and replicating their environment on my local machine.

If you want, I can also generate:

✅ a one-click install script for all of this
✅ a Docker version of the environment
✅ the macOS or Windows-native variant

Just tell me!

This post is edited with AI for clarity and grammar.

Forem: Jervi

I thought you couldn't run Vite HMR Laravel on a remote VPS. I was wrong.

The problem

Step 1 — update vite.config.ts

Step 2 — update .env

Step 3 — open the ports on your firewall

Step 4 — run both servers

Summary

How to Add Swap Space on Ubuntu (5GB Example)

Description

Disclamer

Why Swap Matters

Step 1: Create the Swap File

Step 2: Lock Down Permissions

Step 3: Format as Swap

Step 4: Enable the Swap

Step 5: Make It Permanent

Step 6: Verify

Bonus: Tune Swappiness

Swappiness reference

Quick Summary

How to Access Your Ubuntu VPS from a Browser Using Chrome Remote Desktop (LXDE)

Why LXDE?

Step 1 - Install LXDE (if not already installed)

Step 2 - Install Chrome Remote Desktop

Step 3 - Configure Chrome Remote Desktop to Use LXDE

Step 4 - Add Your User to the Chrome Remote Desktop Group

Step 5 - Link Your VPS to Your Google Account

Step 6 - Restart the Chrome Remote Desktop Service

Step 7 - Connect from Your Browser

Tips for Better Performance

When Should You Use This?

Alternative Browser Desktop Solutions

Hackintosh the Easy Way: Generating a Clean EFI with OpCore-Simplify (Windows First)

Prerequisites

Step 1: Dump Your Hardware & ACPI (Windows)

1️⃣ Download Hardware Sniffer

2️⃣ Export Hardware Report

Step 2: Generate EFI with OpCore-Simplify

1️⃣ Clone OpCore-Simplify

2️⃣ Load Hardware Report

3️⃣ Choose macOS Version

4️⃣ Load ACPI Tables

5️⃣ Audio Kext Selection

6️⃣ Generate EFI

Step 3: Create macOS Installer USB (Windows)

1️⃣ Download macOS .raw Image

2️⃣ Burn the Image with Rufus

Step 4: Replace USB EFI with Generated One

1️⃣ Assign a Drive Letter to EFI

2️⃣ Copy EFI Folder

Step 5: Install macOS

Step 6: Move EFI to Internal SSD (Important!)

1️⃣ Mount EFI Partitions in macOS

2️⃣ Copy EFI to SSD

Final Notes

Personal Notes & Caveats

Fix: Microphone Permissions Not Showing Up on Hackintosh (macOS Tahoe/Sonoma)

1. The "Nuclear" Reset

2. Manual Injection (The tccplus Way)

3. The "Terminal Proxy" Workaround

💡 Pro Tip for Hackintoshers

Fixing HDMI Audio Stuck at 100% on Hackintosh

The Usual (Failed) Fixes

The Unexpected Fix: MonitorControl

Why This Works (Probably)

Laravel `php artisan serve` Fails on Windows (Ports 8000–8010) - Here is a quick fix

Laravel on Windows Be Like: “No Port for You” 😤

The Real Culprit 🕵️‍♂️

The Fix (30 seconds, no reinstalling)

1️⃣ Find your active php.ini

2️⃣ Edit ONE line

3️⃣ Restart terminal & run again

Why This Works (TL;DR)

Can’t edit php.ini?

Fix OBS Studio Microphone Permission Issues on macOS Hackintosh

1. Quick Check: Try the Normal Way First

2. Method A: Launch OBS via Terminal (Most Common Fix)

3. Method B: Create an Automator Launcher with Proper OBS Icon

Step-by-step instructions

1️⃣ Download macOS `.raw` Image

2. Manual Injection (The `tccplus` Way)

1️⃣ Find your active `php.ini`

4. Open the `bluestacks` Configuration File

2️⃣ Handling Conditionals (No `else if`)