Forem: Ansari Gufran

Placement Panic Solver

Ansari Gufran — Sun, 01 Mar 2026 18:41:28 +0000

This is a submission for the DEV Weekend Challenge: Community

The Community

I built this for engineering students preparing for campus placements.
As a third-year B.Tech student, I’ve seen how overwhelming placement preparation can feel. Students are constantly switching between DSA sheets, aptitude books, YouTube playlists, and random notes. There’s no structured daily clarity.
Most of us don’t fail because we lack intelligence.
We fail because we lack direction and consistency.
The community I built this for is:
3rd & 4th year engineering students
Students preparing for service, product, or startup roles
Those feeling anxious and unsure what to study daily
This project was built from lived experience.

What I Built

Placement Panic Solver is a dark-themed web app that transforms placement chaos into structured daily action.
The core motto:
Reduce placement anxiety by giving students daily clarity.
🔹 Key Features

Company-Based Preparation
Students select:
Service-based companies
Product-based companies
Startup roles
The app dynamically adjusts difficulty and task distribution.
Real Daily Task Generator
DSA problems (weighted by difficulty)
Aptitude questions
Structured daily workload
Placement Heat Meter
A dynamic readiness indicator based on:
Completed tasks
Difficulty weights
Consistency bonus
Heat Levels:
0–30% → Beginner
31–60% → Progressing
61–85% → Interview Ready
86–100% → Placement Ready
Progress Analytics
Weekly completion bar chart
DSA vs Aptitude pie chart
Consistency tracking
Streak System
If 70% of daily tasks are completed → streak continues.
Miss it → streak resets.
Preparation Insights
Rule-based intelligent suggestions like:
“Increase DSA practice to improve technical readiness.”
“Great consistency! Try one higher-difficulty problem.”
The UI follows a modern dark theme with neon green accents, subtle glow effects, and clean grid spacing to create a focused and premium experience.

Demo

🔗 Live App:
👉 https://placement-panic-solver.vercel.app
🎥 Video Walkthrough:
👉 https://youtu.be/C_Y61L3gvPM

Code

💻 GitHub Repository:
👉 https://github.com/Gufran-EXE/placement-panic--solver
The project is fully open source and structured for clarity and maintainability.

How I Built It

Frontend: React + Vite
Styling: TailwindCSS (dark theme with neon glow system)
Charts: Recharts
Animations: Framer Motion
State & Storage: LocalStorage
-Core Logic
DSA and aptitude problems are structured datasets.
Each problem has a difficulty weight.
Heat score = weighted completion + consistency bonus.
All analytics are calculated dynamically and visualized in real time.
The project was intentionally scoped as a focused MVP to remain functional, polished, and meaningful within a weekend timeframe.

Final Thoughts

This project is more than a productivity tracker.
It’s a structured preparation companion built by a student for students.
Instead of asking:
“What should I study today?”
Students can now open the app and immediately know their next step.
Small clarity.
Less anxiety.
More consistency.
And hopefully, one step closer to placement success. 🚀

I Built a Journal That Rewrites Your Past (Thanks, Kiro)

Ansari Gufran — Thu, 04 Dec 2025 09:54:30 +0000

Ever written "Had coffee this morning" in your journal, refreshed the page, and found it now says "Had coffee this morning ...the void watches..."? No? Just me? Well, that's exactly what I built for the Kiroween hackathon—a horror journal where time literally breaks. Entries appear from the future with corrupted text, your old words rewrite themselves with ominous phrases, and timelines split into parallel realities. The twist? I built the entire thing in one session using Kiro IDE's spec-driven workflow. Kiro turned my 2 AM idea into 9 formal requirements, designed 11 components with complete data models, broke it into 33 sequential tasks, then helped me vibe-code the whole thing into existence. The result: 30+ files with glitch effects, timeline visualization, temporal cursor trails, and zero TypeScript errors. The best part? Kiro generated text distortion algorithms that felt genuinely creepy—reversed words, glitch characters (▇█▓), and phrases like "...time fractures..." without me explaining how to be unsettling. It just understood the vibe. Specs prevented architectural chaos, vibe coding handled execution, and together they saved me 12-17 hours of refactoring hell. The horror isn't jump scares—it's the slow realization that your interface is lying to you. And Kiro made building that betrayal terrifyingly easy.

Resurrecting IE6 as a Zombie: How Kiro IDE Transformed a Hackathon Idea into Production-Ready Code

