Media Library UI Challenge #1

CHALLENGE OBJECTIVES

• Build a React based prototype using specified material design components and icons
• Unit tests are NOT needed for the react components

 
PROJECT BACKGROUND

• We are building a media library user interface. This interface is based on React, Redux and Redux-Thunk. We provide a component library which contains the React-UI-Components and Icons that must be used for implementation.

TECHNOLOGY STACK

• React
• HTML5
• Javascript
• CSS
• Material Design

 
TECH REQUIREMENTS

• Please check https://sketch.cloud/s/JvVl0/a/JoA2Kr/play for the workflow of the prototype, design source file (Sketch format) is provided in the forum.
• 1280px width is the minimum width. The UI should be responsively scaling up. Since we are on a webpage, we do not have any height restrictions.
• As the framework React must be used.
• The provided project skeleton must be used for implementation.
• Code must be properly documented.
• The provided linting configuration must be used.
• All packages used for this implementation must be under MIT, BSD or Apache 2.0 license.
• Every defined port, host etc. should be put in central variables / configurations for easy re-configuration (if applicable).
• Ensure that the code has no linting errors in IDE (VSCode with ESLint) and on the CLI.
• Please see the attached list of preferred node_modules and stick to it. Exceptions from this list must be provided with a reason.
• Do not use unmaintained or deprecated node_modules
• Use the provided React-UI-Components and Icons. Our UI-Components and Icons are based on material-ui (see components here: https://material-ui.com/components/app-bar/), please check the showroom sample (packages/enchanted-material-ui-showroom) included in the provided base code. Make sure you only use these components and icons. Do not use any other icons or component frameworks. If icons are missing please reach out to us.
• Only create stateless functional components from react
• If types are required, add them inside packages/client/src/app/types
• Do not use type "any" if possible
• Create reusable components - split larger components into multiple smaller ones
• Do not use hard-coded strings. Use nls keys and add the EN version in packages/client/public/static/locales/en.json (see sample from packages/client/src/app/App.tsx
• No tests for locales are required - keep file "packages/client/src/app/utils/localeUtils.ts" as is
• Only use provided logger and never console.log or similar
• The design is currently only LTR (left to right). That's why there is no solid requirement how RTL (right to left) should look like. However our components already support RTL so nothing should be really broken. The requirement here is simply to check if the UI looks similar in RTL mode. So as long as nothing really breaks (e.g. grid layout is broken) this requirement would be fulfilled.

 
PREFERRED NODE MODULES

• HTTP Requests: Axios
• Logging: @enchanted/logger

 
EXPECTED RESULT

• All technical requirements are applied to the implementation
• Package.json must be tidied up and only contain used dependencies
• Package.json must distinguish between development and production dependencies
• Only stateless components are required. Do not connect to the redux-store in this challenge
• Modified AppBar: as you can see in the design the AppBar is different from the basic styling of the UI Components. Therefore there must definitely be a custom styling for the AppBar component. Please do not change anything inside the component lib. Only make adjustments in the prototype code.

 
SCREEN REQUIREMENTS
All screens from the mockup and sketch design are in scope, and your prototype must cover all the following.

• Media route with:
  • view without media items
  • view with media items
  • upload media overlay
  • media details overlay
• Collections route with all components:
  • view with collections
  • view without collections
  • create collections overview

 
BROWSER REQUIREMENTS

• Mac & Windows: Firefox (latest normal and ESR version)
• Mac & Windows: Chrome (latest)
• Windows: IE 11 (latest)
• Windows: Edge (latest)
• Mac: Safari (latest)

Final Submission Guidelines

• Full code that covers all the requirements.
• A detailed README file including information on how to setup and run your application.