Challenge Overview

Challenge Objectives

  • Develop Hybrid app prototype for a set of application screens
     

Project Background

  • Employee Self service application - a hybrid mobile web application to be rolled out at a large company and used by employees for self-service access to Technology requests, Project status, company events and news, managing support ticket requests and more.

Application frontend interface will be built based on the previous designs and Angular styling package.

  • In the following challenges we will develop the remaining application screens


Technology Stack

  • Cordova

  • Angular/Typescript

  • SCSS

  • HTML
     

Code access

See forums to get access to project repository. Use develop branch as base.

Marvel app designs are available at https://marvelapp.com/54ajh61 . Design resources are available in project forums. We have an existing set of styles that will be used in this project (styles based on PrimeNG) - see forums for details.

 

Individual requirements

  1. Existing screen changes
    There are 5 tickets in project repository logged for the existing screens (developed in the previous challenge). Addressing those tickets is a major requirement. Pay attention to code style and data classes requirements - submissions that don't follow these requirements will not pass review

     

  2. Dashboard screen
    This screen will show 3 sections: top card (selected in settings), my team list and 3 tabs (selected in settings).
    Screens in scope:

    - https://marvelapp.com/54ajh61/screen/42631778

    - https://marvelapp.com/54ajh61/screen/42631784

    - https://marvelapp.com/54ajh61/screen/42631783

    - https://marvelapp.com/54ajh61/screen/42631786

     
  3. Events screen
    This screen will list upcomming events (loaded from the api)
    Screens in scope:

    - https://marvelapp.com/54ajh61/screen/42631790

 
  1. News screen
    This screen will list latest company news, facebook feed posts and twitter feed (all 3 loaded from api and infinite scroll behavior)
    Screens in scope:

    - https://marvelapp.com/54ajh61/screen/42631789

    - https://marvelapp.com/54ajh61/screen/42631792

    - https://marvelapp.com/54ajh61/screen/42631791

  1. Project screens
    These screens show a list of projects (with filtering options) the user has access to and details of a specific project (details, scope, schedule, budget tabs)
    Screens in scope:

    - https://marvelapp.com/54ajh61/screen/42631759

    - https://marvelapp.com/54ajh61/screen/42631760

    - https://marvelapp.com/54ajh61/screen/42631761

    - https://marvelapp.com/54ajh61/screen/42631762

    - https://marvelapp.com/54ajh61/screen/42631755

    - https://marvelapp.com/54ajh61/screen/42631756

    - https://marvelapp.com/54ajh61/screen/42631757

    - https://marvelapp.com/54ajh61/screen/42631758

  2. Performance incentive screen
    This screen shows performance data and charts for the current user (target vs actual values for efficiency, customer experience and trend).
    Screens in scope:

    - https://marvelapp.com/54ajh61/screen/42700663

    - https://marvelapp.com/54ajh61/screen/42631794

    - https://marvelapp.com/54ajh61/screen/42631793

    - https://marvelapp.com/54ajh61/screen/42631800

    - https://marvelapp.com/54ajh61/screen/42631799

    - https://marvelapp.com/54ajh61/screen/42631798

    - https://marvelapp.com/54ajh61/screen/42631797

    NOTES:
    - you can use a library to display charts but ask for confirmation in the forums for each library (d3.js and c3 charts libraries can be used without confirmation)

 

General for all requirements

Follow the required code style and make sure there are no lint errors. All data should be loaded from json files - no entries should be hardcoded and data should be loaded from services, not just included as json in the view components (best option would be to implement the services layer and add a http interceptor that returns the data from local json files). Create and use data model classes for data/state management - using “any” data type is not acceptable. All API actions should display user feedback (loading indicator).

 

What To Submit

Submit a the full source code with Readme for application configuration, build, run, debug steps

Submit a short video overview and a link to Heroku demo



Final Submission Guidelines

Submit a the full source code with Readme for application configuration, build, run, debug steps

Submit a short video overview and a link to Heroku demo

ELIGIBLE EVENTS:

Topcoder Open 2019

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30082013