amgoodman5 / silver-palm-tree Goto Github PK

This project was bootstrapped with Create React App.

1. npm >= v5.2
   • Other package managers can be used so long as they are supported by Create-React-App
2. Nodejs >= v8.x
3. Two open terminals at the root of the application

1. npm install to install dependencies
2. npm start to run the React application
3. In the other terminal, npm run server to run the express server on port: 9001
4. In the browser of your choice, navigate to localhost:3000

1. The React application:
   • Uses Redux for global state management
   • Makes http requests to sibling Express server with Axios
2. The Express server (/src/server):
   • Receives http requests from the React application
   • Make http requests to public Gaia API's using Axios
3. Redux pipeline
   • Actions:
     • Dispatched by the React Application to trigger middleware and reducers
   • Middleware:
     • Listens for actions and maps them to handlers > await an http request to the express server
       • Handles success by dispatching a success action
       • Handles failure by dispatching a failure action
     • Then calls next(action) to pass the action to the reducers
   • Reducer - Handles updating application state based on certain actions

• Once the project is running, open the codebase in your editor of choice
• Navigate to /src/App.js
• Find the TODO comment in the render method
• Find the render method for <App />, you will see videoData, videoProcessing, and videoError
  • These variables are hydrated from data in the redux store which is populated on mount of <App />
  • videoProcessing - Indicates whether or not a video data request is being made
  • videoError - Is the error message, should an http request for video data fail
  • videoData - Is a video object in the form:

  videoData = {
    tileArt: string,
    seriesName: string,
    title: string,
    seasonNum: number,
    episodeNum: number,
    durationSeconds: number,
    teaser: string,
  }

1. Install and use any packages you wish
2. Add any folders and files you may need to organize your code
3. This codebase has Redux Dev tools enabled
   • Chrome Extension
4. This challenge should take ~ 2hrs

Please meet as many of the following criteria as you can in the allotted time

1. Build a <Tile /> component from videoData:

2. UI requirements:

   • All text within the video thumbnail image in the mock is part of the image used to create the mock
   • Tile container width: 420px;
   • The video title should never exceed 1 line
     • It should hide overflowing text and add an ellipse
     • (as seen next to videoData.title in the mock)
   • Format videoData.durationSeconds to (HH) hr, (MM) mins
   • Specific styles:
     • Play button - background-color: #01b4b4;
     • Play button hover - background-color: #007172;
     • Ellipse button - background-color: #5c738;
     • Ellipse hover - background-color: #44576b;
     • font family : Arial
   • Use your best approximation for spacing elements within the tile
   • For any styling that is undefined, make your best effort to preserve the sprit of the mock image above
   • OPTIONAL - add any additional UI/UX polish
     • Skipping this step will not be counted against you

3. UX Requirements:

   • Play button (>) - onClick:
     • Noop
   • Ellipse button (...) - onClick:
     • Toggle display of the video teaser (see 2 in mock)

• Does the solution satisfy the acceptance criteria?
• Understanding of React rendering lifecycle
• Effective State management
• Concise CSS
• Well-defined Component Structure