web-marketing-starter

Frame TV - Authentication portal

Frame.io's authentification portal for the AppleTV app.

Architecture

• TypeScript
• Next.js 11
• React 17
• Xstate
• PostCSS/CSS Modules

Get started

Install and run the project locally

You will have to edit your hosts file (/etc/hosts on Mac OS), in order to add the line:

127.0.0.1       local.activate.dev.frame.io

You can then run:

npm install
npm run dev

and the app will be running on http://local.activate.dev.frame.io:3000.

Build the project

SSG only

npm run export

In order to be able to build locally (npm run build), it is necessary to create the file .env.production.local and to add the line:

DEPLOY_PRIME_URL=http://local.activate.dev.frame.io:3000

Environments

environment name	url	status
develop	https://activate.dev.frame.io/
staging	https://activate.staging.frame.io/
production	https://activate.frame.io/

Analytics

The Segment implementation is done using Typewriter. A script is ran on every dev command and on every CI build to pull all the events from Segment into generated files located in src/lib/segment/generated. The only versioned file is plan.json, according to the best practices described in the Typewriter documentation. In order to run this script, you'll need the environement variable in your .env.development.local:

SEGMENT_TYPEWRITER_TOKEN = "my token"

The token can be found here. If you don't have access, please ask a workspace administrator.

Quick Links

Figma	https://www.figma.com/file/muzuhNcfNR0dWXuiGdGtfN/Apple-TV-App?node-id=83%3A9587
Jira	https://frame-io.atlassian.net/jira/software/c/projects/AAUT/boards/234
Netlify	https://app.netlify.com/sites/frame-tv-webauthportal/
GitHub	https://github.com/Frameio/frame-tv-webauthportal
Apple TV app (Github)	https://github.com/Frameio/frame-tv

State machine visualization

Notes

• The regex for the code is ^(?:(?![l1IoO0])[a-zA-Z0-9]), as per this requirement