PANDA

a 3 weeks project, Nov 2021

Team:

Ivery Chen (UIUX, Frontend engineering, Front/backend intergration), Zigzag (UIUX, Frontend engineering), Mazine Sulima (Backend), Oren Kohavi (Backend, Networking), Helen huang (Rules page, Producer), Omari Charles (Algorithm for allowed steps)

Role:

UIUX Design

Tools:

Figma, React, Javascript, CSS

Context

Digitising a popular cardgame, in the style of Kahoot

A popular card game in Asian called Panda, but on the web! Multiplayer mode enabled to allow 4 players at a time. Real time update of changes and result.

Research

I worked on front-end back-end integration (Javascript, CSS), front-end functionality such as selecting cards and highlighting, styling, FIGMA prototype, and real time update of react components.

This game requires good integration between front-end and back-end that can render and update the page instantly for smooth gameplay; cards, the winner of the round are displayed dynamically. Back-end sends gameStatus to the front-end every second, but frequent update erases effects such as highlighting, a technical challenge I overcame.

I learnt a lot about React and how to smoothly display real-time changes on the front-end.

Process

Lo-fi UI design

Figma prototype

Process