Table of Contents
- Deployment
- Overview
- Community Feedback
- User Guide
- Developer Guide
- Development Timeline
- The Rainbow Cards Team
- Misc. Links
Deployment
Manoa Rainbow Cards, hosted on DigitalOcean:
https://manoa-rainbow-cards.xyz/
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!):
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.
Login & Register Pages
After clicking on the login button, a login page is displayed:
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:
Sign Out Page
Upon logging out, the user will be redirected to a page confirming that they have signed out:
My Cards Page
Upon signing in with an account, the user can navigate to their My Cards 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):
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:
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:
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):
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:
Add Card Page (Admin)
Rainbow Cards can be added at the administrator-level, which will appear in a format like this:
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.
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.
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
- Created a Team Contract (4/2)
- Created a GitHub organization and home page (4/3-4/4)
- Began Issue Driven Project Management (4/3)
- Experienced a team presentation (4/4)
- Final Project Milestone #1 (4/3-4/11)
- App deployed on DigitalOcean at http://209.38.152.196/
- M1 Progress Board
- Final Project Milestone #2 (4/12-4/23)
- M2 Progress Board
- Updated app with custom domain at https://manoa-rainbow-cards.xyz/
- Final Project Milestone #3 (4/24-5/8)
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)