U-Bahn Skills Share Frontend - Profile Component

Welcome to U-Bahn Skills Share Frontend - Profile 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 Profile Card and Edit modal are in the scope of this challenge.

Overall:

• Only Profile Card and Edit modal are 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) Profile Card (https://marvelapp.com/8c98jb7/screen/68842363)

• API endpoint: `/users/{userId}`
• Create a function to pass params to Profile Card component
• Available/Unavailable toggle buttons need to be implemented.
• Please ignore Rating number (right side from profile name)
• Group:
  • API Endpoint: `/groups`
  • Click in X button next with group name will remove a profile from a group
  • Click in + button will open the Add to Group popup
    • Need able to Search or Create a new group on top (API Endpoint: POST `/groups`)
    • Click in Cancel button, discard the changes and close the popup
    • Click in Done button, close the popup and apply the changes
  • Click in Edit button will open the Edit Modal popup, check details bellow

2) Edit Modal (https://marvelapp.com/8c98jb7/screen/68842311)

• IMPORTANT: Please ignore Projects Completed and Rating
• Available and Group need works like in Profile Card, reuse the components.
• Cancel button will discard all changes and close the modal
• Save button will close the modal and apply the changes
• General section are input fields
• Skills and Achievements
  • After adding text to the input field if press ENTER or COMMA will add the item to list bellow
  • In existing item need able to remove each item when clicking in X button
• Custom Attributes
  • The field name will be ready only (this coming from Company linked with profile)
  • Value need be editable
• Click in Delete this user will just close the modal for now

Assets/Design

• Please check the forum.

Important:

• You can use the latest React (please 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