Michaella Villanueva

Academia Arena: ICS Edition

Overview

For my final project in ICS 314 Software Development, I worked in a group of 6 students developing a trading cards game of the ICS department faculty members. This retro inspired game aims to bridge the gap between faculty members and students by helping students get familiar with faculty faces and learn professors interests and quirks, ultimately seeing them as a human they can talk to.

Aside from the landing page, this game has 5 pages:

  • Home Page: Users can login or create an account
  • Collection Page: Users can view the cards they own.
  • Pull for Cards Page: User can gain cards by answering quiz questions
  • Wishlist Page: Users can view all the cards in the collection and add to their wishlist
  • Marketplace Page: Users can trade their cards with other users


    • Below (from left to right) is an example of the landing page, the cards, and the home page menu.


    My Contributions

    My main task throughout this project was the Card Pull Page. This page allows the user to gather points by answering ICS-related questions, and once they reach 100 points they are able to pull for a card.

    Features:

  • React Quiz Component
  • Visual Points Bar
  • Pull Button Function
  • Card Notification Pop-Up


    • For the most part I focused on developing the Card Pull Page. Of the three main components, I struggled the most with the Pull Button Function, which once clicked randomly generates a card from the AllCards collection and adds it into the users collection. It required solid understanding of the Mongo database. For this I turned to one of my teammates for help Erin Patterson.


    Takeaways for the Future

    I am extremely proud of the collective effort of the Academia Arena team. This was my first experience doing a group coding project, and learning how to work in a group setting, organizing commits, and understanding each persons role has been an invaluable lesson. We had a bright vision for where this app could go and for the most part I think we accomplished that. One page we did not get a chance to develop was a battleground stage, but I think the foundations and ideas are there for future development.

    In terms of my software developing skills, I feel more confident in my HTML and CSS abilities. Using JavaScript and also MongoDB was a huge learning curve for me, but it is something I see myself growing into in the future.

    Academia Arena is a project that took a lot of care and dedication and I hope that it shows through.


    Our Deployed App - Academia Arena: ICS Edition

    Our GitHub Organization - Academia Arena Homepage

    Our Source Code - Academia Arena Source Code