Build Timestamp:2024-07-18T03:05:49.443Z

Topcoder Community App

Isomorphic ReactJS App for new version of Topcoder community website. Technological stack includes:

  • Autoprefixer;
  • Babel with latest JS standard support both client- and server-side;
  • ESlint (AirBnB style, run with$ npm run lint:js);
  • ExpressJS server;
  • Font loading (Roboto fonts are included into the repo);
  • General Topcoder styles (check/src/styles);
  • Hot reload of JS code and SCSS styles in dev environment (start it with $ npm run dev);
  • Loading of .svg assets as ReactJS components with babel-plugin-inline-react-svg;
  • ReactJS;
  • React CSS Modules (with babel-plugin-react-css-modules);
  • Redux with Flex Standard Actions, redux-promise middleware, and a custom pattern of server-side data fetching;
  • SCSS styles;
  • Topcoder API v2 and v3 service (seetopcoder-react-lib/src/services/api.js), with support of TC authentication (look for auth tokens either instore.auth of Redux store, or inv3jwt andtcjwt cookies of the front-end requests to the server);
  • Stylefmt;
  • Stylelint for SCSS (standard Stylelint style, run with $ npm run lint:scss;
  • Webpack;

Main Topcoder website

TCO Assets

  • TCO Hall of Fame
  • TCO Scoreboard demo is mounted on /scoreboard/:id, where :id is the competition ID, not related to the regular challenge IDs. Here are two demo links for the scoreboards for the competitions created by the scoreboard init script: ‌ID = 123, ‌ID = 1234.

Separate Topcoder Communities

Previews of Contentful Components

Previews of Contentful Components with CMS SpaceName/Environment Props

Previews of Contentful Components With environment variable override for CMS configuration.


The right place to put any experimental and proof-of-concept stuff.

Misc Examples

  • Countdown
  • — This is a part of simple PoC for CMS integration (Countentful CMS is the currently tested option);
  • Buttons — Demo/test of standard buttons already available in the code, and customizable with help ofreact-css-themr.
  • Carousel
  • Code Splitting
  • Color Mixins — Live demo of TC UI Kit color pallete;
  • CSS Modules - Demo/test of CSS modules in action;
  • Data Fetch - Demonstrates how data fetching should be implemented in isomorphic way, using Redux with Flux Standard Actions and promise;
  • Editor
  • Error Message - Demonstrates UI component for errors messaging;
  • Fonts Test - A simple showcase of the fonts included into this repo, and the test of their proper inclusion into the bundle;
  • Link Test
  • Loading Indicators
  • Markdown Rendering‌ – A component that can be passed markdown as a prop and will render it as native React elements. Also supports inlining a subset of the JSX Components found in Community App.
  • Looker‌ – Looker examples.
  • ScalableRect component makes it easy to create dynamically scaled components with fixed side ratio.
  • SVG Loading - Shows how to load.svg assets with use ofbabel-plugin-inline-react-svg.
  • Tags - Demo/test of standard tags already available in the code, and customizable with help ofreact-css-themr.
  • Super Themr - Test/demo ofreact-css-super-themr.
  • Typography - Most of Topcoder websites use the same styleguide for the design. In particular, all typography is supposed to use the set of styles from this example. For all these styles we have global mixins, which should be used whenever possible (but never modified without explicit approval).
  • Thrive Articles Feed - Demo of Thrive Articles Feed componentGigs Feed - Demo of Gigs Feed componentTCO Leaderboards Demo for TCO leaderboards componentChallenges Feed - Demo of Challenges Feed ComponentBlog Feed - Demo of Blog Feed component
  • Member Path - Path Selector — Demo for path selector component on member path page