View on GitHub

UH Manoa Club Hub

Hub for Clubs in the UH Community

Table of contents

About UH Manoa Club Hub

UH Manoa Club Hub is a Meteor application Organizing Clubs for University of Hawaii at Manoa. When you come to the site, you’ll come to a landing page:

alt text

From the landing page, you can easily access the login page, shown below, by clicking on the login button. Everyone with a UH account can login.

alt text

This web application is featured with three different users, the students, the club administrator and the website administrator. And different authorization goes to different users. When you log in as a student, you will go to your student homepage (shown below). On top of the page, it will list all the clubs, which you are in. It’s then followed by the comming events of your clubs.

alt text

By clicking the “Browse Clubs” tab on the Menu of student homepage, you will go to club List page (shown below), which will contain all clubs available in University of Hawaii at Manoa. And this page is feaured with a interest search at the top of the page.

alt text

If you login with a club administrator’s account, you will go to the founder’s admin page, shown below. This page is a channel where you can access all the clubs you created. And it will also allow you to create a new club by clicking on the card, with “+” sign in it.

alt text

The following is the create club page. To create a club, you simply need to fill in all the required information and then click submit.

alt text

To modify the information of an existing club, you can click on the edit button on the bottom of the club card.And it will look like this:

alt text

This page will show the events you’ve created, followed by your club info. To modify the events, you can simply click on the event card, then it will lead you modify event page. To create a event, you click at the card with “+” in it, and it will take you to a separate page which allow you to add more events.

The create event page and edit event page are both shown below:

alt text

alt text

To have a better control of the website, someone can log in with a site administrator login. this type of user can go the site admin page, shown below. And they will have the authority to hide or delete a club.

alt text

Installation

  1. Install Meteor.

  2. clone UH Manoa Club Hub project using git.

  3. cd into the app/ directory and install libraries with:

> meteor npm install
  1. run the system with:
> meteor npm run start

If you successfully run it, you will see the following in your prompt.

alt text

And the application will appear at http://localhost:3000.

Application Design

Directory structure

This App is designed with meteor 1.4. And we also follow the Meteor 1.4 Application Structure guideline, for which we used an import/ directory in the app/ directory to hold our code. The structure of the app/ directory are shown below.

client/
  lib/           # holds Semantic UI files.
  head.html      # the <head>
  main.js        # import all the client-side html and js files. 

imports/
  api/           # Define collection processing code (client + server side)
    club/
    event/
  startup/       # Define code to run when system starts up (client-only, server-only)
    client/        
    server/ 
    both/
  ui/
    layouts/     # Layouts contain common elements to all pages (i.e. menubar and footer)
    pages/       # Pages are navigated to by FlowRouter routes.
    stylesheets/ # CSS customizations, if any.

node_modules/    # managed by Meteor

private/
  database/      # holds the JSON file used to initialize the database on startup.

public/          
  images/        # holds static images for landing page and predefined sample users.
  
server/
   main.js       # import all the server-side js files.

Development History

Milestone 1

The goal of Milestone 1 was to create mockup HTML pages for the various pages that will be a part of UH Club Hub.

Milestone 1 consisted of 10 issues, and was managed via the uhclubhub GitHub Project M1..

alt text

And we also use projects feature on github to do the progress management.

alt text

So when ever we have an added issue, we will add it in the “Backlog” column, when we are working on a issue, we add it to the “In Progress” column, and when we are done, we close it and add it to the “Done” column. This keep our progress organized. By knowing what is done and who is working on what, it will be easier for the members to decide what to do first.

The pages we created for this milestone includes:

Milestone 2

Milestone 2 was started on April 13, 2017 and ends on April 25, 2017. The goal of Milestone 2 is to finish unfinished mockup pages and improve already existing ones, implement UH CAS authentication, and create the Collection for the Clubs. The Gitbub issue page of this mile stone is shown here. And it’s progress is being managed here.

The mockup pages created includes:

In this issue, we

  1. created the club collection in /imports/api/.
  2. create an initialization file, club.js in /imports/startup/server/
  3. modified the browse-club-page.html and browse-club-page.js to link the content from collection, and allow the club in the database to show up iteratively.

Milestone 3

Milestone 3 was started on April 27, 2017 and ends on May 9, 2017. And at the end of this mileston, we’ve accomplished the following:

Milestone 3’s issues are assigned here. And the project progress is being managed here. At the end of the milston we’ve closed all of the previously designed issues, except issue 20, create/edit event. The following are the screenshots of the milestone 3 issues and project progress.

Initial User Testing

In order to do an initial user testing, I asked 5 students to test out my project. I didn’t tell them much about this website is about, since being self-explanatory should also be part of the testing. I told them to goto my host to check out the site and tell me about what they like or what could be improved. And the following are the responds from them.

Yunping (senior, major in Business):

“The layouts are nice, but I’m so consuded with what this site is about. I think you should have an About page, which can tell the user what this site provide us, and what we can do about it. “

Jinping (senior, major in Business):

” Join Club is not doing anything. More information about the club would be expected. “

Jipeng Huang (senior, major in computer Science):

“This app doesn’t seem to be well designed for mobile devices. I tried you link and image of the landing page was not well proportioned, and I can only see part of the menu. The homepage looks weird as well, and I cannot logout “

Lookuang (Senior, major in Art):

“I don’t exactly know what what this site provide me. You probably need a user guide. “

Haihong (Senior, major in Japanese):

“I wasn’t sure where the homepage was initialy. When I click on UH Manoa ClubHub in the menu, it was not found. I’m pretty sure it showed up when I’ve just login. “

In conclusion, user responds told us that we should complete the functionalities, and make sure every link works; we should improve our UI design to make sure they work well more mobile devices as well; and we need an userguide page at least for the first time users.

Galaxy Deployment

The link to our galaxy deployment is http://uhclubhub.meteorapp.com/