DEV Community: Anupam Thakur

404: The Page That Gets Worse

Anupam Thakur — Fri, 03 Apr 2026 12:24:53 +0000

This is a submission for the DEV April Fools Challenge

What I Built

I built a 404 page that gets worse the more you use it.

Most 404 pages try to help you get back.
This one does the opposite.

The more you visit, the more it changes its personality:

🎀 Random pink mode appears
💘 A romantic theme shows up unexpectedly
🧠 "Try turning yourself off and on?" button
🌀 Inception messages after repeated visits
🔊 Completely unnecessary sound effects
🤡 Buttons that proudly do nothing

Demo

Live Site

Screenshots

first visit

Three magical number visit

In between visit

The time wasted visit

Code

If you're curious:

Review the code
Star it if it made you smile
Fork it and make it even more useless
Or improve it… if you dare

Fair warning though…
Exploring this code might be a waste of time.
But then again… so is this entire project.
view code

How I Built a 404 Page That Gets Worse Over Time

This project started as a normal 404 page.
Then I asked a simple question:

What if a 404 page remembered you… and reacted accordingly?

That idea turned into a useless but fun experiment.

Step 1: Track Visits

I used localStorage to track how many times someone visits the 404 page.

Each visit increases a counter:

First visit → Normal 404
Few visits → UI changes
Many visits → Things get… strange

The page slowly evolves based on visit count.

Step 2: Theme System

I created a simple theme system using data-theme.

Instead of hardcoding styles, I switch themes dynamically:

Default theme
Romantic theme
Flicker theme
Random surprises

This made it easy to add new personalities to the page.

Step 3: Random Chaos

To make the page unpredictable, I added:

Random messages
Weird buttons
Unexpected UI changes
Sound effects

Not every visit behaves the same.
And that’s where the fun begins.

Step 4: Progressive Weirdness

The key idea was gradual escalation:

First few visits feel normal
Then subtle changes
Then the page starts acting… unusual
Eventually it becomes completely useless

Tech Stack

HTML
CSS (theme system with data-theme)
JavaScript (localStorage + logic)

Why I Built This

Because not every project needs to solve a problem.
Some can just exist to make the internet a little more interesting.

And honestly…
The more I built it, the more it built itself.

Prize Category

submission is not specific to a prize category.

Anti-value

This project does not solve any problem.
It wastes time.
It adds confusion.
It becomes increasingly useless.

Really, it’s fun to build something useless 😂
Why always make something useful? Sometimes it’s better to just go with the flow and build for the fun of it.

Not every project needs to solve a problem.
Sometimes, it's enough that it made the process enjoyable.

And honestly, this one was just fun to build. 🚀

Ok thanks and BYE BYE, see you later or you can now below (click it)

Anupam Thakur Follow

On a journey of becoming frontend developer.

JOBSFILE

Anupam Thakur — Mon, 02 Mar 2026 08:00:41 +0000

This is a submission for the DEV Weekend Challenge: Community

The Community

JobsFile is built for job seekers — especially students, fresh graduates, and early-career developers — who actively apply to multiple roles and struggle to keep everything organized.

This community regularly deals with scattered job descriptions, lost follow-up dates, repeated cold emails, and the mental overhead of remembering where, when, and how they applied. Spreadsheets break quickly. Notes apps don’t scale. Existing tools feel bloated or impersonal.

As a job seeker myself, I built JobsFile from firsthand frustration. It reflects the real workflow of applying, tracking, following up, and refining outreach — not just storing job titles. The goal is simple: reduce cognitive load, improve follow-up consistency, and help candidates stay confident and in control during a stressful process.

🗂️ JobsFile

Track jobs. Remember context. Follow up better.

💡 Inspiration

While applying to multiple jobs, I kept running into the same problems again and again:

I forgot job descriptions after a few days
I wasn’t sure when or how to follow up
Writing follow-up or cold emails meant repeatedly copy-pasting job details
Tracking applications across spreadsheets and notes became messy and stressful

As a job-seeking developer myself, I felt this pain firsthand.

JobsFile was built to solve that exact problem.

