Challenge Overview
Challenge Objectives:
In this challenge, we are looking to enhance the Topcode Community App. Please note work is to be done in the Community App repo (feature-my-challenges branch) and Topcoder-React-lib (feature-my-challenges branch).
Individual requirements
In this challenge, we target to change the way we filter challenges bucket - My Challenges ( https://snipboard.io/yIdWUA.jpg ). In this challenge, we are aiming to speed up the challenges listing page, we will make more changes in future, for other buckets, in follow up challenges.
- On front-end, we have My Challenges Bucket, filtering of which is done completely on client side. We have new API support added in backend and would like to utilize it to speed up the challenge listing page. API added in backend is https://api.topcoder-dev.com/v4/challenges/member - do note we need to send token along for signed in user for this API.
- The default landing page https://www.topcoder.com/challenges should also process My Challenges bucket challenges using the above API. Currently, we do filtering on main landing page for My Challenges on client side.
- Users can also land on bucket using https://www.topcoder.com/challenges?bucket=my which should use the above API response to show challenges.
- We need to cleanup all filtering logic from front-end, which does filtering for Bucket - My Challenges on client side and use the API response to show challenges for My Challenges bucket. Note: We don't make changes for filtering of the other buckets on frontend, they continue to follow current implementation.
- Make sure you follow the practice of using topcoder-react-lib, which calls our backend implementation. Take a look at how /challenges is called for reference.
- Make sure we don't break existing tests and all of them still pass.
- Make sure no lint issues.
Technology Stack
-
Node.js
-
JavaScript
-
React.js
Code Access
The work is to be done in the Community App repo (feature-my-challenges branch) and Topcoder-React-lib (feature-my-challenges branch)
Important Notes
-
You should follow the best practices established in the repository:
-
We use this stand-alone library: https://github.com/topcoder-platform/topcoder-react-lib for any actions/reducers/services of current ReactJS based app.
-
As part of this challenge submission, you also might need to improve https://github.com/topcoder-platform/topcoder-react-lib for any actions/reducers/services updates
-
Properly use Redux. Properly split code into reusable, self-contained React components, conveniently grouped inside folder structure;
-
Do not violate ESLint rules for JS code, nor StyleLint rules for SCSS;
-
Properly use babel-plugin-react-css-modules and / or react-css-themr for styling;
-
Use SCSS variables and mixins from the global stylesheets (/src/styles/_tc-styles.scss). Especially, when it relates to colors, fonts, etc;
-
Do not break existing unit tests.
-
Etc.;
Should you have any doubts, do not hesitate to ask for clarifications in the challenge forum!
Final Submission Guidelines
- Submit a git patch for each repo.
- Make sure to mention the exact commits so we can apply your patch file.
- The winner must create a PR against our repos.