Challenge Overview
Challenge Objectives
-
As part of this challenge, you need to fix the submission from our last challenge which updated the challenge listings pages to use server-side filtering.
Project Background
We are in the process of migrating many of the legacy pages of our platform to the new Community App repo based on a newer technology stack and improve the overall user experience.
Technology Stack
-
Node.js
-
JavaScript
-
React.js
Code Access
The work is to be done in the Community App repo and the Topcoder React lib repo, out of the latest commit in hot-fixes branch for the community-app and develop branch for the topcoder-react-lib.
Individual requirements
We will provide you the code from the winning submission of the last challenge which you will have to use.
You need to fix the following:
-
Update the community-app code so we can apply the patch on the hot-fixes branch.
-
When you select the "start date" from the filters, the app fetches the filtered results while the date picker is still open to select an "end date". This is a bad UX. We should fetch results when both start and end date are selected or when the date picker is dismissed and the filters have changed.
-
Make sure all tests on both repos pass.
-
There should be no warnings when loading main challenge listing page https://cl.ly/191562ee4200
-
Make sure both filtering and sorting are done on the backend.
-
If I specify the same keyword twice, it still leads to a server-side call - https://cl.ly/3373bb8daf4f. There should be no server-side call in this case.
-
When using the date filter, there are warnings on the console - https://cl.ly/c5da847ba9ec
-
Refreshing the page leads to https://cl.ly/56ce989de6db This works well without server-side rendering implementation.
-
All actions/reducers that can be reused by other apps should be moved to the topcoder-react-lib.
- There is a performance issue where we’re calling the backend multiple times unnecessarily. This needs to be fixed so we only call the backend when needed.
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 need to modify 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!
Submission deliverables
- Submit a git patch for the latest commit in the hot-fixes branch of the community-app and the develop branch of the topcoder-react-lib.
- Make sure to mention the exact commits so we can apply your patch file.
- The winner must create a PR against our repos.