github source code

app live url

🚀 What it does

JobsFile is a lightweight job application tracker that treats the job description as first-class data.

It allows users to:

Save and organize every job they apply to
Store the full job description once and revisit it anytime
Track application status (Saved, Applied, Interview, Rejected)
Maintain follow-up notes and reminders
Generate personalized follow-up and cold emails using saved job context
Clearly see which applications need attention today

Instead of just tracking where you applied, JobsFile helps you remember what you applied for and act on it confidently.

🧠 How it’s different

Most job trackers focus only on status columns and deadlines.

JobsFile focuses on context.

Job descriptions are preserved and easily accessible
Follow-ups are contextual, not generic
The UI is optimized for clarity and speed, not clutter
Built specifically for individuals, not recruiters

It feels more like a personal job memory system than a spreadsheet.

🛠️ How we built it

Frontend: React + TypeScript
Styling: Tailwind CSS (v4) with OKLCH-based theming
UI Components: shadcn/ui
State Management: React Context
Architecture: SPA (Serverless-friendly)
Design Focus: Clean, minimal, distraction-free

The project was structured with scalability in mind, keeping components reusable and logic well-isolated.

⚠️ Challenges we ran into

Designing a workflow that stays simple while handling many job states
Structuring job data so descriptions remain usable for follow-ups
Avoiding feature bloat while keeping the app genuinely helpful
Making the UI feel fast and intuitive without overwhelming users

Each challenge pushed the project toward better UX decisions.

🏆 Accomplishments that I’m proud of

Turning a real personal problem into a practical product
Building a clean, scalable frontend architecture
Creating a job tracker that actually improves follow-up quality
Designing a UI that feels calm during a stressful job hunt

📚 What I learned

How important context preservation is in productivity tools
Better state modeling for real-world workflows
Practical UI/UX tradeoffs in personal tools
How small features, done right, can have a big impact

🔮 What’s next for JobsFile

AI-powered follow-up and cold email suggestions
Smart reminders based on application age
Resume-to-job matching insights
Export and analytics for job search patterns
Authentication and cloud sync

🙌 Built by

Anupam

Frontend Developer

Built with empathy for job seekers and love for clean UI.

Interview Quest : an AI Interviewer

Anupam Thakur — Mon, 16 Feb 2026 08:03:22 +0000

This is a submission for the GitHub Copilot CLI Challenge

🎮 InterviewQuest: Level Up Your Interview Skills in the Terminal

Ever wished you could practice coding interviews without leaving your terminal? Meet InterviewQuest - a gamified, terminal-based interview simulator that makes practicing technical interviews actually fun!

🌟 What is InterviewQuest?

InterviewQuest is a production-quality CLI application that helps developers practice technical interview questions in a gamified environment. Think of it as a terminal game meets interview prep - with lives, streaks, and adaptive difficulty!

✨ Key Features

🎯 Guess the Output Mode - Analyze code snippets and predict their output
💝 Lives System - Start with 3 hearts, lose one on wrong answers
🔥 Streak Bonuses - Get 3 correct in a row to level up difficulty
📊 Score Tracking - Track your progress and accuracy
🧠 Adaptive Difficulty - Automatically adjusts based on your performance
🎨 Beautiful UI - Centered, colorful terminal interface with animations
⚡ Zero Dependencies - Minimal, fast, and reliable
🤖 AI Integration - Optional GitHub Copilot support for evaluation

🎬 Demo

📋 Prerequisites

Before you start, make sure you have:

Node.js >= 18
Git
Terminal with minimum size 60x20

🚀 Installation & Setup

Since the app isn't published on npm yet, you can run it directly from the GitHub repository:

Method 1: Clone and Run (Recommended)

# Clone the repository
git clone https://github.com/anupamthakur-dev/interview-quest.git

# Navigate to the directory
cd interview-quest

# Install dependencies
npm install

# Build the project
npm run build

# Run the game (default mode - no AI)
npm start

# Or run with AI features enabled
npm run start:ai

# Alternative: direct command with AI
node dist/bin/interviewquest.js --ai