Ansari Gufran — Tue, 02 Dec 2025 18:55:27 +0000

Some technologies fade quietly.
Internet Explorer 6 did the opposite.
It left behind a trail of broken layouts, CSS hacks, and unforgettable developer trauma.
So for the Kiroween hackathon, I asked myself a simple question:
What if IE6 came back from the dead… and it was powered by AI?
The result is Internet Explorer 6 — Zombie Edition, a fully working, AI-augmented, horror-themed parody browser reconstructed using Kiro’s spec-driven development workflow.
This is the story of how Kiro helped bring one of the most infamous browsers back to un-life.

🧛‍♂️ Why IE6? The Perfect Candidate for “Resurrection”
The hackathon theme was Resurrection: bring dead technology back to life.
And there is no piece of tech more nostalgically cursed than Internet Explorer 6.
It was:
slow
unpredictable
allergic to CSS
and somehow still important for years
Rebuilding IE6 gave me the perfect opportunity to combine:
retro UI nostalgia
AI-driven chaos
and modern development tooling
Kiro became the core engine behind all of it.
⚙️ Using Kiro: How Specs, Steering, Hooks & MCP Shaped the Project
This project was built entirely through Kiro’s spec-driven development pipeline.
Here’s how each part of Kiro shaped the build:

Specs — The Brain of the Browser
I started by writing a comprehensive spec file describing:
the IE6 chrome UI
slow-loading simulation
cursed bookmarks
random haunted events
compatibility mode “from hell”
AI Bug Exorcist panel
Kiro took this spec and generated the architecture, components, and folder structure consistently across the entire project.
Steering — Ensuring a Consistent Retro + Horror Vibe
Steering docs ensured:
authentic 2001 web aesthetics
glitch effects that feel “haunted”
personality alignment for the undead AI companion
consistent styling and component patterns
Every component Kiro generated followed the same thematic rules.
Hooks — Automatic Checks
I configured hooks that triggered:
retro CSS validation
spookiness-level linting
basic test execution
visual consistency checks

These hooks helped maintain quality as the project expanded.

MCP — Bringing AI Into the Browser The most exciting part was integrating Kiro’s MCP capability. With MCP + OpenAI, I implemented: AI Bug Exorcist An AI panel that detects layout bugs in the page and “exorcises” them with cursed commentary. AI-Generated Cursed Websites A feature where users can “summon” a brand-new haunted webpage generated on the fly. Zombie Chatbot A floating undead companion that answers user messages with glitchy, horror-themed replies. These MCP-powered interactions turned the project from a parody UI into an AI-driven experience.

🎃 Feature Highlights: What Makes Zombie IE6 Unique
👻 Authentic IE6 UI
The chrome, title bar, buttons, loading bar, and address bar recreate early 2000s Windows/IE design as accurately as possible.
🐢 Slow Loading Simulator
Pages load slowly on purpose, complete with:
progress bars that stutter
stalls at 99%
inaccurate time estimates
A perfect IE6 tribute.

🧟 Zombie Chatbot
A floating bottom-right icon opens a right-side chat panel where an undead AI responds with glitchy, spooky humor.
It uses MCP to generate short, creepy replies and adds unexpected chaotic personality to the browser.

🔥 AI Bug Exorcist Panel
This panel analyzes your current page and suggests “spooky fixes” using AI.
Sometimes it helps.
Sometimes it makes things worse.
Just like old IE debugging.
🕸 AI-Generated Cursed Webpages
Click “Summon Cursed Page” and an AI-generated haunted website appears—
complete with retro HTML, under-construction signs, visitor counters, and cursed GIFs.

💀 Secret BSOD Mode
Press the secret hotkey and…
a full-screen Windows XP Blue Screen of Death takes over for a few seconds before fading into ghost text:
“THE DEAD INTERNET NEVER DIES.”
A perfect Easter egg for demo day.

🧪 How Kiro Made This Project Possible
Without Kiro, this project would have taken weeks.
With Kiro:
Specs defined the entire architecture
Steering enforced visual and thematic consistency
Hooks kept quality stable
MCP infused the browser with AI-driven behavior
Vibe coding allowed rapid iteration, from UI to logic
Kiro didn’t just generate code —
it acted like a creative partner that understood the aesthetic, the mood, and the technical constraints.
This allowed me to focus on concept, design, and humor, while Kiro handled the heavy lifting.

