A Memory Game to enjoy this summer

This is a submission for the June Solstice Game Jam

What I Built

This is summer time, the time of joy, happiness, enjoyment, energy and mostly football.

Yeah, the World Cup is here and I love football, so I decided to make a game on it, a memory matching game with a FIFA 2026 theme. This is a game to enjoy a moment of energy and the joy of the World Cup. I tried to add FIFA-based theming and styling.

There are various elements I tried to add in the game: the legends' jerseys, Argentina's ball, hosting FC logos and many more.

To elevate the memory game formula, I introduced custom combo multipliers, rich audio triggers, and a real-time global leaderboard. This is just a small project of mine to enjoy the joy of the World Cup using a mini-game.

Video Demo

Here's a video walkthrough of game:

Code

Game is open-sourced and all code is available, you can tweak it, add more elements on it and play it.

AbhinavTheDev / card-match

⚽ Card Match — FIFA Memory Game

A fast-paced football-themed memory card matching game built with React + Vite, featuring a live global leaderboard powered by Firebase.

Built for the June Solstice Game Jam on DEV Community.

---

🎮 Gameplay

Flip cards to find matching pairs of FIFA-themed icons — FIFA Cup, Argentina Ball, Golden Boot, and more. Race against the clock and try to clear the board before time runs out.

Rules

• You have 60 seconds to match all 9 pairs (18 cards)
• Each card flip costs an attempt point on a mismatch (max 10 per pair)
• A match score is calculated as: attempts_remaining + 1 per pair
• Your final score is total_match_score × time_remaining
• Combos give bonus points for chaining specific matches

---

🛠️ Tech Stack

Layer	Technology
Framework	React 19 + Vite 8
Auth	Firebase Authentication (Google + Anonymous)
Database	Cloud Firestore
Animations	canvas-confetti
Package Manager	Bun
Styling	Vanilla

…

View on GitHub

You can play the game from here: Play Now

How I Built It

The application was built from scratch using a modern, lightweight web tech stack focusing on performance, modular design, and most importantly using Antigravity.

Technical Stack

• Frontend Core: React 19 + Vite for quick scaffolding, fast builds, and Hot Module Replacement (HMR).
• Styling: Vanilla CSS (custom design system utilizing CSS Custom Properties/Variables for state-dependent themes, glassmorphic card layouts, and transforms for flip animations).
• Backend-as-a-Service: Firebase v12 for authentication (Google Identity Provider + Anonymous sign-in) and real-time database querying (Cloud Firestore).
• Effects: canvas-confetti for lightweight confetti animation.

Technical Decisions & Challenges

1. Interactive Card Flip: Instead of relying on bulkier external visual libraries, we built custom card components with CSS 3D perspective, preserve-3d, and backface-visibility. This achieved smooth card flip animations across both mobile and desktop browsers.
2. Leaderboard Optimizations: To maintain a fast, clean leaderboard, Firestore records are queried using compound indexes sorting by score in descending order and limiting responses to the top 10 items.
3. Adaptive User Experience: The app offers a seamless transition between Guest mode and Google Auth. If a user logs in via Google, their high score, profile photo, and display name are automatically synced to Firestore; guest players can enjoy the full gameplay loop immediately without sign-in friction.

Prize Category

For this project, I am submitting to the Best Google AI Usage category. The development of this game was accelerated and optimized by pair-programming with Antigravity IDE, a powerful agentic IDE, powered by Gemini models.

How Antigravity helped me in development

• Scaffolding & Architecture: Antigravity helped architect the project layout, dividing components into focused, reusable files (such as Card.jsx, Modal.jsx, and Login.jsx) and setting up custom hooks (useConfetti.js) for visual effects.
• Firebase & Security Rules Integration: Antigravity generated the clean Firebase service wrapper (firebase.js), implementing robust asynchronous logic for Google Sign-in Popups, Anonymous logins, and Firestore read/write operations for saving scores.
• Vanilla CSS Design System: Sourcing design guidelines from the frontend design skill, Antigravity guided the implementation of modern CSS elements, introducing glassmorphism UI cards, animated overlays, custom-themed score bars, responsive media query breakpoints, and custom styled webkit scrollbars.
• Bug Prevention & Optimization: The gemini helped me to debug timing loops, handling proper interval cleanups on unmounts, and much more minor bugs.

Using Antigravity, I was able to build, style, and wire up a database-driven game in a fraction of the usual development time, showcasing the sheer power of Gemini developer tools.

Do let me know your experience with game in comments below!

Thank You For Reading.