Topcoder Community App
Isomorphic ReactJS App for new version of Topcoder community website. Technological stack includes:
- 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
- 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
- React CSS Modules (with
- 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 (see
topcoder-react-lib/src/services/api.js), with support of TC authentication (look for auth tokens either in
store.auth of Redux store, or in
tcjwt cookies of the front-end requests to the server);
- Stylelint for SCSS (standard Stylelint style, run with
$ npm run lint:scss;
Main Topcoder website
- Challenge Details Page is available at the endpoint
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
- Main Challenge Listing
- Member Programs Page
- Public Profile Page available at the
/members/:handle endpoint. Valid links on dev:
- 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 Hall of Fame
- TCO Scoreboard demo is mounted on
: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.
- — 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 of
- 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;
- 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 of
- Tags - Demo/test of standard tags already available in the code, and customizable with help of
- Super Themr - Test/demo of
- 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