Manoa Rainbow Cards

UH Manoa's very own Trading Card Game!


Table of Contents

Deployment

Manoa Rainbow Cards, hosted on DigitalOcean:

https://manoa-rainbow-cards.xyz/

ci-badge

Overview

Manoa Rainbow Cards is a Trading Card Game (TCG) app where the University of Hawai’i at Manoa professors are the cards! Developed by the team at Rainbow Cards.

This TCG application aims to increase familiarity and engagement between the students and professors of the UH Manoa campus. Each professor card comes with various contact information, projects/achievements and fun facts about them, which may also be traded between users of the app. This further fosters a sense of community on campus, and helps students connect to their mentors better in a fun and engaging way!

Beyond trading, card availability is limited based on factors like the number of people who registered for the course, card waves being limited to each academic semester, and a random chance to obtain a particular card, therefore encouraging interaction and trade between users to get professor cards they want. By students of the UH campus interacting with each other, Manoa Rainbow Cards hopes to contribute toward bridging the gap between student and faculty member and unify the family of the UH system that much more.

If you are a UHM professor or mentor and would like to participate, please fill out our survey (or share it with someone who does!):

Professor Opt-In Google Form


The Manoa Rainbow Cards project implements the following technologies and resources:

Community Feedback

Below are some of the comments we have received from members of the UH Manoa community who have tested the Manoa Rainbow Cards app:

Skye Haven

“I think this app is an interesting concept. So far, it’s easy to navigate and it’s very colorful. It’s a fun way to learn about your professors and find out who else is part of the UH Manoa staff.”

Tayler

“I would have liked to see other courses each professors teach on their card. Overall, I would use this as a student and I appreciated the organization.”

Michael Lee

“I think that the website is quite good, although some parts of the website need some work. However, I enjoy the concept of the website and wish that there were more cards to trade. I would also like to see an easier trading system that would allow trading via click rather than typing out emails.”

Alex

“I think that the automated display of the professors’ cards is charming. The menu at the top is easy to navigate and has a lot of features to explore. Overall, it seems to be a pretty novel idea that could be fun to play around with.”

Nicole

“This is a very funny site where you can get to know the professors more and trade cards with others. The only issue I have is the layout. The green text on the homepage on the blurred image makes the text difficult to read. On the guide page depending on the size of the window, it can overlap with the logo. Otherwise, the website is very simple to use and fun to look through.”

Kaye

“I think this is a fun and silly way to get to know different professors, especially if you need to take one of their courses. One improvement that could be made is on the text on the portfolio page. Currently, it looks very busy, making it difficult to distinguish the class, email, and bios from each other. Besides that, I’m very excited to see what might happen.”

User Guide

A tour through our current build of the Manoa Rainbow Cards website (updated 4/23).

Landing Page

The default page for Manoa Rainbow Cards, which informs the user about the site and how users can participate.

Landing page

Login & Register Pages

After clicking on the login button, a login page is displayed: Login page

If the user does not have an account or wishes to create one, they will be able to navigate to a sign up page to register for an account: Register account page

Sign Out Page

Upon logging out, the user will be redirected to a page confirming that they have signed out: Signed out page

My Cards Page

Upon signing in with an account, the user can navigate to their My Cards page: User profile page

This page will display all of the user’s Rainbow Cards, which is planned to be customizable according to the user’s preferences. If a user has more than one of a Rainbow Card, it will be conveyed through an element like a counter. The profile may also include features like displaying which cards the user wants to trade away or collect, as well as displaying user’s interests.

Profile Search Page

Users will be able to search for other profiles, such as by account name/email (as seen below):

User profile search page

Other methods may be introduced such as searching by card, or a site suggestion feature that spotlights user profiles at random. This can help users find Rainbow Cards they want to trade for, and can match a professor’s cards to the user’s interests to help them learn more about the UH faculty.

Trade Requests Page

Users can also navigate to a page where they can view trade requests they have received:

Trade Card page

From here, users can accept or decline the offer, or navigate to the requesting user’s profile.

Card Catalog Page

Users can also view a catalog page of all Rainbow Cards in the database: Card catalog page

This page allows users to browse through the different professors’ cards, letting them find who is in the app, and figure out who they want to know more about. Card information is intended to be hidden if the owner does not own the Rainbow Card themselves.

Card Catalog Page (Admin)

Admin accounts can navigate to a page titled “Admin”, which displays the Rainbow Cards catalog with all card information visible, and with editing privileges enabled (an Edit button is added to each Rainbow Card):

Admin page

Edit Card Page (Admin)

Administrators can also edit information on any Rainbow Card. The page will appear in a similar format to adding a card:

Edit Rainbow Card page (admin privileges)

Add Card Page (Admin)

Rainbow Cards can be added at the administrator-level, which will appear in a format like this:

Add Rainbow Card page

Information like the professor’s name, an image of them, the class and semester the card is based on, the department the professor is under, their email, and a variety of fun facts and achievements can be entered.

Wishlist Page

This allows users to compile cards they wish to collect. This allows users to see other users’ wishlists and this creates an incentive to trade with other users. You are also able to remove from wishlist.

Edit Card (Professor) page

Guide Page

This page gives users instructions on how to navigate through the website including the exploration of the catalog of existing professor cards, filters by department, and wishlist.

Edit Card (Professor) page

Developer Guide

  • First, install Meteor, and GitHub Desktop.
  • Second, go to the Manoa Rainbow Cards repo, click the “Code” dropdown and clone the digits repo (i.e. using the “Open with GitHub Desktop” option).
  • Third, cd into the app/ directory of your local copy of Manoa Rainbow Cards, and install third party libraries via cmd or PowerShell:
$ meteor npm install
  • Fourth, once the libraries are installed, you can run the application by invoking the following:
$ meteor npm run start
  • Lastly, navigate to http://localhost:3000 to see the application running.

Development Timeline

The Rainbow Cards Team

About Us

Team Members

  • Daevin Bagcal
  • Benjamin Bercasio
  • Yuzuki Fujimoto
  • Elijah Saloma
  • John Serraon
  • (daevinb@hawaii.edu)
  • (bbercasi@hawaii.edu)
  • (yuzukif@hawaii.edu)
  • (esaloma@hawaii.edu)
  • (jserraon@hawaii.edu)