U-Bahn Skills Share Frontend - Search

Welcome to U-Bahn Skills Share Frontend - Search. 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 “Search” screen in the scope of this challenge.

Overall:

• All data get from mock API (https://ubahn-api-dev.herokuapp.com/docs/)
• Add hover status to all links and buttons

1) Header (https://marvelapp.com/8c98jb7/screen/68842308)

• Logo - URL to logo file need be loaded via API, so will be able to change based on Company
  • API Endpoint: `/organization/:id`
• Account Menu - Deadlink for now
• Search bar
  • Need to be able to search for any attribute (name, skill, locations, etc..)
• Tab area
  • Need to be able to navigate between tabs Search, Groups, and Upload. The upload page is out of scope, so just a blank page if fine.

2) Search (https://marvelapp.com/8c98jb7/screen/68842308)

• API Endpoint: `/users`
• Cards in the main area are out of scope, this will be done in parallel with another challenge
  • Instead of a card, just show the data without style (just text is fine)
  • We’ll create a module for Cards, so the search function needs to pass data to the main area via params, so we'll be able to integrate late.
• Sort need be implemented
• Pagination needs to be implemented
• Filters
  • IMPORTANT: Please ignore Projects completed and Rating from the filter
  • Each filter needs to load data from API:
    • Skills: `/skillsProviders`
    • Achievements: `/achievementsProviders`
    • Attributes: `/attributes`
  • Need able to search in each filter, when the search will filter options below in real-time, without press ENTER
  • When click in any filter option/filter will call the backend and upload the results
  • Needs to able to collapse/expand with filter box when clicking in the arrow
  • Click on the “More…” button will load more data from each filter.
  • If click in “+ Add Filter” will show the add popup
• Add Filter - Popup (https://marvelapp.com/8c98jb7/screen/68842309)
  • Data need be loaded from API
  • Click in Cancel will discard the changes and close the popup
  • Click in Done will close the popup and apply the changes
  • If disable an active filter will be removed from search filters, so if previously selected New York in Location and then disable this filter, results will show all locations.
• Click in Reset will remove all filters and update the results based on a search done on top or show all profiles if any search was made.

3) Groups (https://marvelapp.com/8c98jb7/screen/68842312)

• API Endpoint: `/groups`
• Like the Search page, cards in the main area are out of scope, show the profile like in the search page, without styling.
• Need to be able to navigate between groups
• On top can search by group, if any group found, then enable the “+ Create” button (Deadlink for now)
  • API Endpoint: POST `/groups`
• Members count (next with group name) needs to be a real count from API data.
• Sort by need be implemented
• Pagination needs to be implemented

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