DEV Community: Alit Indrawan

Horrorscope 👻: I Trapped a 19th-Century Ghost Inside a Web Server

Alit Indrawan — Sat, 31 Oct 2026 12:01:46 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 4: Ghost in the Machine

What I Built

Horrorscope is a single-page web app that summons a sarcastic, spooky "digital curse" tailored to your zodiac sign. I took the "Ghost in the Machine" theme about as literally as you can: the AI behind it is an ancient, sarcastic 19th-century ghost trapped inside a web server, channeling horoscopes that mix supernatural dread with everyday tech pain — memory leaks, phantom notifications, haunting backlogs, ghostly posture.

You enter your name, age, and zodiac sign, pick an output language (English or Bahasa Indonesia), and hit "Summon My Curse." The ghost replies with two short paragraphs that name a specific "digital curse" or "haunting spirit" currently attached to you. You can copy the curse to your clipboard or have it spoken aloud in a deliberately creepy cadence.

Demo

horrorscope-nine.vercel.app

Horrorscope is a standard Next.js app, so it deploys cleanly to Vercel — add the GEMINI_API_KEY environment variable and it runs. A short screen recording or a pair of screenshots (the summoning form, and the terminal-style result box with a generated curse) goes a long way here, since the aesthetic is half the fun.

Code

Alitindrawan24 / Horrorscope

Horrorscope

How I Built It

Stack: Next.js 14 (App Router), TypeScript, Tailwind CSS, and lucide-react for icons. The model is Google's Gemini Flash, reached through the Google AI Studio REST API — deliberately with a native fetch instead of an SDK, so there's nothing extra to install and the request payload stays transparent.

The "ghost in the machine," literally. The system instruction casts the model as a 19th-century ghost haunting the server, and that voice carries through the whole app. The loading state reads "Channeling Spirits…", every error is in-character ("The spirit realm is currently disconnected…"), and the result lands in a terminal-style window titled CURSE_TRANSMISSION.txt. The theme isn't decoration — it's the narrator.

Resilient model calls. Google rotates and retires model versions, so the route doesn't hard-fail when one disappears. If the configured model comes back unavailable, it queries the ListModels endpoint, filters for text-generation Flash models, and sweeps through candidates until one answers. Transient spikes (429/503) get retried with backoff before that fallback kicks in. The ghost keeps talking even when the model catalog shifts underneath it.

Bilingual curses + a voice. A language toggle rewrites rule 4 of the system instruction so the same ghost speaks English or Bahasa Indonesia. The "Listen" button pipes the curse through the Web Speech API at a slower rate and lower pitch for a deliberately unsettling read-out, with best-effort voice matching for the chosen language.

The aesthetic. A custom Tailwind theme drives the mood: an ectoplasm green / banshee purple / blood red palette, glowing box-shadows, and flicker + fade-in-up keyframes. The body sits on a slate-950 base with three drifting radial "fog" gradients so it never feels flat-black. Zodiac signs are picked from a grid of their actual astrological glyphs (♈♉♊…) rather than a dropdown, which makes the form feel like a séance board.

Error handling. The route validates inputs (400), checks for a missing GEMINI_API_KEY (500), and wraps upstream failures (502) — each with a spooky message instead of a raw stack trace, so even the failure states stay on-theme.

The Spirit of It

I wanted the "ghost in the machine" to be more than a theme — I wanted it to be the app's narrator. The ghost isn't a metaphor here; it's the thing answering you. The moment it landed for me was the first time an error path printed "The spirit realm is currently disconnected…" instead of a generic 500, and it actually felt right. The loading spinner says "Channeling Spirits…", the curse arrives in a terminal window labeled CURSE_TRANSMISSION.txt, and you can make the ghost read its own curse back to you in a low, slow whisper.

It's a small app, but the idea — that the machine itself is haunted, and the haunting is the feature — is what I wanted people to feel in the first few seconds.

LazyLore: The Zero Effort AI Bedtime Storyteller 💤

Alit Indrawan — Sun, 25 Oct 2026 15:25:59 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 3: Slow and Steady

What I Built

LazyLore is a zero-effort, AI-powered bedtime story generator that reads stories aloud — all from a single browser tab.

Type a prompt like "A sleepy bear drifting down a quiet river", tap Create Story, and a custom 3-paragraph bedtime story is generated by Groq and immediately read aloud through your browser using the Web Speech API — in a slow, deep, calming voice tuned for sleep.

Key features:

🌙 One-tap story generation via Groq (open-weight LLM)
🔊 Instant text-to-speech playback (pitch 0.8, rate 0.85 — engineered for drowsiness)
🇬🇧 / 🇮🇩 English and Indonesian language support
📚 Local story history — replay favorites without re-generating
🎨 Deep dark UI designed to not blind you at midnight

Demo

lazy-lore.vercel.app

Code

Alitindrawan24 / LazyLore

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more…

View on GitHub

How I Built It

LazyLore is built with Next.js 14 (App Router), Tailwind CSS, and TypeScript.

