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