Front-End Development for Practice Space Rental App

For the class INFO 340: Client-Side Web Development final project assignment, my team of 4 created an interactive web application to provide Seattle musicians a place to find practice spaces to rent.

Goal of Project

• Creating new web pages from scratch

• Applying iterative development and modifying existing web projects

• Writing semantically rich and accessible HTML

• Using CSS to give pages complex formatting and layouts

• Harnessing media queries and CSS frameworks to produce responsive web pages
  
  
  

Project Problem/Domain

Question of Interest

Our project wants to help musicians who are looking for practice spaces. By this, we mean a space, maybe purpose-built or maybe being repurposed, for people to practice playing music. We recognized that there is no shortage of musicians in Seattle, but many people live in apartments or other shared living spaces where they wouldn’t want to disturb their neighbors by playing.

Individual communities may have music spaces, such as the rooms in the dorm buildings on West Campus, but there is a lack of a database for spaces in the greater Seattle area. Additionally, attempts to solve this problem tend to have few, if any filters, and tend to be concentrated on one city or locality, without the ability for users to list their own free spaces.

Existing Solutions

mushRoom is a web page that connects hosts to musicians looking to rent practice areas. However, mushRoom only appears to operate in the UK and Paris, so this is not of much use to Seattle area musicians. mushRoom also handles all of the payment from the renter to the host, and charges a 15% commission while doing this.

Practice Space Seattle attempts to solve this problem by connecting Seattle musicians to rehearsal and recording spaces, venues for performances, instrument maintenance, and other useful services. However, the way this operates is through a Facebook group (which was last active in 2017).

App Description

Users

There are two different users that will be using our application and each interacts with the app in different ways. We have a ‘host’ which is a user that is advertising their practice space onto our site, and we have the ‘musician’ who is seeking out a practice space on our site.

Host users have capabilities that musician users do not, such as uploading a profile about their practice space with information such as location, cost, times to rent, current equipment, etc.

Musicians have the capabilities of creating a personal profile about themselves such as a user rating, where they are located etc. and have abilities to select music spaces for certain times and dates.

• Creating new web pages from scratch

• Applying iterative development and modifying existing web projects

• Writing semantically rich and accessible HTML

• Using CSS to give pages complex formatting and layouts

• Harnessing media queries and CSS frameworks to produce responsive web pages
  
  
  

Project Problem/Domain

Question of Interest

Our project wants to help musicians who are looking for practice spaces. By this, we mean a space, maybe purpose-built or maybe being repurposed, for people to practice playing music. We recognized that there is no shortage of musicians in Seattle, but many people live in apartments or other shared living spaces where they wouldn’t want to disturb their neighbors by playing.

Individual communities may have music spaces, such as the rooms in the dorm buildings on West Campus, but there is a lack of a database for spaces in the greater Seattle area. Additionally, attempts to solve this problem tend to have few, if any filters, and tend to be concentrated on one city or locality, without the ability for users to list their own free spaces.

Existing Solutions

mushRoom is a web page that connects hosts to musicians looking to rent practice areas. However, mushRoom only appears to operate in the UK and Paris, so this is not of much use to Seattle area musicians. mushRoom also handles all of the payment from the renter to the host, and charges a 15% commission while doing this.

Practice Space Seattle attempts to solve this problem by connecting Seattle musicians to rehearsal and recording spaces, venues for performances, instrument maintenance, and other useful services. However, the way this operates is through a Facebook group (which was last active in 2017).

App Description

Users

There are two different users that will be using our application and each interacts with the app in different ways. We have a ‘host’ which is a user that is advertising their practice space onto our site, and we have the ‘musician’ who is seeking out a practice space on our site.

Host users have capabilities that musician users do not, such as uploading a profile about their practice space with information such as location, cost, times to rent, current equipment, etc.

Musicians have the capabilities of creating a personal profile about themselves such as a user rating, where they are located etc. and have abilities to select music spaces for certain times and dates.

What will our users see?

Hosts Can view profile of musician that has requested their space (things such as their user rating, profile picture, and profile description)

Musicians Can view profiles of hosts including price, location, time of rental opening, and any equipment available at the location.

How will this help?

This app would allow musicians and hosts to post practice spaces that are available for other people to use (whether free or for a charge), and allow other users to search through them. This lets musicians find practice spaces that are convenient for them to use and fit into their schedules.

Design Draft

Using Figma the team designed basic page designs and workflow before construction of the site. We also created a brand identity by picking a color scheme and created a logo for our website.

App Draft 1

After creating the designs for our product it was time to design the project structure. We first created a static webpage using HTML and CSS to design the basic structure for all elements of the webpage.

We utilized bootstrap to style most of our elements, including the navbar bootstrap styling and image carousel structures.

Our application had 4 interactive pages:

• A landing page that displays all posted spaces

• A rental page that displays information about a specific space which also allows users to sign up to rent the selected space

• A host set up page, allowing hosts to create a profile and upload information about their space to our site

• A profile page to display information about the host and their listed spaces

App Draft 2

From the static webpage we added interactivity by creating react components and interactivity, client-side routing and navigation, and using external data.

Creating React Components and Interactivity

• Built a clear Component hierarchy that renders 2-3 levels of the DOM tree

• Components used props to pass data between components, such as space details between pages and view cards

• Components used states to keep track of any dynamic values, such as likes, amount of data, and AJAX fetching

• User login. Needed to support other interaction such as profile display

• Filter inputs influence the display of spaces, such as by price and by likes

Client-Side Routing and Navigation

• Implemented routes, to create paths of navigation that a user might take

• Used path parameters to direct users to specific rent or profile pages

Using External Data

• Connecting our app to Firebase to manage data

• Profile information is sent to the database when a profile is created and then fetched to use for displays

• Loaded the external data via an AJAX request using Promise-based fetch() function for JSON data

Final Project

KeyChange Website

Repository