Project: Musicians of Manoa

Table of Contents

• Overview
• Development Team
• Approach
• User Guide
• Developer Guide
• Development History
• Community Feedback
• Quality Assurance
• Possible Enhancements

Overview

The problem: Many UH students have musical talents, but there is no easy way for them to find others with similar tastes and compatible musical abilities. Thus, they cannot experience the fun of informal jam sessions which could progress into performing musical groups.

The solution: The Campus Jam application allows students to login and create a profile indicating their musical tastes, their musical capabilities, and their musical goals (from occasional, informal jam sessions to performing bands). The profile can also include links to YouTube videos or SoundCloud tracks with examples of their musicianship.

Development Team

Dominic Deuz
Josh Hicks
Christian Iha
Dahyun Kwon
Samantha Limon

---

Team Contract
Team Bonding
Github Organization

Approach

Once a profile is created, others can browse the profiles filtered by specific tastes, capabilities, and goals to find compatible musicians to contact.

Students can also set up notifications to find out automatically when a profile is created that satisfies criteria that they specify.

Admins can monitor the site for inappropriate content, and create new categories of musical tastes, capabilities, and goals.

Note: if you choose this idea for your final project, you cannot name it “Campus Jam”. Come up with a different name for your final project.

Website Guide

Landing Page

The landing page is presented to users when they visit the top-level URL to the site. This page presents basic information about the project and buttons that will take them to other commonly used pages.

Sign In/Sign Up

Click on the "Login" button in the upper right corner of the navbar, then select "Sign in" if you already have an account created, if not you can create an account by clicking "Sign up" instead.

The "Sign up" page allows the user to customize their profile by providing attributes such as their musical goals, instruments & experience levels, and musical tastes.

View/Edit Profile Page

Click on the "View/Edit Profile" button in the upper right corner of the navbar after logging in, User can see their own Profile page and can edit their information.

Upcoming Jams Page

After logging in, there are more links shown in the navbar: "Feed", "Create a Jam", and "Search". Hitting the "Feed" link will take you to the Upcoming Jams Page, where you can see the upcoming jam sessions available.

Search Page

There is also a "Search" link in the navbar. Hitting this link will take you to the Search page, where you can search for other profiles or jam sessions.

Profile Search Page

Clicking the "Profiles" card on the Search Page will take you to the "Profile Search Page", where users can search for other user profiles.

User's Profile and Review Creation Page

Clicking the "View Profile" Button on the Search Profiles Page will take you to the "Profile Page", where users can see detailed Profile Information and Reivews and can leave review to the user.

Jam Search Page

Clicking the "Jam" card on the Search Page will take you to the "Jam Search Page", where users can search for jam sessions hosted by other users. Also, users can attend a jam session by clicking "Attend Jam".

Attending Jams Page

Once the user clicks the "Attend Jam" button on the Jam Information Card, their jam is saved onto the "Attending Jams Page." The user can also delete this Jam session if they decide to not attend it anymore or if it's a past Jam session.

Jam Information Page

Hitting the "Create a Jam" link will take you to the Jam Information page, where you can fill in information for a musical jam session which will be posted to the website for other musicians to view.

Edit Musical Goals / Tastes / Experience Pages

Musical goals, musical tastes, and musical experience levels are all pieces of information acquired from users when creating their account. This allows jam organizers and fellow musicians to find musicians with specific skills and inclinations. For simplicity, the options for each are limited by site administrators and can be edited on this page.

Admin Dashboard Page

By clicking on the "Admin" tab in the navbar, Admins have the ability to edit experience levels, musical goals, and musical tastes. They can also view all of the signed in users.

Edit Jam Information (Admin)

Only admins have the ability to edit Jam information. They can do so by clicking the "Admin" tab in the navbar, and going to the "Edit Jams" section. Once they click on the "Edit" button, they are redirected to the "Edit Jam Information" form, which edits the existing form data.

Developer Guide

This section provides information of interest to Next developers wishing to use this code as a basis for their own development tasks.

Deployment

You can find a live deployment of the website at this link https://musicians-of-manoa.vercel.app.

Installation

First, make sure you have Node installed.
Second, visit the Musicians of Manoa GitHub page, and click the "Use this template" button to create your own repository initialized with a copy of this application. Alternatively, you can download the sources as a zip file or make a fork of the repo. However you do it, download a copy of the repo to your local computer.
Third, after having installed your local copy of the application, cd into the musicians-of-manoa directory with a command terminal and install libraries with:
$ npm install
Fourth, run the system with:
$ npm run dev If everything was successful, you will be able to view the application at http://localhost:3000

Development History

The development process for the Musicians of Manoa project conformed to Issue Driven Project Management practices. These practices include:

• Frequent Meetings: Teams should meet at least twice a week to review progress and update tasks, with face-to-face meetings preferred for better coordination.
• Task Decomposition: Work should be divided into small tasks taking approximately 72 hours to complete. Longer tasks must be broken into subtasks.
• Task Documentation and Ownership: Each task is documented as a GitHub issue with a single owner responsible for its completion. Collaboration is possible, but accountability remains with the designated owner.
• Branch-based Task Execution: Each task is associated with its own branch, named using the issue number ("issue-XX"), to reduce conflicts and ensure clear tracking. Completed branches are merged back into the main branch.
• Milestone Organization: Tasks are grouped into milestones spanning 7-10 days, each producing a concrete deliverable. Each GitHub issue is assigned to exactly one milestone.
• Active Issues Per Member: Each team member should have at least two active issues in the current milestone to ensure steady progress and task availability.
• Progress Tracking via GitHub Projects: A GitHub Project board with columns for ToDo, In Progress, and Done is created for each milestone to manage tasks visually and systematically.
• Effort Estimation: Effort is estimated in hours for each issue, based on task complexity, dependencies, and resources. Estimates are refined as experience grows.

The following sections document the development history of BowFolios

Milestone 1

The goal of Milestone 1 was to create as many mockup pages as possible of the necessary pages for our project, the group deciding building the pages using Nextjs from the start to be the easiest approach.

Milestone 1 was managed using Musicians of Manoa Project Board M1

Milestone 2

The goal of Milestone 2 is to connect as many mockup pages as possible to a PostgreSQL database. For forms, this involves ensuring that form data is correctly stored in the Prisma schema tables. For edit forms, this requires verifying that they can retrieve previously entered data and allow modifications as needed.

The pages currently connected to the database include the Jam Search(read), Jam Creation(write), Edit Jam(read and write), and Edit Goals(read) pages.

Milestone 2 was managed using Musicians of Manoa Project Board M2

Milestone 3

The goal of Milestone 3 is to refine the database connections and clean up the overall UI.

Milestone 3 was managed using Musicians of Manoa Project Board M3

Community Feedback

We are interested in your experience using Musicians of Manoa! If you have any suggestions on how we can improve the application, feel free to fill out our feedback form : Feedback Form (Google Form)

Here are some suggestions we've gotten so far from community members who have used Musicians of Manoa.

Person 1

• We were told that the overall design of the application was visually appealing. They found the Profile Info Cards in Search Page to be clear and informative. As a suggestion for improvement, they recommended adding a filter option button next to the search bar on the search pages for enhanced functionality.

Person 2

• I liked the color scheme of the website! Sticking to UH Manoa colors. The home page is well designed and looks cool. I think the user's profile could use some work, maybe if this is for musicians you could link to the person's music somehow. I like search page as well, being able to see all the profiles and events.

Person 3

• It's a cool website. I tried messing with the login stuff and it was a little broken at times, like the signing up it was a little hard to select the genres I liked. Beside that though I can see the potential in this site, it's cool. Maybe add more ways users could interact with each other like a social media website or something?

Person 4

• I really like the color scheme of the website and how well it is organized. I think adding a calendar to the Feed page would make the Jam Event Feed more clear and user-friendly.

Person 5

• It would be cool if users can add videos of their past jam sessions to show their skill. That makes their profiles more interesting. Overall, the website looks easy to use and fun to explore.

Quality Assurance

ESLint

Musicians of Manoa includes a .eslintrc file to define the coding style adhered to in this application. You can invoke ESLint from the command line as follows:

npm run lint

Here is sample output indicating that no ESLint errors were detected:

> PS E:\ICS314\musicians-of-manoa> npm run lint > > \> nextjs-application-template-1@0.1.0 lint > > \> next lint > > ============= > > WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree. > > You may find that it works just fine, or you may not. > > SUPPORTED TYPESCRIPT VERSIONS: >=4.7.4 <5.6.0 > > YOUR TYPESCRIPT VERSION: 5.6.3 > > Please only submit bug reports when using the officially supported version. > > ============= > ✔ No ESLint warnings or errors

ESLint should run without generating any errors. It's significantly easier to do development with ESLint integrated directly into your IDE (such as IntelliJ).

End to End Testing

Musicians of Manoa uses Playwright to provide automated end-to-end testing.
To run the end-to-end tests in development mode, you must first start up a Musicians of Manoa instance by invoking `npm run dev` in one console window. Then, in another console window, start up the end-to-end tests with:

npm playwright test

If the tests finish successfully, you should see the following in your second console window:

> PS E:\ICS314\musicians-of-manoa> npx playwright test > > Running 6 tests using 6 workers > 6 passed (8.4s) > > To open last HTML report run: > > npx playwright show-report

Possible Enhancements

Here are ideas for more advanced features:

• Support the organization of jam sessions. Provide information on scheduled jam sessions, including location, time, musical type, desired capabilities, and organizer contact information.
• Support a network of “who’s played with who”.
• Support reviews of musicians.