Note: In local development, AI is disabled by default. Use npm run start:ai or add the --ai flag to enable GitHub Copilot features.

Method 2: Install Globally (Local Development)

(not yet published on npm)

# Clone and navigate
git clone https://github.com/anupamthakur-dev/interview-quest.git
cd interview-quest

# Install dependencies and build
npm install
npm run build

# Link globally
npm link

# Now you can run it from anywhere!
interviewquest

# Or with AI features
interviewquest --ai

To unlink later:

npm unlink -g interviewquest

Tip: When installed globally via npm (after publishing), AI features will be enabled by default. In local development, use the --ai flag to enable them.

🎮 How to Play

Starting the Game

npm start

Game Modes

1. Guess the Output 🎯

The main game mode where you:

View a code snippet
Predict what it will output
Submit your guess (multi-line supported!)
Get instant feedback

Lives System:

Start with 3 hearts ❤️ ❤️ ❤️
Lose one on wrong answer
Game over when you run out!

Streak Bonuses:

Get 3 correct in a row 🔥🔥🔥
Difficulty automatically increases
Earn bonus points!

Difficulty Levels:

🟢 Easy - Basic concepts
🟡 Medium - Practical applications
🔴 Hard - Advanced concepts

2. Interview Mode 🎤 (Coming Soon)

Realistic interview simulation
Timed challenges
AI evaluation with detailed feedback

3. Practice Grounds 📚 (Coming Soon)

Unlimited practice
No time pressure
Learn at your own pace

⌨️ Controls

In-Game Controls

Guess the Output:

Type your answer
Press Enter for new line
Press Ctrl+S to submit
Use arrow keys to navigate

Menus:

Use ↑ ↓ arrow keys to navigate
Press Enter to select
Press Esc or Ctrl+C to exit

🛠️ Tech Stack

Built with modern, minimal dependencies:

TypeScript - Type-safe development
Node.js - Runtime environment
Chalk - Terminal styling
Figlet - ASCII art headers
Custom Terminal Wrapper - Responsive, centered UI

Architecture:

Modular, scalable structure
Custom animations (no heavy libraries!)
Native readline for input
Clean separation of concerns

📁 Project Structure

interview-quest/
├── bin/
│   └── interviewquest.ts        # Entry point
├── src/
│   ├── app/                     # App initialization
│   ├── ui/                      # Terminal UI components
│   ├── game/                    # Game logic & modes
│   ├── questions/               # Question bank
│   ├── evaluation/              # Answer evaluation
│   └── utils/                   # Utilities
└── dist/                        # Compiled output

🎨 Screenshots

Intro page

Main Menu

Gameplay

Results

⚙️ Configuration

Default Mode (No Setup Required)

The app runs in default mode with built-in questions:

✅ Works immediately after installation
✅ No external dependencies required
✅ Perfect for getting started!

Just run and play:

npm start
# or if linked globally
interviewquest

Enable AI Features (Optional)

Want AI-powered code generation and evaluation? Use the --ai flag:

Prerequisites:

GitHub CLI installed: gh --version
Copilot extension: gh extension install github/gh-copilot
Authenticated: gh auth login
GitHub Copilot subscription

Local Development:

# Using npm scripts
npm run start:ai
npm run dev:ai

# Or with flag
interviewquest --ai
node dist/bin/interviewquest.js --ai

After Publishing (Production):

# AI enabled by default!
npm install -g interviewquest
interviewquest  # AI already enabled

# Disable if needed
interviewquest --no-ai

Available Flags:

interviewquest --help        # Show help
interviewquest --version     # Show version
interviewquest --ai          # Enable AI features
interviewquest --copilot     # Same as --ai
interviewquest -c            # Short form
interviewquest --no-ai       # Disable AI (production)

What you get with AI:

🤖 AI-generated code challenges
💡 Smarter answer evaluation
📝 Detailed feedback and explanations
🎯 More varied question types

Environment Behavior:

🏠 Local Development: AI disabled by default (use --ai to enable)
🚀 Production: AI enabled by default (use --no-ai to disable)