The backend is a single API route that sends the user's prompt to Groq (open-weight LLM) and returns a plain-text bedtime story. The system prompt explicitly bans Markdown — because hearing "asterisk" read aloud at midnight is not relaxing.

On the frontend, the story is immediately passed to the browser's built-in Web Speech API with pitch: 0.8 and rate: 0.85 for a slow, deep delivery. No third-party TTS service needed.

Stories are saved to localStorage so you can replay favorites — no database, no account, no data leaving your device.

QuestLog AI: Gamified Habit Tracker

Alit Indrawan — Sun, 18 Oct 2026 17:05:00 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle

What I Built

QuestLog AI is an RPG-gamified habit tracker that demands proof of effort. Standard habit trackers fail because checking an empty box is too easy. QuestLog AI requires the user to write a micro-journal entry (a "Log") about their experience to mark a habit as complete.

At the end of the week, an open-weight AI steps in as the "Game Master." It reads the user's weekly logs, analyzes their hidden patterns or struggles, and generates an RPG-style Weekly Assessment. The AI awards them an epic Title (e.g., The Exhausted Scholar), gives a motivational breakdown, and assigns a specific micro-quest for the following week.

Demo

questlog-ai-zeta.vercel.app

Code

Alitindrawan24 / Questlog-AI

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more…

View on GitHub

Fauna-Dex: Touch Grass and Catch 'Em All

Alit Indrawan — Sun, 11 Oct 2026 17:52:40 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass

What I Built

Fauna-Dex is an offline-first Progressive Web App (PWA) that turns your smartphone camera into a Pokédex for real wildlife. Point your phone at a bird, insect, plant, or any creature you find outside — and Fauna-Dex generates a collectible "Monster Card" powered by an open-weight vision model.

The core loop is designed to get people outside first and connected later: you capture photos with no internet required, they queue in your browser's IndexedDB via localforage, and you sync the whole batch to the AI once you're back on a signal. Every synced photo comes back as a styled card with a creative monster name, the real species, a type badge (Grass / Water / Fire / Bug / Poison / Normal / Flying), HP, a skill derived from the animal's actual behavior, and a one-sentence Pokémon-style lore entry.

Who's it for: hikers, birders, naturalists, curious kids, or anyone who wants a reason to look up from their screen and actually notice the living world around them.

Demo

fauna-dex.vercel.app

Code

Alitindrawan24 / Fauna-Dex

How I Built It

Stack: Next.js 14 (App Router) · Tailwind CSS · localforage (IndexedDB) · next-pwa · TypeScript

Open-source AI: The backend route supports two open-weight vision model providers with automatic fallback:

Google Gemini (gemini-2.0-flash by default) via the GEMINI_API_KEY env var — the fastest path.
OpenRouter routing to meta-llama/llama-3.2-11b-vision-instruct via OPENROUTER_API_KEY — the original spec model, running on open infrastructure.
A mock fallback (no keys needed) for local dev and demos. The route strips the data-URI prefix, sends the raw base64 image plus a strict JSON schema prompt to whichever provider is configured, validates the response against the schema at runtime, and returns a clean MonsterCard payload. No SDK — just fetch.

The UI is a Pokédex device shell — a rounded dark-red chassis, a "screen" with a scanline CSS overlay, a big round capture button, and holographic-shimmer cards — built entirely with Tailwind utility classes and a few inline SVGs.

Why Does Open Innovation Matter?

A closed, proprietary vision API would have made this fragile in a specific way: the entire loop capture offline, sync later only makes sense if you trust the analysis endpoint will still exist and be affordable next month. Open-weight models hosted on open infrastructure (OpenRouter, Together AI, or self-hosted) let the sync target be swappable. The model itself is the key artifact, not a vendor's SaaS contract.

PreMate AI

Alit Indrawan — Mon, 05 Oct 2026 06:59:49 +0000

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

What I Built

I built PrepMate AI for my friend. We regularly meal prep our weekly lunches, and our fridge is almost always stocked with the exact same high-protein staples: chicken breast, eggs, tempeh, lettuce, corn, and tomatoes.

While healthy, eating the same variations of salads and grilled chicken every day leads to massive decision fatigue and flavor boredom. I built this lightweight web app to solve that. She simply checks off the ingredients we currently have left in the fridge, and the AI instantly acts as a creative chef, generating a unique recipe, a new flavor twist, or a fresh dressing idea using only what we have on hand.

Demo

prep-mate-ai-chi.vercel.app

Code

Alitindrawan24 / PrepMate-AI

How I Built It

The project is built as a highly responsive Single Page Application using:

Frontend: Next.js (App Router) and Tailwind CSS for a clean, mobile-first UI.
AI Core (Open-Source): I utilized Gemini open-weight model. To keep the app lightning-fast for a quick weekend build, I routed the inference through the Gemini API.
Integration: A Next.js API route securely handles the prompt construction. The system prompt forces Gemini to respect the selected ingredients and format its output into a beautifully structured Markdown recipe (Catchy Name, Why It Works, and Step-by-Step Instructions).

Creating a Telegram Bot with N8N

