AFSE Marvel – Collectible Heroes Platform

Author: Gabriele Firriolo

AFSE Marvel is a full-stack web platform that turns Marvel fandom into a trading-card experience. The interface contrasts dark backgrounds with vivid rarities, floating cards, and Material UI micro-interactions to keep the journey playful from the very first login.

• Responsive dashboard that surfaces album stats, quick shortcuts, and the user’s favourite hero with cinematic artwork.
• Card-first browsing with shimmering rarity badges and hover reveals for comics, events, and stories drawn from the Marvel catalog.
• Pack opening modal that mimics booster unboxing with rarity highlights and celebratory animations.

The platform was deployed to a managed cloud environment, enabling collectors to browse heroes, open packs, and manage trades on production-ready infrastructure.

1. Hero collection management – Browse, filter, and paginate through 500 pre-seeded heroes. Each entry exposes detailed lore, stats, and media pulled from Marvel’s APIs.
2. Pack economy – Purchase single or multi-packs, stash them in the inventory, and open them later. Guaranteed rare bundles ensure every pack feels rewarding.
3. Trading hub – Propose multi-hero trades, request credits, and negotiate rarities. Cards involved in trades are temporarily locked to prevent conflicts.
4. Admin console – Curate limited-time pack types, toggle availability, configure guaranteed rarities, and seed special events without redeploying.

Frontend (React + Material UI)

• Modular component library for cards, pack previews, inventory lists, and trade dialogs.
• Global user session handled via React Context to share profile, credits, and album counts without prop drilling.
• Debounced search inputs and paginated lists keep Marvel API requests lean while preserving snappy interactions.

Backend (Node.js + Express)

• RESTful services for authentication, hero catalog, pack lifecycle, trades, and admin operations.
• Structured controllers and middleware enforce role-based access (admin vs. standard user) and protect sensitive routes.
• Utility layer centralises Marvel API hashing, data normalisation, and fallback strategies for rate limits.

Data Layer (MongoDB)

• Hero documents mirror Marvel IDs and cache curated metadata to accelerate the UI.
• Package / PackageType models codify how many heroes, rarity thresholds, and pricing tiers each bundle offers.
• Trade schemas track proposed assets, credits, and state transitions pending,accepted, rejected

• Marvel API bridge computes MD5 hashes on-the-fly (ts + privateKey + publicKey) and standardises pagination (6 items per batch) for consistent UI layouts.
• JWT-based auth issues short-lived tokens at login, simplifying client-side guards and Express middleware checks.
• Secure credential storage leverages bcrypt hashing with per-user salts before persisting passwords.

1. Register a new hero collector and customise the profile.
2. Top up credits, browse the shop, and purchase both classic and guaranteed-rare packs.
3. Open boosters, celebrate new drops, and pin favourites in the album view.
4. Inspect hero details, sell duplicates, or craft multi-hero trades enriched with credits.
5. Switch to the admin account to create limited packs, toggle availability, and stress-test the moderation flows.

• Frontend: React.js, Material UI, Axios, Lodash (debounce)
• Backend: Node.js, Express, Axios, JSON Web Token, bcrypt
• Database: MongoDB with Mongoose ODM
• External Services: Marvel Developer API

• Rich trade notifications and history timelines to keep collectors informed.
• Social discovery: explore other albums, showcase legendary pulls, and follow friends.
• Scheduled clean-up jobs that retire expired packs and archive resolved trades to keep the database lean.