🤝 Contributing

Contributions are welcome! Here's how you can help:

Fork the repository
Create a feature branch

   git checkout -b feature/amazing-feature

Make your changes
Commit with clear messages

   git commit -m "Add amazing feature"

Push to your fork

   git push origin feature/amazing-feature

Open a Pull Request

Development Setup

# Clone your fork
git clone https://github.com/YOUR_USERNAME/interview-quest.git
cd interview-quest

# Install dependencies
npm install

# Start development mode
npm run dev

🗺️ Roadmap

Current Features ✅

[x] Guess the Output mode
[x] Lives system
[x] Streak bonuses
[x] Adaptive difficulty
[x] Score tracking
[x] Multi-line input support
[x] Beautiful terminal UI

Coming Soon 🚀

[ ] Interview Mode with AI evaluation
[ ] Practice Grounds (unlimited practice)
[ ] More question categories
[ ] Session persistence
[ ] Leaderboard system
[ ] Custom themes
[ ] Question of the day
[ ] Multiplayer mode (?)

📊 Stats

Package Size: ~70 KB
Dependencies: 3 (minimal!)
Lines of Code: ~5,000+
Supported Languages: JavaScript, TypeScript, DSA, System Design
Question Bank: Growing weekly!

🐛 Known Issues

Terminal must be at least 60x20 for best experience
Some emojis may not render correctly on older terminals
Windows CMD has limited color support (use PowerShell or Windows Terminal)

💡 Tips for Best Experience

Use a modern terminal:
- Windows: Windows Terminal or PowerShell
- Mac: iTerm2 or default Terminal
- Linux: gnome-terminal, konsole, or similar
Recommended terminal size: 80x24 or larger
Enable cursor blinking for better input visibility
Use dark theme for optimal color contrast

🙏 Acknowledgments

Built with love for the developer community
Inspired by the need for better interview practice tools
Thanks to all contributors and testers!

📬 Contact & Support

GitHub: https://github.com/anupamthakur-dev/interview-quest
Issues: https://github.com/anupamthakur-dev/interview-quest/issues
Author: Anupam Thakur

🎯 Quick Start Summary

# 1. Clone the repo
git clone https://github.com/anupamthakur-dev/interview-quest.git

# 2. Install & build
cd interview-quest
npm install
npm run build

# 3. Start playing!
npm start              # Default mode (no AI)
npm run start:ai       # With AI features

# 4. Optional: Install globally
npm link
interviewquest         # Run from anywhere
interviewquest --ai    # With AI features

# When published via npm (coming soon!)
npm install -g interviewquest
interviewquest         # AI enabled by default
interviewquest --no-ai # Disable AI if needed

Quick Commands:

interviewquest - Run the game
interviewquest --ai - Enable AI features (local dev)
interviewquest --no-ai - Disable AI (production)
interviewquest --help - Show all options
interviewquest --version - Show version

Works immediately with built-in questions! No setup required.

Want AI features? Add --ai flag in local dev, or AI is enabled by default in production.

Star the repo ⭐ if you find it helpful!

Happy coding, and may your interviews be ever in your favor! 🚀

Have questions or suggestions? Drop them in the comments below! 👇

Why Pub/Sub Is the Architecture Trick Every Developer Should Know

Anupam Thakur — Tue, 25 Nov 2025 18:21:57 +0000

Did you ever run into a situation where an event or specific action happens in your code, and you want other components to react — maybe update the UI, trigger a toast, refresh some data — but you end up creating a mess of callback functions just to make things talk to each other? One function calling another, that one calling a third, and suddenly your code looks like a bowl of tightly coupled spaghetti🍝.

Example:

Component A fires an event, so you directly call a function in Component B. Then B needs to inform C, so you pass another callback. And eventually C needs data from A, so you pass props up and callbacks down. It works… but it becomes fragile, painful to maintain, and every new requirement feels like refactoring your entire app.

Now compare that chaos with using Pub/Sub:

Component A simply publishes an event like user:login, and whoever cares — Component B, C, or D — just subscribes to it. No direct dependencies, no tangled wiring, no callback chains. A doesn’t know who’s listening, and listeners don’t care who triggered it.

// Component A
pubsub.publish("user:login", user);

// Component B
pubsub.subscribe("user:login", (user) => updateHeader(user));

// Component C
pubsub.subscribe("user:login", (user) => refreshDashboard(user));

// Component D
pubsub.subscribe("user:login", () => showToast("Welcome back!"));

Your code suddenly becomes modular, clean, and beautifully predictable. Ok , now lets dive deep into what is and how to do pub/sub.

Publish-Subscribe ( pub/sub )

Pub/sub is a simple messaging pattern where one part of your code announces that something happened, and other parts of your code listen for those announcements.

The part that announces is called the publisher.
The parts that listen are called the subscribers.

They never talk to each other directly.
They only communicate through a middle system (the “event channel”).

It’s like saying:

“Hey, event happened!”
and whoever cares will react — without the publisher knowing who they
are.

Super simple example:

Imagine a Youtube channel

You publish a video
Whoever subscribed the channel get automatically notified.
You don't have to message each subcriber.

🧩 Let’s Build a Simple Pub/Sub System from Scratch

To understand Pub/Sub, imagine breaking the system into three simple parts — each with a very clear job :

1. The Publisher (🔊The speaker)

This part of your code creates an event. And publish events with optional data. Its doesn't know about :

who will listen
how many listners are
and what will it do It just says

Hey! an event happened, i am publishing it.

 publish(eventName, data) {
    if (!this.events[eventName]) return;
    this.events[eventName].forEach(callback => callback(data));
  }

2. The Subscriber (👂The Listener)

This part of your code subscribe the Listeners and responsible to receive messages for subscribed events.

And subscribes dont know:

who trigger the events
why the event happens They only care when it happens.

This is a method which returns a function which is used to unsubscribe from event works as a clean-up function.

subcribe(eventName, callback) { 

 if(!events[eventName]) events[eventName] = [];

 events[eventName].push(callback);

 return ()=>{events[eventName].filter(l => l !== callback)};

}

3. Event Channel (🙎‍♂️The Middleman)

This is the hub where everything connects.

stores all events and thier listeners
links publishers and subscribers
decides which subscribers to notify when an event occurs

// stores event and listeners in Set
// like
 events { 
          "event-name" : [listener1,listener2, ...],
          "event-name1": [listener1,listener2, ...]
        }

💻 Full code example

Below is the full code that we used to explain the concepts above;

const pubsub = {
  events: {},

  subscribe(eventName, callback) {
    if (!this.events[eventName]) this.events[eventName] = [];

    this.events[eventName].push(callback);

    return ()=>{events[eventName].filter(l => l !== callback)};
  },

  publish(eventName, data) {
    if (!this.events[eventName]) return;
    this.events[eventName].forEach(callback => callback(data));
  }
};

🛠️ How to use

1️⃣ Subscribe to an event

const unsubscribe = pubsub.subscribe('task:completed',(task) => {
   console.log("A task was completed:",task);
 })

// call unsubscribe function
// when you doesn't want to get notify

2️⃣ Publish an event

pubsub.publish("task:completed",{id:1,title:"Learn Pub/Sub"});

When publish runs, the subscriber automatically gets triggered

✅ Done

Congrats, now your code ready to yell to listners that the event is happen whenever publish runs.

// output  
Event received: task:completed
Payload: { id: 1, title: "Learn Pub/Sub" }

Clean, readable, maintainable and scalable instead callbacks hell. It’s a practical weapon for cleaner, more flexible code — especially in interactive apps, real-time features, and systems that grow over time.

🧠 How I Discovered Pub/Sub While Fighting My Own Code Chaos

The first i know about Pub/Sub and used in my code, when i was working on my project Pomodoro Timer. Where i need to keep the track of remaining time to update UI, and switch between modes (focus, short-break and long-break) on every timer hits zero.

EventEmitter as pub/sub system

class EventEmitter {
    private _events:Record<string, Listener[]>={};

