IEM ComicVerse

Overview

IEM ComicVerse was one of those projects where work felt like pure fun. I developed this website for our college's pop-culture convention—a celebration of comics, cosplay, gaming, and everything nerdy. It was a fantastic opportunity to practice full-stack development while collaborating with a team and actually shipping something live to the public.

The event took place on 19th - 20th July, 2025, and the website became the digital face of Eastern India's largest pop-culture gathering.

Why I Built This

This wasn't just another college project—it was a chance to build something real that people would actually use. I wanted to:

• Practice full-stack skills with React, Next.js, and modern web technologies
• Collaborate with a team and experience real-world development workflows
• Create something fun that matched the vibrant, energetic vibe of a pop-culture event
• Ship to production and see actual users interact with what we built

Design Philosophy

We went all-in on the funky aesthetic. The website needed to scream "pop-culture" from the moment you landed on it:

• Bold, Vibrant Colors: We ditched the safe, corporate color palettes and embraced eye-popping neons, comic-book gradients, and high-contrast combinations
• Comic-Book Inspired: Halftone patterns, speech bubbles, and action-packed typography that feels like it jumped out of a manga panel
• Playful Interactions: Buttons that bounce, sections that slide in like comic panels, and micro-animations everywhere
• The PNG Chatbot: This was the cherry on top—a quirky chatbot with a fun PNG character design that helped users navigate the event. It wasn't your typical boring chatbot; it had personality!

Key Features

Interactive Event Guide

An immersive digital brochure with a flipbook experience. Users could browse through event schedules, guest appearances, and activities just like flipping through a comic book.

Dynamic Schedule System

A fully interactive timeline where attendees could filter events by category (Gaming, Cosplay, Artist Panels, Merchandise) and add favorites to their personal schedule.

The PNG Chatbot

This was my favorite part. We built a chatbot with a custom PNG character that guided users through the site. It wasn't AI-powered (we kept it simple), but it had pre-programmed responses with personality and helped users find what they needed. The character design matched the funky vibe of the entire site.

Collaborator Showcase

A dynamic gallery highlighting artists, creators, sponsors, and brands participating in ComicVerse. Each entry had hover effects and smooth transitions.

Technical Stack

Frontend

• Next.js + React: For fast page loads and smooth client-side navigation
• TypeScript: To keep our codebase maintainable as the team grew
• Tailwind CSS: For rapid styling and consistent design tokens
• GSAP: Powering the complex animations—elements flying in, parallax scrolling, and interactive reveals
• Three.js: Subtle 3D effects that added depth without slowing down the browser

Backend & CMS

• Sanity.io: For managing event content, schedules, and collaborator information. The team could update everything without touching code.

Team Collaboration

Working with a team was a huge learning experience:

• Version Control: We used Git with feature branches and pull requests
• Task Management: Divided work between frontend, backend, content, and design
• Code Reviews: Learned to give and receive feedback constructively
• Deployment: Coordinated to push updates without breaking production

Challenges & Solutions

Challenge 1: Performance with Heavy Animations

• Problem: All those GSAP animations and Three.js effects were tanking performance on mobile devices
• Solution: Implemented lazy loading for animations, reduced particle counts on mobile, and used will-change CSS property strategically

Challenge 2: Content Updates During Event

• Problem: The team needed to update schedules and announcements in real-time during the event
• Solution: Integrated Sanity.io CMS with incremental static regeneration (ISR) in Next.js, so updates went live within seconds

Challenge 3: Making the Chatbot Feel Alive

• Problem: A static chatbot can feel robotic and boring
• Solution: Added personality through witty responses, animated the PNG character with CSS transforms, and included Easter eggs for users who asked specific questions

What I Learned

This project taught me way more than just coding:

• Full-stack thinking: Understanding how frontend, backend, CMS, and deployment all fit together
• Design matters: A fun, well-designed site gets way more engagement than a boring one
• Shipping is hard: There's a huge difference between "it works on my machine" and "it's live for thousands of users"
• Team dynamics: Communication and collaboration are just as important as technical skills

The Result

The website went live to the public and served thousands of attendees during the event. Seeing people actually use something I built—navigating the schedule, interacting with the chatbot, and sharing screenshots of the funky design—was incredibly rewarding.

It was a blast to work on, and honestly, one of the most fun projects I've done. The combination of creative freedom, team collaboration, and real-world impact made it an unforgettable experience.