Marvel Snap Rebuild


Full-stack Developer
2 weeks
- Wordpress
- React
Solo developer working with 1 PM; responsible for full technical execution
Launching June 2025 (URL available upon release)
Problem / Goal
Marvel Snap is developed by Second Dinner, but its original website was built and hosted by Nuverse, a Bytedance-owned publisher responsible for distributing the game globally. While Second Dinner owns the game, Nuverse managed much of its online presence, including the site infrastructure, under Bytedance’s umbrella.
Second Dinner had already begun discussions with Haven Agency to rebuild the Marvel Snap website, aiming to migrate it off Bytedance’s infrastructure and bring it in-house. While the project initially had a two-month runway, the timeline had to be shortened to two weeks when news broke of a possible U.S. ban on Bytedance, set to take effect as early as April 5th, 2025. If the ban went through, the entire Marvel Snap website would potentially vanish overnight, including all content.
Because the existing site was fully hosted and controlled by Bytedance, Second Dinner had no access to the source code or content of the current site. The goal then became rebuild the entire site from scratch on Second Dinner’s infrastructure in just two weeks, ensuring total ownership, stability, and continuity.
Constraints / Challenges
- There was no source code/repo available. Everything would need to be reverse-engineered from the live site, including custom fonts, complex UI behavior, and external API interactions like a Unity-powered leaderboard.
- The site was localized in 16 languages, each with 20+ localized assets.
- Two-week delivery window due to urgency around potential ban.
- Required replicating a WordPress site with embedded React components, not headless, due to prior client frustrations with headless complexity.
- Pushed back on internal preference for managed WordPress hosting, insisting on a more efficient, cost-conscious alternative aligned with the client’s actual needs.
- Initial attempt to use WPML failed, requiring a custom localization plugin mid-project.
Process / Approach
Hosting
I fought hard early on to avoid expensive managed hosting, drawing from past experience with other Second Dinner projects, and pushed for a more sustainable AWS-based solution. Collaborated with the CTO to implement a distributed setup that supported multiple environments and plugin flexibility.
Scraping the Live Site
- Wrote a custom JavaScript DOM scraper to extract all localization strings and assets, using the CSS selector paths as a unique identifier, allowing me to map content across all 16 languages.
- Wrote a Python script to restructure the extracted translation data. Originally, each language had its own separate file with all localized strings, making it difficult to map translations across languages. I flipped the structure so that each key (e.g., link_text) contained all language variants side-by-side. This new format made it possible to automate populating the data into the new ACF fields.
- Wrote a custom JavaScript script that programmatically filled out the WordPress admin fields for each language, fields like Link Text (EN), Link Text (ES), and so on. This eliminated hours of manual copy-pasting and drastically reduced the chance of errors.
- Exported internal blog content and transformed it via Python for WordPress compatibility.
- Rewrote and rebuilt sections to ensure 1:1 visual and functional parity with the original site.
Solutions
Localization
WPML was originally chosen as the plugin to use for localization, but after attempting integration, it became clear that it wasn’t viable. WPML creates a new page and separate ACF field groups for each language, which bloats the database, clutters the admin, and breaks any hope of clean, centralized management. It also forces content editors to use a proprietary translation interface, completely disconnected from the workflow that they were already familiar with, one I’d built previously for their in-game microblog, where ACF-based content entry was fast, intuitive, and side-by-side.
I had to pivot mid-project because WPML was not working out as a solution. I ended up built a custom localization system inspired by Contentful’s multi-language setup. It kept all translations for a given field grouped together (e.g., Link Text (EN), Link Text (ES), Link Text (FR), etc), making it easy for editors to add and edit content quickly. Languages can be toggled on or off in the admin, allowing editors to hide any unnecessary information and focus on the content they are actively working on. The result was a lean, performant system that matched their existing habits and avoided the maintenance overhead WPML would have introduced.
More custom plugin details:
- String-based key/value pairs
- Contextual, with each string tied to a unique field
- Fallback to English for missing strings
- Admin visibility controls for language toggling
- Full ACF integration with helper functions
React/Wordpress Hybrid
- Integrated React using wp_enqueue_script, powered by a custom Vite build setup that injected environment-specific bundles. Since React components were non-SEO-critical, they were rendered client-side. This kept the integration lightweight and avoided over-engineering while still preserving the dynamic interactivity from the original site.
Content Management
- Created a scalable ACF-based content system that allowed full editorial control over all copy and assets.
Results / Outcome
- Site delivered on time, fully functioning across 16 languages.
- Localization parity achieved with fallback handling and simple editor controls.
- Hybrid WordPress + React structure preserved all critical frontend functionality.
- The final build visually matched the original site with near 1:1 parity, verified through detailed visual QA and manual inspection. Some intentional changes were made based on client requests, but otherwise, I preserved structure, layout, and interactivity. This level of fidelity was achieved without access to source code, every element was reconstructed from scratch using only the live site as reference.