appirio-tech / topcoder-app

topcoder-app is an Angular application that contains dashboard, profile, settings, login/registration, and design submissions.
35 stars 59 forks source link

Dev Build Status QA Build Status Master Build Status

Topcoder-App

THIS REPOSITORY IS NOW DEPRECATED AS OF APRIL 19, 2022

Topcoder-App is an Angular application that contains dashboard, profile, settings, login/registration, and design submissions.

The technologies used are NPM, Webpack, ES2015, Jade, SCSS, and Angular 1.x.

Installation

We use node 5.x and npm 3.x, so you may need to download a new version of node. The easiest way is to download nvm. We have a .nvmrc file in the root of the project, so you can just run nvm use to switch to the correct version of node.

Install dependencies by running the following in the root of the project:

In order to test a logged in user, you must make an entry in your /etc/hosts file, pointing local.topcoder-dev.com to localhost. For example, open your /etc/hosts file with something like vim /etc/hosts and add 127.0.0.1 local.topcoder-dev.com.

NPM Commands

Running against Production backend

To run this App against the production backend, you should configure your system in a way that a call to local.topcoder.com redirects to localhost:3000 where the App is running. Then you just npm run start-prod, go to local.topcoder.com and use your credentials for the production web site (and, sure, be careful with what you are doing, it all will go through the production TopCoder API).

To make the mentioned configuration on Ubuntu 16.04 you:

Disclaimer: I have no idea, what setcap does here, and how safe it is, but it does the job. Feel free to add your comments / modify this section, if you know more about it. Also, if you know how to make such configuration on other OS, please add it here.

Test Users

Configuration

Notifications in the Dashboard

There's a constant VIDEO_DEFAULT_HEIGHT has been added to /app/topcoder.constants.js, the value will be used as the default height when a banner expanded.

To add a new notification, append a new configuration object to /app/my-dashboard/notifications/news.json, the configuration object has following properties:

Banners in the Dashboard

You can edit /app/my-dashboard/notifications/notifications.jade to update the banners. Element with class banner-row represents a row of banners, anchor element with class banner represents a banner, you can place as many banners as you want in a row, just make sure it have a proper appearance, all banners in one row have same width.

Recommended Developer Tools

Syntax highlighting for ES6 and React JSX

Recommended Theme

JavaScript linting

Automatic JavaScript linting in Sublime Text

Testing

The tests folder contains mock data (tests/test-helpers/mock-data.js). To run tests, use npm test.

Spec files live alongside the code they are testing. For example, in peer-review you have review-status.controller.js and review-status.spec.js in the same review-status folder.

Description of Files and Folders

app

This folder holds all of our Angular JavaScript and Jade files. Here you'll find the top level Angular app in topcoder.module.js. It has all of our submodules as dependencies (tc.peer-review, tc.account, etc.). Each submodule has its own folder, including its own Angular module declaration, e.g. peer-review/peer-review.module.js. All files are named according to their Angular component, e.g. review-status.controller.js, peer-review.routes.js.

app/services

Services live in their own folder. All services are part of the tc.services module, which is a dependency of topcoder.module.js.

assets

UI-Router and States

See any *.routes.js file as an example.

Important: Make sure the url in your routes files ends with a slash /

Contributing

Style Guide and Naming Conventions

In general, follow this AngularJS style guide, which covers JavaScript code style, JavaScript variable naming, and file naming conventions. One deviation is in the naming of services, where we follow the same pattern as controllers, e.g. UserService, ProfileService.

Pull Requests

To contribute to the repository, please create a feature branch off of the dev branch. Once you're finished working on the feature, make a pull request to merge it into dev. Then, make sure to delete the branch when it's no longer used. Further, please make sure every pull request has passed the build checks, which appears just before the "Merge pull request" button in github. We are trying to show the unit tests results as well along with the build.

Adding New Content

Jade Files

SCSS Files

JavaScript

Creating New Views/Pages