Panda web app

A Kahoot-style networking card game

Nov 2021 - Dec 2021

Team:

  • Ivery Chen - UIUX design, front-end, front/back-end integration

  • Issy Hettmansperger - UIUX design, front-end

  • Mazine Sulima - Back-end

  • Oren Kohavi - Back-end, networking

  • Helen Huang - Rules page, producer

  • Omari Charles - Algorithm for allowed steps

Software used:

  • Figma

  • React

  • Javascript

  • CSS

  • GitHub

  • VSCode

Outline:

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.

How I built it:

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.

Lo-fi UI Design:

OUTCOME:

UConnect

UIUX Web Design and Front End Engineering for UConnect

Aug 2021

Design all views for the website in Figma, coded front end with html, javascript and css, and worked with a team of two back-end developers and a front-end developer