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

• Challenge Details Page is available at the endpoint/challenges/:challengeId.
  Here are some demo links valid in production environment:
  ‌data science challenge, ‌code challenge, ‌design challenge, ‌design challenge 2, ‌design challenge 3, ‌design challenge 4.
  Here are some demo links valid in development‌ environment:
  ‌data science challenge, ‌code challenge, ‌code challenge 2, ‌design challenge, ‌design challenge 2.
• Crowd 4 Good Page
• Home
• Main Challenge Listing
• Member Programs Page
• Public Profile Page available at the /members/:handle endpoint. Valid links on dev:
  Profile 1.
  Profile 2.
• Stand-alone terms of use page: ‌simple, ‌DocuSign.
• Submission Management Page – generally available at the endpoint/challenges/:challengeId/my-submissions; the link here leads to a test challenge.
• Settings Profile Page
• Track Home Page - Development
• Member Search 1, Member Search 2, Member Search 3, Member Search 4

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

• Blockchain Community
• Cognitive Community
• Community 2
• CS community
• Demo Expert Community
• IoT Community
• Mobile Community
• QA Community
• SRMX Community
• Taskforce community
• Topcoder Product Development community
• TopGear (Wipro) community
• Veterans Community
• Zurich Community
• TCO20
• Comcast Community

Previews of Contentful Components

• ContentSlider
• Accordion
• Banner
• ContentBlock
• BlogPost
• Blog
• Quote
• Video
• Route
• Viewport
• BlogFeed
• Modal

Previews of Contentful Components with CMS SpaceName/Environment Props

• Accordion 2
• Banner 2
• Content block 2
• Quote 2
• Video 2
• route 2
• Viewport 2

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

• Accordion 3
• Banner 3
• ContentBlock 3
• Quote 3
• Video 3
• Route 3
• Viewport 3

Sandbox

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

• A simple list of all published dashboard announcements.
• CMS-related testing.

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