Overview

Video and event production can be an exhausting job: managing multiple people from multiple different teams is no simple task. Managing a production team can be a complex and time-consuming task, which is why I developed a solution that simplifies the process and streamlines workflow. With an easy to use interface, Staffer helps production companies create detailed staff sheets quickly and efficiently, freeing up valuable time and resources that can be better spent on other aspects of the production.

This is a simple user interface I made in August to September of 2022 for setting up staff sheets for content production shoots. It’s entirely in React.

I modeled the UI for this project after some resume building platforms I’ve seen in the past. Those websites had a clear and concise layout for separating the two main components of the application: the form that populates the document on the left, and the document preview that updates live on the right.

The document template itself is a copy of the format used on old production shoots I worked on previously.

I didn’t change much for the design of either the resume builder UI or the staff sheet document since both of their designs were easy to read already and straight to the point. (If it ain’t broke, don’t fix it - right?)

Implementation

Since React allows developers to create reusable components that can be easily customized and combined to create complex interfaces, I figured it was the perfect library for creating the dynamic form components needed to populate the staff sheet.

React’s popularity and extensive ecosystem means that there is a vast range of third-party libraries and tools available that can be used to enhance the functionality of our application. It is very easy to import specific libraries for this application’s use cases instead of reinventing them from the ground up.

Styled Components

I used Styled Components for the first time in this project and it made CSS work pretty fast. At first I wasn’t really used to putting the CSS styles in the same file as the React Component, but after learning the syntax adjustments from vanilla CSS to Styled Components, I found it pretty intuitive.

I really benefitted from being able to reference the same file for styles and component functionality is that you have one spot to look at for all of one component. I didn’t notice before, but you do waste a ton of time having to jump back and forth between CSS and JS files during development. Styled Components is a pretty small but pretty impactful quality of life adjustment I recommend a lot.

File Upload

So I wanted the user to be able to upload a CSV file of all the contacts on the shoot and have the app parse it to create the PDF. react-papaparse was a super powerful in-browser solution for reading parsing the CSV files and injecting the data into the form.

The rest was just using the HTML built-in file upload API to allow the user to upload the CSV file and an Image for the production.

Every row in the CSV file has to be in the format: department name,title/role,full name,phone number,email

Formatting the CSV file that way shouldn’t be too hard if a production team already has a database of all the people working on the shoot. It just takes a bit of manipulating the columns of the sheet so each row is “department name, title/role, full name, phone, email”.

Of course, if there’s no CSV to start with or if there’s errors in the CSV uploaded, the user can always add or edit the entries in the interface on the left.

PDF Generation

For PDF Generation I used savePDF from Kendo React by Telerik. After using tons of recommendations after hours of Googling “how to export react component into PDF”, savePDF offered the easiest solution. It was really just as simple as wrapping the PDF export component around the document preview component and giving it a method to execute the export when a button is clicked.

Deployment

Deploying on Netlify was once again very easy. I had already deployed my personal website and another personal project on Netlify so the process was basically the same to deploy through GitHub.

Setting up the custom subdomain was easy to since Netlify already had my CNAME records for my personal website.

Lessons Learned

Overall this app was a good exercise in compositing different libraries and existing aspects of design into a new application that targets a specific problem. After working a bit in production, making call sheets or staff sheets by hand is really time consuming. Having one web app that can do it for me (after I format the Excel sheet a specific way and upload the CSV) really helped speed up the process a ton.