    on(eventName:string,callback:Listener){
        if(!this._events[eventName]) this._events[eventName] = [];
        this._events[eventName].push(callback);

        return ()=>{this._events[eventName].filter(l=> l !== callback)}
    }

    emit(eventName:string, ...args:any[]){
        if(!this._events[eventName]) return;
        this._events[eventName].forEach((l)=> l(...args));
    }
}

Pomodoro core structure


export class Pomodoro {

  private _emitter = new EventEmitter();

  subscribe(eventName:string,callback: Listener): Unsubscribe {
   return this._emitter.on(eventName,callback);
  }

start(): void {
    this._interval = setInterval(() => this.tick(), 1000);
    this._isTicking = true;
    // publisher emiting timer status on every start method call
    this._emitter.emit('status',this.isTicking);
  }

  private tick(): void {
    if (this._second === 0) {
      if (this._minute === 0) {
        this._isTicking = false;
        this.tryCallback();
        return;
      }
      this._minute -= 1;
      this._second = 59;
    } else {
      this._second -= 1;
    }

// another publisher
// publish tick event and data on every second

    this._emitter.emit('tick',{min:this.minute,sec:this.second});
  }

}

And that’s pub/sub helped me, Now i can add as many as subscribers without touching the core code structure just need to call subcribe method and booyah!!! its done and unsubscribe the event when i don't need.

🌟Benefits of Using Pub/Sub

Decoupled code : components don’t know (or care) about each other; they just react to events.
Cleaner structure : no callback hell, no prop drilling, no tangled chains.
Scales easily : add new behaviors without touching existing code.
Reusable events : one event can trigger actions in multiple places.
Readable flow : publishers feel like actions, subscribers feel like reactions.
Central control : log, throttle, filter, or queue events from one spot.
Easier testing : test events without mocking entire components.

At the end, Pub/Sub isn’t just a pattern — it’s a mindset. When your app grows, you’ll quickly realize that tightly connecting everything together only traps you later. Pub/Sub gives you the freedom to build features without breaking old ones, experiment without fear, and write code that feels calm instead of chaotic.

If you’re just starting out, mastering this pattern early will save you countless headaches down the road. Keep your components independent, let events do the talking, and your future self will ✨thank you for choosing the cleaner path.

🙋‍♂️👋 Thanks for Reading

Alright, wrapping this up — this is something I learned the hard way, and I felt it’s worth sharing so other developers can discover this pattern earlier than I did. Keep learning, keep exploring, keep growing… and yes, work smart so you can land that dream job (because let’s be honest — passion is great, but the paycheck💰 definitely helps).

Thanks for reading! I’ll see you in the next blog. If you’ve got questions or thoughts, drop them in the comments. And if this helped you even a little, don’t forget to like and share it with your fellow developers.🙌

✨IntergrationHub

Anupam Thakur — Mon, 27 Oct 2025 14:51:41 +0000

🚀 IntegrationHub – Your Central Command for AI-Agent Integrations

This is a submission for the Auth0 for AI Agents Challenge

🧠 What I Built

IntegrationHub is a lightweight but powerful platform that allows users to securely connect multiple third-party services (Google Gmail, Calendar, Drive, and more coming soon) into an AI Agent ecosystem.

Users can grant specific OAuth scopes to agents on-demand, meaning:

You decide which agent can access which service.
No over-permissions.
No creepy “why do you need that scope?” moments.

It solves a huge problem: AI agents are becoming smarter, but enabling them to access real services securely without storing raw tokens is difficult. With IntegrationHub + Auth0 for AI Agents Token Vault:
✅ No token leaks
✅ Secure scoped access
✅ Unified integration management

Think of it like… “Zapier, but your AI agent drives.”

🎥 Demo

Repository: (Add your GitHub link here)

Here’s how it works:

The dashboard lists all available service integrations
Each integration has a Connect button
Click → authorize → select scopes → done!
Agent can then request access from the Token Vault securely

Some screenshots you can include:

Integration dashboard UI
Scope selection UI
Token Vault usage flow
Realtime logs / agent permission introspection

