Live Site: https://matchingpair.markluigibatoctoy.com

What I Learned

Building this Matching Pair game helped me strengthen my full-stack development skills using ReactJS, Next.js, and Laravel. I learned how to structure a game-based application with a clear lifecycle—from session creation to gameplay and final result handling.

On the frontend, I improved my understanding of state management, component re-rendering, and game logic handling in React. Managing flipped cards, preventing invalid clicks, tracking moves, and detecting win conditions required careful control of state and timing.

On the backend, I reinforced best practices in API design and session management using Laravel. Creating clean endpoints for session creation and game result storage made the application more structured and scalable.

This project helped me think more architecturally—separating UI logic, business logic, and persistence properly.

What I Worked On

Session Creation

• Built a Laravel API endpoint to create and initialize a new game session.
• Stored session metadata such as start time and game configuration.
• Connected the Next.js frontend to the backend via REST APIs.

Game Logic (React / Next.js)

• Implemented dynamic card shuffling and matching logic.
• Managed card states (flipped, matched, locked).
• Tracked player moves and game progress in real time.
• Prevented rapid clicks and invalid state updates.
• Detected win conditions once all pairs were matched.

Game Over / Result Page

• Displayed final statistics such as total moves and completion status.
• Sent the completed game data to the Laravel backend for storage.
• Structured routing between create session → game → result page using Next.js.

Key Takeaways

• Clean architecture improves scalability – Separating frontend interaction from backend persistence makes the system easier to maintain and expand.
• State control is crucial in interactive apps – Small mistakes in state handling can break game logic.
• Planning the flow first saves time – Defining the full lifecycle (create → play → save result) before coding reduced rework.
• API-first thinking improves structure – Designing backend endpoints early made frontend integration smoother.