Kate Spade: Unlock Your Heart - Tech Stack Questions & Answers

UYH-tech-stack-answers.md

We have developed the Kate Spade Unlock Your Heart experience in two main parts:

• a static site generated by a Vue.js app
• a serverless lambda app (hosted on now) that generates and uploads a share image and share url

The two apps live in the same git repository hosted on GitHub here: https://github.com/kingandpartners/unlock-your-heart

The Vue.js app generates and deploys the static site that lives at https://katespadeunlockyourheart.com.

• we utilized Vue.js' Single File Components to architect the primary UI/UX
• inside the .vue files we use SCSS
• there is no responsive framework used, just media queries inside the <style> tag inside the .vue files
• translations are managed inside the projects lang/ directory which contains I18n locale files for: Arabic, German, English, Spanish, and Japanese.
• when the app is built for deploy it consolidates down to one single js file:
  • https://katespadeunlockyourheart.com/js/app.js
  • this JS file will also be included into tapestry sites like https://www.katespade.com

The Serverless Lambda App lives inside the screenshooter/ portion of the repository and is deployed to now.

• performs three main tasks:
  • takes a screenshot of the customized mantra
  • generates share html
  • uploads the screenshot and the html to S3
• once complete the urls for the share html and share image are passed back for use in the Vue.js app.

We have provided GitHub access to our repository for Chris Hunt (@Chris-CreateLondon).

Inside the repository we document how to setup, run, and deploy the app. It is not containerized but should be simple to setup following instructions in the project's README.

UYH-tech-stack-questions.md

It would be helpful to get a better understanding of the underlying software stack so we can see how we can integrate it into the user experience we're building, and hopefully minimise the amount of re-development needed! Ideally we would like to know the following to make this as easy and seamless as possible:

• What technology stack is it being built on? Particularly the front-end, as we're looking to re-purpose this for our experience.

  • Could you let us know:
    • Front-end framework being used (eg: Angular, if applicable)
    • Response framework being used (eg: Bootstrap, if applicable)
    • CSS handled in native css / LESS / SASS etc. just so we know what to expect!

• What technology stack is the backend built on? This might just be helpful to know so that we can look at how the multi-lingual translations are going to be handled.

• When do you expect we'll be able to receive some working code to start adapting for our purposes?

• Based on the above, what would the local process be for running it - eg:

  • how can we deploy it to test/work with it?
  • Is it containerised in Docker for instance
  • is there some documentation we can follow?