(Add GIFs/videos for extra ✨)

🔐 How I Used Auth0 for AI Agents

Auth0 is the secret sauce.

🔑 1. Token Vault

Instead of storing plain OAuth tokens in my database like an amateur hacker villain…

Store encrypted user provider credentials in Auth0’s Token Vault
Access them only when agent executes relevant tools

Tokens are never exposed to:
❌ Frontend
❌ Logs
❌ Developer console

⚙️ 2. Agent Authentication

Agents that need access must request it through:

withGoogleConnection(myTool, [/* scoped permissions */])

Auth0’s built-in permission prompts ensure:

Users can deny suspicious requests
Agents get only what they asked for
Audit trails remain clean

🛡️ 3. Scoped Access

Only allowed scopes can be used. No drive.read unless user clicked it. Permission granularity 🧂

🧩 Architecture

Next.js frontend
React component for integration dashboard
Auth0 AI Tools for secure OAuth flows
Express backend to pipe agent streams
Google API for Calendar/Gmail actions

Minimal server logic = maximum peace of mind.

🧠 Lessons Learned and Takeaways

I came. I coded. I cried. I learned.

✅ Token management is deceptively tricky

OAuth tokens expire. Refresh tokens get revoked. Token Vault solves it cleanly.

✅ Agent permissions must be explicit

AI shouldn’t randomly read your emails at 3AM.
Scoped consent flows = safety.

✅ Tool abstraction matters

Designing agent tools where scope selection happens upfront improves UX and security.

✅ Less backend = happier dev

Serverless-ish = simpler deployments, fewer tears.

🧪 Advice for other devs:

Start with minimal scopes
Don’t assume permissions
Log everything (securely)
Read Auth0 docs. Read them twice.

✨ Final Thoughts

AI Agents are only as useful as the APIs they can safely interact with.

IntegrationHub proves:

Secure AI integrations don’t have to be complicated
Consent flows can be elegant
Tokens can remain safe

What’s next?

Drive file management
Slack & Discord integrations
Real-time notifications

If you like futuristic automation with real-world utility… this is just the beginning. 😎

Thanks for reading!
Happy hacking 🤖💙

ComicGen : AI Powered Comic making

Anupam Thakur — Mon, 15 Sep 2025 07:23:58 +0000

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

ComicGen: Your AI-Powered Comic Creation Studio

1. Introduction

ComicGen is a revolutionary, browser-based application that redefines comic creation. It leverages the immense power of Google's Gemini API to transform your ideas into fully illustrated, professional-quality comic book pages in minutes.
Forget the steep learning curve of complex design software and the need for advanced artistic skills. With ComicGen, if you can describe a scene, you can create a comic. It acts as your creative co-pilot, handling everything from character design and storyboarding to dialogue writing and final illustration. This modern, minimalist tool is designed for storytellers, writers, marketers, educators, and anyone with a story to tell, making the art of comic creation accessible to all.

2. The Power of Gemini: Your Creative Partner

At the heart of ComicGen lies Google Gemini, one of the most advanced and capable AI models in the world. Its integration is not just a feature; it is the engine that drives the entire creative process. Here’s how Gemini makes ComicGen extraordinary:

