Challenge Overview
Welcome to the GnG Integration | BlessedRock Challenge. In this challenge, we are looking for you to integrate the backend API with the existing Angular 2+ Application.
Technology Stack
- NodeJS
- Angular 7
- JavaScript
- REST
General Requirements
Data Loading & Alerts
- Use loading animation effect to show the progress when loading data.
- Sanck-bar/toast should be used to show the error, success & warning messages when data is loaded from API. It shouldn't be shown for every successful API call, use your best judgment to show these.
Code Quality
- Reuse the existing code, components, CSS, js, etc as much as possible instead of duplicating the code.
Code formatting
- Make sure code is well documented, all classes, methods, variables, parameters, return values must be documented in every single code file, and appropriate inline comments should be provided too where the code is not straightforward to understand.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- Use appropriate linter to validate your code.
Framework specific
- Use Observable & Observable.subscribe() method wherever applicable. You may refer this: https://angular.io/tutorial/toh-pt4#subscribe-in-heroescomponent
- Use Dependency Injection coding pattern.
-
ng buildshould work without throwing any error.
HTML Specific
- HTML should be valid HTML5 compliant.
- All HTML code naming should not have any conflicts or errors.
- Element and Attribute names should be in lowercase and use a '-' or camel naming to separate multiple-word classes (i.e.. 'main-content', or 'mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
CSS Specific
- Use CSS3 Media Queries to load different styles for each page. Do not build a different page for different device/layout.
- You may use SCSS in the project.
Platform
- Desktop: Chrome latest, Firefox latest (Mac & Windows), Safari latest (Mac), IE11+ (Windows), MS Edge
App Requirement
0 Resources & links
- API mappings, API details, base submission & storyboard details are provided in the challenge forum.
- Base branch is dev-int
- Storyboard
- Most of the code for
BlessedRockmodule is kept inside app/idemg folder. While integrating APIs keep all your code/updates in this folder. Avoid doing changes in other folder unless it's required.
1 Sidebar & Header
- Thess sections are already been developed. No change is required here.
2 Landing page
- ref: https://marvelapp.com/60bb4eb/screen/58636036
- Based on the API mapping doc implement these:
- Sidebar section uploaded files listing.
- Reject tab rejected files listing.
- Clicking three dots in
Uploadedtab allows a user to "Reject" a file.- Clicking restore button in
Rejectedtab puts back the file in theUploadedtab.
3 Chart on Details page
- ref: https://marvelapp.com/60bb4eb/screen/58636038
- Based on the API mapping doc implement these:
- On selecting a file from the sidebar the graph section should show three graphs.
- The width of these graph columns should be fixed. Currently, it's not. Update the existing application to make this fixed.
- On decreasing browser width a horizontal scrollbar should appear that allows the user to scroll & see these three graphs.
Reject/Re-import Datashould be implemented using API calls.- Clicking this has a toggle behavior. If it's currently in
Uploadedtab/state then it should move to theRejectedtab/state & if it's inRejectedtab/state then it should move in theUploadedtab/state.
4 Results screen
- Ref: https://marvelapp.com/60bb4eb/screen/58636040
- Based on the API mapping doc implement these:
- Clicking
Calculateon details page opens a modal to select the options.- Based on these selected options the charts on the Results page are drawn.
- Form the Results page a user can change the different configuration by checking/unchecking the checkboxes. Whenever these configurations change, send a new API request & redraw the charts based on the response received.
- The width of the graph columns should be fixed. Currently, it's not. Update the existing application to make this fixed.
- On decreasing browser width a horizontal scrollbar should appear that allows the user to scroll & see these graphs.
Final Submission Guidelines
- Full source code with all the requirements implemented.
- Detailed readme in markdown format that describes how to configure, build and run the app.
- Verification video or doc.
Licenses & attribution
- Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok. If a library is not commercial friendly you will need to get our approval first.
- Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.
FAQs
After submission as a submitter what should be my next step?
Once the challenge submission phase is over the assigned reviewers are going to review all the submissions based on the challenge scorecard. They are expected to raise all issues found in the submissions they are reviewing. After the completion of review phase the Appeal phase status. In this phase, the submitters should go to the Online Review page, select the project & have a look at the issues raised by the reviewers. If you disagree with the reviewer on any issue/comment, raise an appeal by clicking the 'Appeal' button associated with the section and entering the appeal comment.
When & where I can see the challenge results?
After the Appeal response phase is over the results are displayed on the challenge specification page as well as on the online reivew page.