Alit Indrawan — Sat, 16 Aug 2025 16:50:41 +0000

N8N has been gaining popularity lately due to its high flexibility. This platform can be installed on your own server (self-hosted) and is free to use, although there is a paid version with additional features.

So what is N8N? N8N is an open-source workflow automation platform that allows you to connect various applications and services without the need for heavy coding. Simply drag and drop the available nodes, then connect them like a puzzle.

What makes N8N even more popular is its ability to easily connect to various AI models such as OpenAI, Gemini, Claude, and even open-source models like Llama 2 and Mistral.

Previously, we discussed how to create a Telegram Bot using coding (Node.js and Go). This time, we will try an easier approach — creating a Bot without any coding at all!

Yep, with N8N, we can create a functional and interactive Bot simply by dragging and dropping. It's perfect for those who want to create a Bot but don't want to deal with programming syntax.

Fun Fact Bot
The bot we are going to create this time is the Fun Fact Bot. The concept is simple but fun — just give the bot any topic, and it will immediately provide interesting and unique facts!

For example, if we chat N8N to the bot, it will respond with interesting facts about N8N, as shown in the image below:

This is a Fun Fact Bot in Telegram App that you can try out.

Preparation
Before starting to create a Telegram Bot with N8N, there are several things we need to prepare.

Bot Token
We need a Bot Token, which can be obtained from @BotFather on Telegram. This token functions as an access key so that the Bot can operate properly.
N8N
Ensure that N8N is installed, either in a local or production environment. If using a local environment, ensure that you also use Ngrok or similar tools so that the N8N URL can be accessed using the HTTPS protocol (this is mandatory for Telegram webhooks).
Gemini API Key
We will use Google Gemini to generate fun facts based on the given topic. The API key can be created for free on Google AI Studio — this will be the ‘brain’ of the Bot in generating interesting content.

Step 1: Telegram Trigger Node

First, we will create a Telegram Trigger Node that will receive a response when users send messages through the Bot we created.

Ensure that Credential is set using the token obtained from BotFather.

Once you have configured your credentials, we will then set up the Bot webhook in Telegram by accessing this page.

https://api.telegram.org/bot<TOKEN_BOT_ANDA>/setWebhook?url=<URL_WEBHOOK_N8N>

Ensure that is replaced with the token obtained from BotFather and from Webhook Urls in N8N, and also ensure that you are using the HTTPS protocol.

If we access the URL, it should return a success message indicating that the webhook has been successfully set.

{
  "ok": true,
  "result": true,
  "description": "Webhook was set"
}

Next, we can press the Execute Step button to run the Node, and when the message Listening for test event appears, we can send a message to the Bot via the Telegram application.

After sending a message to the Bot via the Telegram app, the message information will appear in the Output panel as follows:

After successfully receiving the message, Step 1 has been completed, and the following is the N8N workflow display after Step 1.

Step 2: LLM Basic Chain Node
The next step is to process the message received from the user into a fun fact with the help of the LLM Basic Chain Node.

In the Source for Prompt section, we will use the Define Below option and fill in the prompt with the following text:

I want a Fun Fact with the topic `{{ $json.message.text }}`

Then connect the previous Telegram Trigger Node to the Basic LLM Chain Node

Once connected, an Input Panel containing data from the Telegram Trigger Node will appear on the Basic LLM Chain Node.

Then we will create a Chat Message with the System type and contain the following Message

You are a Fun Fact generator. Create a Fun Fact with the given topic in a format that is to the point, clear, concise, and written in an interesting style. Always start your answer with ‘Did you know?’.

Next, create a Google Gemini Chat Model Node and fill in the credentials with the Gemini API Key obtained from AI Studio. You can use the model as needed.

Connect the Basic LLM Chain Node with the Google Gemini Chat Model Node as shown in the following image:

Once all nodes are connected, it is time to run the Basic LLM Chain Node by pressing the Execute Step button. If successful, the fun fact results from Gemini AI will appear on the Output panel as follows.

Step 3: Telegram Node
The final step is to send the fun fact results from Gemini AI to users via Telegram. Create a new Telegram Node to send the message Send a text message.

Then connect it to the Basic LLM Chain Node. In the Chat ID section, use the data from the Telegram Trigger Node and for Text use the data from the Basic LLM Chain Node.

Then run Node by pressing the Execute Step button. If successful, information will appear in the Output Panel and a message will be sent to the user via Bot as follows:

The final result of the N8N workflow will be as follows

Conclusion
Creating a Telegram Bot with N8N is surprisingly easy! With just three nodes (Telegram Trigger, LLM Basic Chain, and Telegram), you can create an interactive and useful Bot without the hassle of coding.

Why is N8N a great choice?

Drag and drop — simply connect the nodes like a puzzle
Flexible — easily connect to various AI platforms (Gemini, OpenAI, Claude)
Fast — workflows are ready to go, no need for complicated coding environment setup

Fun Fact This bot is just the beginning. You can further develop it by adding features like a database to store chat history, an inline keyboard for cooler interactions, or even scheduling the bot to automatically send fun facts every day.