Background

The current version of DanceMatch is the MVP for a dance partner matching application. Built with Python and Django on the back end, and Vanilla JavaScript, HTML5, and CSS3 (such as it is) on the front end. I was definitely focused on learning Django and Javascript in this project.

I got the idea for this project from when I took an online HCI class from Stanford. I did some need-finding interviews with people from the local dance community early in the class, and found that many dancers wanted to practice during the week but had no one to practice with. They would take weekly classes or private lessons, and felt like they weren't progressing as well as they would with additional reinforcement between lessons. The hard part was finding someone to practice with, especially in their area, as many dancers drive a fair distance to dance in Portland.

Status

The current version of the app gives you a way to specify which dances you do and what you're working on for each, so that others may find you based on shared goals. It also lets you choose locations you are willing to travel to, so that you'll know right away if meeting with someone would be feasible for both of you. You're able to search for others based on dance and role, with an optional goal if you're specifically looking for a competition or routine partner.

The next steps for this project would be cleaning up the current funtionality: be able to view others' profiles, and automatically filter search results based on overlapping preferred locations. I'd also like to filter out the "Inactive" results, so people can leave their information up but not have it show up in searches if they're not working on it at the moment.

Most of the app is a SPA, but I'd like to get the Image Upload and New Dance forms combined as well; they are currently separate pages, so all of the data has to load again once you submit. I'd also like to let people log out.

In the future, I'd like to implement additional functionality: a simple messaging system to mask email addresses, and helping people find buddies to attend dances through a Preferred Venue model. I've heard from a number of people that it can be daunting going somewhere and not knowing anyone, and some dancers want someone (like a gym buddy) to keep them from backing out at the last minute.

Snippets

Waiting to Load

I wrapped the JavaScript in an init function so it would wait until the DOM had finished loading, but since most of the site is drawn based on what comes in from the database, I ended up with a race condition. setTimeout kept my selects from drawing before they had the data to fill in their options.

Dynamically Drawing Dropdowns

I had a lot of many-to-many models to fill in my Dance Preferences: Dance, Dance Role, Skill Level, Goal, and Activity (if you're working on this dance right now or not). In this example, I'm drawing the selects in a form for the user to edit a particular Dance Preference. To fill in each option, I saved the model data in a DM namespace and passed each one separately into the drawDropdown function. To further abstract things, I also saved a list of the models I wanted to call in DM.model_list, so I loop through each of those in drawPrefEdit.

For each item, I create an option and fill it with the name of the item, and then set the value to be the item's id, for later retrieval. I've passed in the current value to the drawDropdown so it shows up already selected. I then add the item to the parent select that has been passed in.

Sorting and Filtering

I wanted to use the built-in .sort() function in JavaScript, but it didn't allow any parameters to be passed in. I found the idea online and was unreasonably excited about it: call a function with parameters that returns a function without parameters for the .sort() to deal with.

The two things I was sorting by were the person's Name and their Skill Level. Name sorts fine alphabetically, but I had to specify to sort by the the Skill Level's id. is_ascending is based on a CSS class that is added and removed when the column header is clicked.

When all the data has been sorted and filtered, the results table is redrawn.

AJAX Create & Delete

An event listener calls onSuburbUpdate whenever a Suburb checkbox is checked or unchecked, and it sends a JSON update to the view update_suburb. This allows the user to quickly add or remove a Suburb from their list without having to reload the page.

onSuburbUpdate toggles the class "checked" in the CSS class list, in response to the user input. Then it builds a JSON update to send to update_suburb. If the Suburb is checked, the action will be "SAVE" and it will create a new instance of the PreferredSuburb many-to-many model. If unchecked, the action will be "DELETE" and will remove the existing instance.

update_suburb gets the User from the user_id, the Dancer from the User (a one-to-one relationship), and the Suburb from the sub_id, using .filter() so as to not throw a 404 error if the PreferredSuburb isn't there.

Deployment

The app was first deployed on a AWS Ubuntu server running Apache. I learned more about SSH keys and Linux commands, like how to change permissions, check the error.log file in VI in the terminal, and create aliasing for commands in .bash_profile. There was a fair amount of troubleshooting to set the paths in the .conf file to wsgi.py.

It is currently hosted on heroku with a postgres database.