APPENDIX D

Project Artifact

Prototypes mount by slug here, never from data.

HANDLE: project-artifact
LIVES IN: src/components/ProjectArtifacts.jsx
USED ON: Top of every chapter
PROPS: project (mounts a prototype by slug, else the screens gallery)

EXAMPLE

LIVE

As it renders.

SCREENS01 / 06

Blue Trust Loans: 404 hero · looping animation▶ AUTOPLAY · LOOP

Blue Trust Loans: 404 desktop · rocket through cloudsFIG. 02

MaxLend: 404 hero · looping animation▶ AUTOPLAY · LOOP

MaxLend: 404 desktop · UFO + Beam Me HomeFIG. 05

CODE

COPY AND PASTE

How it is called.

JSX

import ProjectArtifact from '../components/ProjectArtifacts.jsx'

<ProjectArtifact project={project} />
{/* mounts the prototype for xactflex · mobile · dashboard · reservation, else the screens gallery */}

RULES

What must stay true.

Prototypes mount by slug here, never from data.

EXAMPLESPROJECT ARTIFACT

SCREENS01 / 06

Blue Trust Loans: 404 hero · looping animation▶ AUTOPLAY · LOOP

MaxLend: 404 hero · looping animation▶ AUTOPLAY · LOOP

CODE

JSX

import ProjectArtifact from '../components/ProjectArtifacts.jsx'

<ProjectArtifact project={project} />
{/* mounts the prototype for xactflex · mobile · dashboard · reservation, else the screens gallery */}