Blog March 12, 2018

How We Built a Large Scale Application System Using Craft CMS, Salesforce, Vue and Nuxt

Dave Fischoff

On February 1st, the biggest website I’ve ever worked on launched. By biggest, I mean it has more code and more web technologies working together than anything I’ve built before, and also more anticipated users. We built this site for Creative Capital, a non-profit whose mission is to support up-and-coming artists by providing project funding, mentorship, and advisory services.

Separate from Creative Capital’s main site, it’s designed and built to promote applications for their awards. Every few years, Creative Capital hosts an open application process in which they grant awards of up to $50,000 to artists, along with mentoring and advice from professionals in the field. Given the award size, the number of applicants is large—several thousand artists apply every cycle.

Creative Capital came to Familiar in hopes of updating and streamlining their application process, which involves a series of stages in which applicants submit details about themselves and their work. At each stage, the submissions are evaluated and a select group of applicants are chosen to advance to the next stage, until the award winners are determined. So, thousands of artists filling out a detailed series of applications that are in turn assigned to judges who evaluate and rank the applications until a select few are chosen…there’s a lot to keep track of.

So how did we build a system to keep track of it all? We employed a few key web technologies to do most of the heavy lifting on the project: Craft CMS, Salesforce, Vue.js and Nuxt.js. Craft is the CMS we use on most projects to manage a client’s content, and we also used it on this project to create the online registration and login system. Salesforce is a cloud database that’s free for non-profit organizations and acted as our primary database for all application data. Vue is a Javascript-based framework for building user interfaces and, when combined with Nuxt, allows pages and components to render server-side in reaction to user actions, creating a fluid, native-app like experience. To illustrate how we used each of these, I’ll take you on a short tour through an artist’s application experience, and point out how each technology comes into play…
 
The first thing an artist sees when beginning the application process is a simple Get Started form, which asks some basic questions about the project they’ll be showcasing in their application, as well as some questions to determine whether they’re eligible for an award.

Cc Get Started

This page (along with every other page on the site) is rendered using Vue.js and Nuxt.js which, when used together, allow for most of the content to be rendered server-side, eliminating the need for most pages to load in the browser, and creating a much better experience for the user. When the artist clicks the submit button on the Get Started form, a cookie is created that stores the form data they’ve just submitted (which we’ll use in the next step), and they’re taken immediately to a Registration page.

Cc Register

At this point Craft comes into play, since it’s going to handle all of the login/account functionality for all artists who register in the system. When an artist submits their registration form, a user account is created in Craft, where their email and password get stored, along with custom fields we created to save their reported demographic information. Once the artist has been added as a Craft user, a custom Craft plugin that we built takes their registration information, along with the data stored in the cookie from the Get Started page, and passes it along to Salesforce. This creates a Contact that will store all of the artist’s personal information they’ve already entered, as well as a custom Application object in Salesforce for the application information they’ll be entering later.

From here, the artist receives an automated email containing a link to activate their account. When the artist clicks the link, the browser opens a new tab with a login screen, which the artist uses to log in to the Dashboard. The Dashboard, among other things, shows a summary of the artist’s progress, and provides links to edit or review an application-in-process.

The Application Edit Screen is another great example of how Craft, Salesforce, Vue and Nuxt come together to create a streamlined experience for both the artist and Creative Capital. All of the questions are stored in a channel in Craft that Creative Capital staff can edit freely, along with additional FAQ text to help the applicant where needed. The questions channel contains several entry types, each corresponding to a different field type (plain text, rich text, dropdown, radio buttons, etc.), so new questions can be quickly and easily added to an application form. Each question entry in Craft also contains a Salesforce Field Name field, which we use in the code to relate the question in the form to a corresponding field on the Application object in Salesforce.

Cc Application

For the applying artist, Vue and Nuxt continue to provide a fluid experience as the artist fills out the form. For example, in the rich text field in the screenshot below, a Vue component keeps track of the number of words entered and provides visual feedback if the maximum number is reached. A separate Vue component keeps track of which question is currently "active" and updates the optional FAQ text in the sidebar as needed. When an artist clicks on the FAQ icon, the sidebar expands with a detailed answer, also powered by Vue. And when an artist completes an answer and clicks Save + Continue, our Nuxt setup sends the artist's answer back to our custom Craft plugin which in turn passes the answer along to the corresponding Application field in Salesforce, all of which happen behind the scenes, without interrupting the front-end experience. Instead, the artist simply advances to the next question on the screen.

Of course, there’s a lot more to the application than what I described here—artists can invite other artists to collaborate with them on the application, they can update their user information at any time, they can upload samples of their work in a range of formats, and evaluators can review, score and rank applications after they’ve been submitted—a lot more than I can go into in a single blog post! But despite the wide ranging needs that all of these features require, we built all of them with the same underlying foundation of Craft CMS, Salesforce, Vue and Nuxt.

Interested in hearing more of what we have to say?

Let’s talk
Related Work
Read Next