Vancouver’s Next Top Agent

Casting call application form

Most development

  • web
  • front-end
  • back-end
  • devops
  • design
  • React
  • Gatsby
  • JSX
  • ES6
  • Styled Components
  • Node.js
  • Serverless
  • DynamoDB
  • AWS
  • static
  • Lambda
  • freelance

This was a super-short-notice project with no designs or design-related direction at all. All I had to work with were a few photos, rough copy, and an outline of the data to be collected. I used an existing design owned by the client (designed by Antonio) for reference, and did the best I could in the timeline. I had help from Matsuko in terms of layout ideas and design, as well as some front-end coding.

The site is served statically, and is built with Gatsby and React. The application form talks to some Lambda functions which were built and deployed with the Serverless Framework. Data is saved to DynamoDB, and files uploaded directly to S3 via pre-signed policies. All of this, paired with the Cloudfront CDN, means the site costs virtually nothing to run and yet is extremely fast.

There also exists an admin panel written in React, which talks to more Lambda functions to retrieve the data for display.

This is the first time I used DynamoDB on a project I started from scratch; I’d previously only used it during agency work, in a pre-existing project, and that was from Python rather than Node. The single table used for this project is extremely simple, however, and so are the queries run on it, so I won’t call myself an expert yet…

This was also the first time I wrote a custom authorizer function for API Gateway, for HTTP Basic authentication for the admin panel. That alone was pretty quick and easy to get working, but CORS was a nightmare, given that the front end and admin panel are on different domains, plus separate domains again for testing. Serverless and API Gateway just don’t support multiple origins very well at all, as far as I can tell. In the end I’m not 100% satisfied with the CORS implementation – I’ll try to improve on it next time I do something similar.