U-Bahn Skills Share Frontend - Upload Component

Welcome to U-Bahn Skills Share Frontend - Upload Component. In this challenge, we are looking for your help to create a desktop tool for an application for the Skills Share desktop tool.

Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!

Background:
Due to Covid-19, many people are working from home and big companies with offices that span the globe need to access people and resources for various tasks.  They would prefer to use their internal resources rather than using contractors.

U-Bahn needs a way to select people across its different businesses to locate and find people with different skill sets depending on certain needs.  The user needs to be able to search for people, groups, skills, location, availability, and be able to mark them if they want to book them for a task.

Requirements:
The scope of this challenge is to take the UI designs  (https://marvelapp.com/8c98jb7) we did for the Skills Share app and create a frontend prototype. Only the Upload page is in the scope of this challenge.

Overall:

• Only Upload the main page in the scope of this challenge, not need to create any other element/header/main page
• All data get from mock API (https://ubahn-api-dev.herokuapp.com/docs/)
• Add hover status to all links and buttons

1) Upload

• Drag&Drop need to be implemented
• If click in browse will open the default browser file selection
• If click in Download Import Template (.XLS) will download the template file
• Use this API endpoint to get file address: `/template`
• Use this API endpoint `/upload` to send the data file
• Need to show upload process (loading)
• If click in Abort button will cancel the upload and back to previous screen
• When the upload is complete, show Import Confirmation screen, check details bellow

2) Import Confirmation

• IMPORTANT: Please ignore Import Popup, instead that please show the upload results.
  • Total profiles sent
  • Total imported successfully
  • Errors
• We don’t provide a design to the status page, so please use your best judgment to keep the design feel.

Assets/Design

• Please check the forum.

Important:

• Please uses the latest React (please use this repo as a base to your submission: https://github.com/luizrrodrigues/u-bahn-app)
• Focus on Desktop screen size only.
  • Min width: 1280px
  • > 1280px needs to be responsive.
• Components must be re-usable. The component should be reusable, and configurable via their props. So DON’T just copy-paste code block, always reuse and change just what is needed)
• Use Linter, Jest, and other best practice libraries to maintain your code quality.
• Your submission must follow Best Practices, please take a look at React Docs.
• Put clear comment/documentation for all components
• Create a README.txt file that explains how to deploy your submission, structure, and commands
• Create clear documentation to set up your submission locally

Specific HTML/CSS/JavaScript Requirements:
HTML/HTML5:

• Provide comments on the page elements to give a clear explanation of the code usage. The goal is to help future developers understand the code.
• Please use clean INDENTATION for all HTML code so future developers can follow the code.
• All HTML code naming should not have any conflicts or errors.
• Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
• Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• No inline CSS styles- all styles must be placed in an external stylesheet.
• Validate your code- reviewers may accept minor validation errors, but please comment on your reason for any validation errors. Use the validators listed on the scorecard.

CSS3

• Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
• Please use clean INDENTATION for all CSS so developers can follow the code.
• All CSS naming should not have any conflicts.
• As possible use CSS3 style when creating all styling.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs), and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.

Javascript

• All JavaScript used must not have any copyrights to any third party. You are encouraged to use your own scripts, or scripts that are free, publicly available, and do not have copyright statements or author recognition requirements anywhere in the code.
• It is fine to use GPL/MIT/Open Source code. 
• You are encouraged to use your own scripts, or scripts that are free, publicly available, and do not have copyright statements or author recognition requirements anywhere in the code.

Images

• Images should be properly compressed while still having good visual quality.
• Please use best practice repetition usage of background based images.
• Please use sprites when using icons for your submission.
• Make sure your submission look sharp for Retina and Standard devices
• Wherever it makes sense, you can use icon fonts instead of images.

Web Browsers Requirements

• IE11
• Microsoft Edge
• Firefox latest version
• Safari latest version
• Chrome latest version

Final Submission Guidelines

Submission Deliverables:

• Git patch (check here how to create Git patch)
• README file contains how to deploy the submission and server environment

Final Submission:

• For each member, the final submission should be uploaded to Online Review Tool