PrincetonClubs

Full-Stack Web App Development for COS333

Role

Front-end & Middle-tier Developer

Skills

Development • UX

Team

4 developers, 1 advisor

Outcomes

Implemented my first full-stack application project.

The Problem. Princeton students struggle with decision paralysis when looking for clubs to join.

Princeton has 600+ student organizations, an enormous number that would reasonably cause decision paralysis for undergraduates, especially incoming freshmen. It’s not uncommon for students to express that they “wish they joined sooner”, because many students don’t ever encounter clubs that would otherwise be great spaces for them, or often discover them too late into their 4 years on campus. 

The Process

3. Princeton ODUS’s MyPrincetonU

This web platform by Princeton’s Office of Dean of Undergraduate Students is rarely used in practice. Its clutter of features are ones that students don’t need or that are not presented in ways most useful to them. 

4. Coffee Chats

Allow students to hear from current members about important insights like time commitment, social environment, or prerequisite skills, but offer limited time slots.

Identifying Existing Experiences

1. School-wide Emails

Instantaneous and direct, but having to sift through 100s of emails is tedious. Information, sign-up links, and event publicity often get lost in inboxes.

2. Club Fair

While great for meeting members and browsing clubs in one space, the Club Fair occurs only once a semester and not all clubs get the same visibility.

The Users

✦ Browsers

Students browsing clubs. They are always looking for new opportunities, but have trouble using numerous segmented avenues. They have busy schedules and are concerned about factors like time commitment, social environment, or career development.

Students want club searching to be a fast and efficient experience. They are willing to share their thoughts on clubs they are involved in.

✦ Club Officers

Interested in continuing a body of members and club activity by recruiting new interest. Student officers and leadership publicize clubs by sharing application links, marketing content, or events.

Clubs are concerned about garnering attention and struggle to reach people through convoluted or limited avenues. 

A New Experience

PrincetonClubs acts as an intermediary between students and clubs.

Our key value add is a new club review system which allows for students to hear from fellow undergraduates and gain insights into the characteristics of clubs that they are interested in to help better identify student organizations they prefer.

Tommy is a member of Club A, an officer of Club B, and browsing for a new club to join.

Implementation

PrincetonClubs was implemented as pictured above. Data was collected by requesting a partial-access API from Princeton ODUS, allowing our team to get necessary information without violating privacy concerns. Access to the application beyond the landing page requires Princeton CAS authentication, but screenshots are below.

Homepage

Browsers can simplify their search by filtering with club categories and sorting by Overall rating or various review metrics.

Clubs a user expressed interest in are easily accessible in the Results list.

Homepage after authentication from Landing page.

Sort and Filter panel expanded.

Overall rating is a star system.

5 review criteria were selected through user interviews, and Time Commitment was the top concern for students, thus featuring two sub-questions.

Hovering reveals the exact numbers for average and personal review.

Club Page

Displays information on a student organization. Includes description, external links, officer contacts, events, and review panel.

Clicking an event opens a detail modal with a button to the RSVP form if applicable.

Manage Clubs Page

Users will only see clubs for which they are listed as an officer, authenticated by CAS credentials and the club officer data from the ODUS API.

Officers can edit their club’s Club Page, view profiles of students that expressed interest, and manage their events.

Profile Page

The Profile also contains basic information as well as optional prompts for interests, experience, and resume. Using a student’s profile, Officers can gauge a student’s fit as a member or find their dorm information for club pick-ups.

This page also shows a record of the user’s club reviews and quick links to modify reviews.

Events Board Page

Displays all upcoming events from all different clubs in masonry layout so that event details, description, and RSVP option are all viewable.

2 sample events are displayed.

Reflection

Given that no one on the team had experience with full-stack development, it was rewarding to be able to see this project through to the end. Beginning this project, I went in with some HTML/CSS experience, but no prior experience with Python or backend and middle tier programming.

Through this project, I was able to learn valuable lessons:

  • How full applications are built and the interactions between development tiers

  • The empowering discovery that it is feasible for me, as an undergraduate student, to implement a full-stack alongside peers

  • The challenges, iterations, and backtracking involved in implementing something of this scale

  • How hard it is to think of new names for the the sheer number of functions and files that we were managing!

  • The immense importance of front end and middle tier development in building an application

Being a COS student that is more interested in interface and design, I think it was quite empowering – although tiring – to see how many frontend and middle tier related tasks piled onto our workload.

Given more time with the team, I would have liked to see the following improvements and expansions:

  • Caution when choosing development frameworks to avoid backtracking

  • Proper user research with more consistent interaction with users

  • A fully-fleshed UX and prototyping process

  • Integrating photos into many of the application’s features

  • Implementing an officer assignment function so that new officers can be given edit access

  • Work with the Princeton Office of IT to get a self-sustainable API