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
• 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.
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.
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:
Integrations with third-party services
Lifecycle policies for moving and deleting files
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.
Folders are synonymous with file system folders. They are logical containers for files and other folders. They're as simple as that.
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.
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.
List of all projects for a given workspace
User clicks and gets a list of all folders and assets
User clicks on asset and displays asset detail
Somethings you should focus on:
Command of CSS and HTML (primarily using Flexbox)
Proper nesting of components / hierarchy
Proper use of network calls, local state, props
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.
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.