Challenge Overview
Challenge Summary
Welcome to this challenge! In this challenge, we are going to develop the frontend for a new app to manage the Topcoder Talent as a Service(TaaS) offerings from the provided designs.
Project Overview
Gig Work at Topcoder is part of our “Talent as a Service” or TaaS offering. We are building a new application to manage the TaaS offerings, this will be used for creating new gig work job posting, members applying to the jobs, customers reviewing job applications, and finally assigning members to the jobs and managing feedback from both client and members.
For the development, Topcoder is moving towards the micro frontend frameworks where each app will be developed as a micro app which will be served from one frame app. The TaaS application will be one of such micro-app.
This is the first challenge in the series, so we are starting from the “my teams” & “team details” screens. In the next challenges, we will build more features.
Technology Stack
Single-spa, React Js, Javascript, Html, CSS
Browser Requirements
latest Chrome, IE 11, latest Safari, latest Firefox, latest Edge
Assets
The assets are shared in the forum.
Individual Requirements
Implement the following pages
- My Teams
- 01A My Teams.png, 01B My Teams.png
- Load teams detail from API, the response should be similar to below
Id: string
Name: string
startDate: timestamp
endDate: timestamp
weeklyCost: number
members: [
userId: uuid
]
- Remaining time: compute on the frontend based on endDate
- Load the user’s Avatar from userId in the member array
- If there are more than 4 members show as +x avatar, clicking on which should expand to show all member avatars.
- On hover of each avatar show the topcoder handle
- Click on team name should take the user to the team details screen
- Team Details
- 02A Team Details.png https://marvelapp.com/prototype/921gg0f/screen/73987506
- Create the mock API per UI
NOTE: Don’t develop the left menu and top navbar. It will be developed later as part of the micro-frontend framework.
General Requirements
- Follow the best practices from the single-spa.js
- The lint should be pass
- Please follow the provided sample app for docker, circle-ci, and build.sh
- There shouldn’t be any error in production mode deployment
- Code should be easy to follow/understand for a future developer
- Please create a mock APIs for data, please use https://www.npmjs.com/package/json-server or similar to create a separate mock data
Final Submission Guidelines
Submit the zip containing
- Full source code with detailed readme to setup, deployment.
- Verification guide