Challenge Objectives

• As part of this challenge, you need to update 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 develop branch (on both repos).

Individual requirements

Currently, we are filtertering the challenge results on the client-side. This has led to many issues. For example, if we set very specific filters, the app will keep loading more and more challenges while only showing the ones that match the criteria which is a very bad UX.

 

As part of this challenge, you need to move the filtering from the challenge listings pages (main challenge listings + challenge listings sub-communities) on the server-side via the topcoder-react-lib.

 

You will find the Swagger definition from the Challenge API attached on the challenge forum where you can see all available filters that the API accepts.

 

The exact implementation is up (how to pass the filters from the community-app to the topcoder-react-lib) to you but you need to ensure that:

• The app is robust, runs smoothly and there are no issues

• Deep linking works without issues

• The app performs faster than the current implementation

 

Make sure all tests pass after your changes and create new tests on the topcoder-react-lib to cover the new changes.

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 develop branch of 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.

Final Submission Guidelines

Please read above