U-Bahn Skills Share Frontend - Merge and Fixes

ReactJSSCSSHTML5NodeJS
Register
Submit a solution
The challenge is finished.

Challenge Overview

Welcome to U-Bahn Skills Share Frontend - Merge and Fixes, this is the second step of frontend development, we already run 3 challenges to create multiple modules Search, Profile, and Upload. In this challenge, we are looking for your help to merge all modules and fix the issues.

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 merge 3 modules and fix the issues listed below. To design, reference the Marvelapp link (https://marvelapp.com/8c98jb7).

1) Overall:
2) Search Filters
  • Currently, filters are hardcoded, we need to change that and get each filter data from the backend. Please take a look at the branch filter to see how this as implemented.
  • When clicking in a filter option this need be applied immediately 
  • Search in each filter will work as a filter, so if in Location user type “New” will show just “New York” bellow. This already implemented in the branch filter, please replicate this.
  • More… on load show just 10 items by a filter, then if the user clicks in More… button will load all items from that filter.
  • + Add Filter - If the user removes a filter need reflect in search results. (Example: If currently filtering by New York in Location filter, then remove the Location filter, the results will show to all Locations.
  • X filters applied need to represent the currently applied filters and not hardcoded like existing. (This was implemented in branch filter, please replicate this feature)
  • The Reset button will remove all selected filters and update the results. (This was implemented in branch filter)

3) Search Results
  • Sort By needs to be implemented. When the user change will send a new call to backend.
    • Align dropdown to last cards column
  • Profile card - Groups: Each profile need call API to get the groups /v5/groups?memberId=MEMBER_ID&membershipType=user

4) Groups
  • +Create button should be enabled only if entered search text doesn't match any existing group
  • The added new group should be added to My Groups section, not to Other Groups section
  • The groups section not fully show all groups, it should implement a vertical scroll bar if there are many groups
  • Get all groups: /v5/groups
  • To get members from a group: /v5/groups/GROUP_ID/members

5) Edit Profile
  • IE11: Add new skill or new achievement, press enter, new skill/achievement is not added, but instead the popup is closed
  • The modal should set min-height or height to show scroll, now the height will increase, if add more skill, the modal will exceed the window:
  • Skill/Achievement input should show margin-right (https://marvelapp.com/8c98jb7/screen/68842365)
  • Update the updateUser() function with API call to update the user, follow same structure received from GET request

6) Upload
  • Drag&Drop - Need to fix that feature to all browsers:
    • Chrome/Firefox: When dropping a file to drag&drop area will upload but start a download action too.
    • Safari: When dropping a file always showing Network Error
    • IE11: Drop&Down not working
  • The upload should support only XLS and CSV files, add restriction in browser popup
  • IE11 - Import confirmation result does not properly fit on the component, displaying in a single line: https://monosnap.com/direct/I8QTIGntAsZhgVtGgGqfLC6cnWUiJM 

Assets/Design
  • Please check the forum.

Important:
  • You can use the latest React
  • Focus on Desktop screen size only.
    • Min width: 1280px
    • > 1280px needs to be responsive.
  • Components must be re-usable. The component should be derived based on the configuration.  Configuration file to contain the required configurations required to render the page. 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 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

  • Updated README.txt
  • Git patch with changes
  • Winner will be request to send PR to repo

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30126024