FollowSpot

FollowSpot is a comprehensive audition tracking full stack web application for entertainment industry professionals. This application allows users to store information and media for all of their auditions while also compiling data and displaying statistics to help track their progress.

FollowSpotX

Testing

For my tests, I used Coverage.py as it allows you to see your test coverage.

  1. To run coverage, run this command:

    $ coverage run -m unittest discover.

  2. To see the coverage report, run:

    $ coverage report -m.

Features

Login and Registration

The user will create a personal account to store all of their audition information and materials. I have integrated the Twilio API to send the user an SMS message confirming their connection to the app.

Login

Audition Timeline

To develop a responsive and user friendly interface - I styled FollowSpot with Bootstrap and my own custom CSS. I provide the user with a collection of thoughtfully designed cards which contain all the information about a specific audition. My design uses Jinja templating to dynamically load the data onto individual cards, which I've sorted in reverse chronological order.

Timeline

Search Auditions

To filter through the cards, I developed a search feature by adding a JavaScript event listener that evaluates keystrokes to hide the cards that do not contain text matching the query string.

Search

Audition Input

To collect the user's data, I built a responsive form which provides intuitive prompts. The first of which is whether the audition is an initial audition or a callback. When a user clicks on the callback button, an on-click event triggers a drop down to appear with previously logged projects, which the user can then select. I implemented jQuery to auto-populate certain text fields with response data returned from my server via a get request made to my API.

Form

Location and Media

I implemented Google’s Map & Places API with their Place Autocomplete service. In addition, by integrating Cloudinary’s media management API, I am able to offer the user the option of uploading any number or type of media files pertaining to their audition.

Form2

View Media

In order to correctly populate the media table in my database with multiple files, promises returned from both my API and Cloudinary’s needed to be handled in a synchronized manner using a series of async/await fetch requests. I originally wrote this code with a series of nested fetches, but refactoring with async/await allowed me to store the responses in variables, which proved to be very helpful for debugging. Update - I now handle the media upload more securely on the backend! See the upload-cloudinary route in my server.

Media

Audition Statistics

I used the ChartJS data visualization library to build statistical representations of the user's auditions. The bar chart represents the total number of auditions logged by the user over time, while the two doughnut charts break auditions down by industry and agency. I was able to display the data by month and by year while giving each year its own color by putting the data into a nested object and parsing through it.

Stats

Data Model

SQLDBM

Looking Ahead

Moving forward, I will be continuing to develop my application’s use of the Twilio API to allow users to better share an audition card via SMS.

Future

Meet the Developer

A tenacious multi-hyphenate, I am a driven and focused problem solver who has a knack for seeing the bigger picture in any situation. I currently work for Cloudinary as a Software Engineering Tutorial Producer. From 2013-2021, I was the Senior Operations Manager at a private investment office in NYC, where I was promoted twice within the company. I have also had a successful career as a theatre, tv, film, voiceover, commercial actress and model in New York City. I hold a BFA from the UC Conservatory of Music, which accepts only the top 1% of applicants.

I am a proud, contributing member and co-founder of the mentorship program within Artists Who Code, an online community of artists in tech. In my free time, I am an adventurous world traveler who enjoys mountain biking, snowboarding, running, scuba diving, pickleball, cooking, and am happiest in hiking boots.

Connect with Jen Brissman on LinkedIn!

Troubleshooting

If you are trying to reseed the database (never do this in production), it isn't enough to drop the database. You also need to drop the schema entirely.

  • To drop the schema, execute this SQL command: drop schema public cascade;
  • To recreate the schema, execute this SQL command: create schema public;

Acknowledgments

Mentors

  • Anna Peery
  • Kerrie Yee
  • Kevin Krauss
  • Jordan Grubb
  • Yaakov Bressler

Advisors

  • Thu Nguyen
  • Kat Huber-Juma
  • Lucia Racine

Install

Running Followspot

  1. Clone this repository:

    git clone https://github.com/jenbrissman/FollowSpot.git

Optional: Create and activate a virtual environment:

pip3 install virtualenv
virtualenv env
source env/bin/activate
  1. Install dependencies:

    pip3 install -r requirements.txt

  2. Create environmental variables to hold your API keys in a secrets.sh file. You'll need to create your own Twilio and Cloudinary API keys:

    export cloud_name="create your own cloudindary name/account"
    export cloud_api_key="once you do this they will provide you a key which you will put here"
    export cloud_api_secret="use your own secret of course, shhh"
    export twilio_account_sid="create your own twilio account and enter your sid here"
    export twilio_auth_token="enter your twilio auth token here"
    export twilio_number="+15555555555 enter your assigned twilio # with the +1 format before 10 digit #"

  3. Create your database & seed sample data:

    createdb followspot
    python3 seed.py

  4. Run the app on localhost:

    source secrets.sh
    python3 server.py

GitHub

https://github.com/jenbrissman/FollowSpot