Multi-Modal Brilliance: ComicGen seamlessly orchestrates multiple state-of-the-art models. It uses gemini-2.5-flash for its incredible speed and language understanding to generate story structures, character profiles, witty dialogue, and detailed artistic directions. It then hands those directions to the imagen-4.0-generate-001 model, a world-class image generator, to create stunning, consistent artwork.
From Concept to Comic in Seconds: The speed is breathtaking. A user can write a single sentence describing a scene and watch as Gemini builds a complete, multi-panel page with dialogue and illustrations in under a minute. This dramatically accelerates the creative workflow from hours or days to mere moments.
Structured Creativity: A key innovation in ComicGen is how it guides Gemini's creativity. By providing the AI with a strict JSON schema, we ensure its imaginative output is always perfectly structured and ready for the application to render. This eliminates errors and provides a reliable, predictable user experience.
Solving Character Consistency: One of the biggest challenges in AI art is maintaining a character's appearance. ComicGen solves this by using Gemini to first generate a detailed "visual prompt" for each character. This prompt acts as an artistic DNA, ensuring that every image of that character—whether happy, surprised, or in action—is visually consistent. ### 3. Core Features #### Character Creation Studio
AI-Powered Profiles: Simply provide a name and a few personality traits. Gemini will generate a humorous, sitcom-style introduction and a detailed visual prompt to define their look.
Reference Image Support: Optionally upload an image to guide the AI in creating the character's visual style.
Automatic Emotion Sprites: Upon creation, Gemini automatically generates a set of key emotion images (happy, sad, angry, surprised) for each character against a green screen, which the app then makes transparent, ready for immediate use. #### AI Story & Page Generation
Simple Prompting: Describe what happens next in your story.
Scene Casting: Select which of your created characters are in the scene and briefly describe their actions or feelings.
Intelligent Layout: Gemini analyzes your prompt and generates a complete comic page, including 2-4 panels arranged logically, witty dialogue in speech bubbles, narration boxes, and detailed art prompts for each panel. #### Infinite Canvas Editor
Limitless Space: An intuitive, infinite canvas where you can pan and zoom with ease.
Freeform Layout: Arrange your comic pages anywhere you like.
Automatic Arrangement: With a single click, automatically "gather" all pages into a neat vertical strip or "scatter" them across the canvas in columns for a bird's-eye view of your story. #### Professional-Grade Tooling
Layers Panel: A familiar, powerful layers system displays your entire comic's structure. Drag and drop to reorder elements, group items together, or even move elements between pages.
Contextual Properties Panel: Select any item on the canvas—a panel, a speech bubble, or a page—and instantly edit all its properties, from size and color to text content and font style.
Character Browser: Your cast is always accessible in the editor's sidebar. Drag and drop character emotions directly onto the canvas to instantly add them to your scene.
Non-Destructive Workflow: An integrated history system with unlimited undo and redo means you can experiment freely without fear of losing your work. High-Quality Export
Multiple Formats: Export your creations as high-resolution PNG, JPG, or PDF files.
Flexible Selection: Export your entire comic, a single page, or even just a few selected panels.
Bind-Up to PDF: The "Bind up Full Comic" feature automatically sequences all your pages and compiles them into a single, multi-page PDF, perfect for printing or digital distribution. ### 4. How It Works: A Look Under the Hood ComicGen is a cutting-edge frontend application built with React, TypeScript, and Tailwind CSS. It runs entirely in the browser, communicating directly with the Google GenAI API.
Character Creation: The user's input (name, personality) is sent to gemini-2.5-flash. The model returns a JSON object containing the character's introduction and a consistent visualPrompt.
Avatar & Emotion Generation: The visualPrompt is then sent to imagen-4.0-generate-001 multiple times to create the avatar and emotion images. Crucially, the prompt instructs the AI to use a vibrant green screen background.
Client-Side Magic: Using the HTML Canvas API, the application programmatically removes the green background from the emotion images, creating transparent assets on the fly without any server-side processing.
Page Generation: The user's story suggestion is combined with character data and sent to gemini-2.5-flash with a responseSchema. The model returns a perfectly structured JSON object describing the entire page layout, panels, dialogue, and unique imagePrompt for each panel.
** Panel Illustration:** The app iterates through the generated panel data, sending each imagePrompt to imagen-4.0-generate-001 to create the final artwork. Rendering: The structured data and generated images are rendered onto the interactive canvas, where the user can refine and edit every aspect of their new comic page.

Demo

Applet link

Video

Sorry for the images,my image generation limit exceeds and im not able to shoot before.

Images

Below are image that i created and download from my applet

This challenge was a fantastic exploration of how generative AI can be a powerful co-pilot in creative fields. The Gemini API, especially with its structured JSON output, felt less like a black box and more like a true, programmable partner. ComicGen is a proof-of-concept, but it demonstrates a future where anyone can bring their stories to life, regardless of their drawing ability.
Thanks for reading! Happy coding