Front End Onboarding Project

Instructions for creating your first Shift app

Overview

In order to get you comfortable with building a maintaining product for Shift we have a simple project for you: Build a file browser.

Estimated time to complete: 1 week

Resources needed:

API Documentation

The Front End React Archetype

• A Shift account of your own (you can request one from your manager if you don't already have one)

• A local development environment

We have a file browser in almost all of our products. Shift, MediaSilo, and Wiredrive all have file views for displaying the files uploaded by our users. Screeners has a similar feature which shows the shows and episodes available to the user. We often refer to these files as assets and they can be any number of files types including videos, images, documents. Videos, are our most common asset type.

Projects

For starters, projects are the highest level in the the file hierarchy. They are the root for any file directory. But, that's an over simplification. Projects are more than that.

Why do we call them projects instead of folders?

The primary reason for this is that it's how our customers work. Our customers are creating commercials, TV Shows, and films and when they're creating these they call them projects. If a customer is working on creating a commercial for Nike Shoes they might call it the Nike Shoe project. If they are working on the next season of Mr. Robot they might say "My next project is with with Mr. Robot". It's an industry colloquialism to describe a piece of work.

Another reason we call them projects is because they are more robust than folders and do things that folders do not like:

  • Brand customization

  • Integrations with third-party services

  • Lifecycle policies for moving and deleting files

  • User management

  • Roles and permissions

Here's an example from Shift that shows the top level of the applications file structure which we refer to as projects.

Example project view

Think of this as the tile view in Mac's finder application. These represent the top level folders, each containing files of there own.

Folders

Folders are synonymous with file system folders. They are logical containers for files and other folders. They're as simple as that.

Assets

Assets are files that are stored in projects or their folders. Assets can any number of file formats including videos, images, and documents. We call them assets because for our customers that's what they are. They are a valuable thing to our customers.

What you will build

You're going to build a file browser using your Shift account and the Shift API. The result will be in the image of the Shift file browser below:

Don't be distracted by the polish and branding of the Shift file browser. We've spent time getting it to where it is. Most importantly, you should be focused on navigating projects and folders. He are the specifics of what you need to build.

  1. List of all projects for a given workspace

  2. User clicks and gets a list of all folders and assets

  3. User clicks on asset and displays asset detail

Somethings you should focus on:

  1. Command of CSS and HTML (primarily using Flexbox)

  2. Proper nesting of components / hierarchy

  3. Proper use of network calls, local state, props

Getting Started

Our API documentation can be found here. You'll need this to interact with your Shift account for retrieving projects, folders, and assets.

You'll need the Shift Front End React Archetype. This is you'r boilerplate. You should use it to build this project.

That's it

We've all built this before. If you have questions or get hung up on anything ask your neighbor and we'll give you a hand.