Fandom Hub

Fandom Hub is a community-driven trading platform designed exclusively for fandom, anime, and merchandise enthusiasts.

Comment

Inspiration

In many fan communities — especially anime and creative fandom spaces — buying and selling isn’t easy. Group buys can feel chaotic. Money isn’t always protected. Independent creators don’t always have a safe, structured place to sell their work. Fans often rely on scattered chats or informal spreadsheets just to coordinate.

We wanted to build something that actually helps — a simple platform where fandom communities can trade, organize, and connect more safely and smoothly. Instead of technology feeling distant, we wanted it to genuinely serve people in these niche communities.

What It Does

Fandom Hub is a community marketplace designed specifically for fandom-related buying, selling, and group coordination.

Users can:

  • Create marketplace posts with images and status tags
  • Browse listings in a clean, organized layout
  • Start or join group buys (join · full · closed)
  • View a simple profile page with a placeholder reputation system
  • Message each other to coordinate transactions

How We Built It

We built Fandom Hub using Next.js with the App Router and React.

From the beginning, we focused on building clear user flows: marketplace posts, group buys, profiles, and messaging. Even though this was a hackathon project, we didn’t want it to feel like disconnected pages stitched together — we wanted it to feel like a real product.

To keep development lightweight within the time constraint, we used browser localStorage to store posts, messages, group buys, and profile data. This allowed the app to function end-to-end without backend infrastructure.

We also implemented:

  • Dynamic routing for post detail pages
  • Shared layouts for consistent navigation
  • Image support for marketplace listings
  • Custom homepage and page backgrounds to match the fandom theme

Challenges We Ran Into

One major challenge was building multiple connected flows quickly while keeping everything coherent. Hackathon projects can easily become isolated features — we wanted posts, messaging, and group buys to feel connected.

We also faced state persistence issues. At one point, demo data would reset or overwrite itself on refresh. We had to carefully adjust our loading and saving logic to ensure consistent behavior.

Simulating transactions without real user accounts was another challenge. Since everything runs locally, we created a role-based demo flow to simulate buyer, seller, and manager perspectives on one machine.

Our biggest setback happened when a teammate accidentally deleted a large amount of unsaved work — including front page design and image assets — before pushing to GitHub. It was stressful, but we regrouped and rebuilt it together. It reinforced how critical version control and frequent commits are in team projects.

Accomplishments We’re Proud Of

Most of us were new to GitHub and collaborative development at this scale, but we learned quickly and built a working product.

This isn’t just a static prototype — it’s a functional multi-flow demo. Users can create posts, join group buys, view profiles, and move into messaging within one consistent experience.

What We Learned

We learned that designing complete user journeys matters more than building isolated features. A search bar alone isn’t meaningful — but a clear flow from discovery to coordination feels real.

We also gained hands-on experience with client-side persistence, shared state management, and Next.js routing. Learning how to use AI tools effectively — by giving clear and precise instructions — also became part of our development process.

What’s Next for Fandom Hub

The next step is turning the demo into a real multi-user platform by adding authentication, a database, and server-backed messaging.

We also plan to support secure in-app transactions, introduce ratings and seller verification, improve moderation tools, and enhance discovery with smarter search and filtering.

In the long term, Fandom Hub aims to become a trusted marketplace built specifically for niche fandom communities — and potentially expand into a full cross-platform application.

Built With

Share this project:

Updates