🚀 Final Thoughts: Bringing the Dead Back to Life
Recreating Internet Explorer 6 in a modern, AI-augmented, horror setting has been one of the most fun technical challenges I’ve done.
It combined:
nostalgia
AI creativity
frontend engineering
custom UI
storytelling
and Kiro’s entire workflow system
IE6 may be gone from the real world…
but in this project, it rises again—
haunted, glitching, and very much alive.
And that’s the spirit of Kiroween:
bringing the forgotten back to life with code and creativity.

Building Death Dealer: How AI-Assisted Development Transformed My Halloween Horror App

Ansari Gufran — Mon, 01 Dec 2025 09:01:19 +0000

For the Kiroween Halloween hackathon, I set out to build something ambitious: an immersive, narrative-driven horror web experience where users "make a deal with the devil." The catch? I wanted it polished, production-ready, and atmospheric—not just a themed website, but a complete journey into the underworld.

The vision: A four-screen experience with custom animations, horror music, video transitions, and a cohesive dark aesthetic. The timeline: Days, not weeks.

🤖 Enter Kiro AI
Rather than spending hours on boilerplate and implementation details, I partnered with Kiro AI. My role: creative director and architect. Kiro's role: implementation partner and problem-solver.

The Development Flow

Foundation (30 minutes)

Me: "Set up Vite + React + TypeScript with Tailwind CSS.
Custom theme: blood-red (#f97373), neon-green (#39ff14),
horror font (Cinzel), dark backgrounds."

Kiro: Generates complete project structure, configs, and theme

Component Building (Iterative)

Me: "Create a landing page with graveyard background,
glitchy title, floating particles, and horror music."

Kiro: Builds LandingPage component with Framer Motion animations

Me: "Now add a 5-step form where the devil interrogates the user."

Kiro: Creates DealFlow with validation, transitions, and Enter key support

The Magic Moment

The most impressive generation was the HellGateTransition component. I described wanting "stone doors that slide open with hell light behind them." Kiro generated:

Two animated doors with realistic textures
Layered visual effects (cracks, gradients, glows)
Particle system with randomized timing
Proper cleanup and state management
When I later pivoted to a video-based transition, Kiro completely refactored the component—adding loading states, skip functionality, and error handling—without breaking anything.

💡 Key Learnings
What Worked
Specific, Actionable Requests ❌ "Make it look cool" ✅ "Add a glitch effect with x-offset, skew, and opacity variations"

Iterative Refinement Build → Test → Refine → Repeat. Each conversation built on the previous work.

Trust the AI for Implementation I focused on what I wanted, Kiro handled how to build it.

The Results
Development Speed: 3-4x faster than solo coding Code Quality: Type-safe, well-structured, production-ready Learning: Discovered new patterns and techniques from Kiro's implementations

🎯 The Technical Stack
React 19 + TypeScript - Type-safe component architecture
Vite - Lightning-fast builds
Tailwind CSS v4 - Custom horror theme
Framer Motion - Smooth animations
Vercel - One-click deployment
🚀 Real-World Impact
The final application features:

Custom skull cursors (💀 → ☠️)
Multi-step form with validation
Video transitions with loading states
Countdown timer with localStorage persistence
Optimized assets (reduced 9.6MB video to 2.8MB)
Comprehensive documentation
Live Demo: death-dealer.vercel.app GitHub: github.com/yourusername/death-dealer

🎓 Lessons for AI-Assisted Development

Be the Architect
You define the vision, structure, and user experience. AI handles implementation.
Iterate Quickly
Don't aim for perfection in one prompt. Build, test, refine.
Learn from the Output
Kiro introduced me to patterns I hadn't considered (like centralized audio control).
Focus on What Matters
Spend time on creative decisions, not boilerplate code.

🔮 The Future
AI-assisted development isn't about replacing developers—it's about amplifying creativity. With Kiro handling implementation details, I could focus on:

Crafting the perfect horror atmosphere
Designing smooth user flows
Optimizing performance
Creating comprehensive documentation
The result? A polished, production-ready application that would have taken weeks solo, built in days with AI partnership.

💭 Final Thoughts
Building Death Dealer taught me that the future of development is collaborative. Human creativity + AI implementation = faster, better results.

The question isn't "Can AI replace developers?" It's "How can developers leverage AI to build better experiences faster?"

For me, the answer is clear: Partner with AI, focus on creativity, and ship amazing products.