METI - Case Studies Responsive Application Desktop & Tablet Prototype

Project Background
There is a considerably large amount of information about business case studies that we need to make available for users to grasp and use quickly for their business purposes. METI (Ministry of Economy Trade and Industry - government of Japan) is creating a web application from scratch to help users finding this information and interacting with it.
 
Challenge Objectives
For the purpose of this challenge, we need the community to help build the UI for the METI project using AngularJS 6 / HTML5 / CSS, we’ll provide detailed design in the forum for this challenge.
 
Technology Stack

• AngularJS 6
• HTML5
• Javascript
• CSS

 
API Integration
Although the API is not ready yet, you need to implement simple controllers to fetch the data showing in the app from JSON files. We should be able to replace the JSON files with actual API calls to integrate the app with the backend without much effort so hard coded data is not acceptable.
 
Challenge Scope
The screens listed below are in scope of this challenge. Keep reading to find out more details.
 
General Requirements

• It's very important that you check the supporting documents in the forum since they contain critical details to the implementation. Start with Supplement spec and you'll quickly understand the details of the whole app and the scope of work for this challenge.
• The data to be displayed must come from local JSON files and cannot be hardcoded. We have provided a pretty extensive list of sample jsons, use these as your base.
• Search option values should come from the spreadsheet we shared in the forum, do NOT just use some dummy values. These values don't need to be localized.
• The prototype must support localization using Angular localization best practices (for example: i18n), so that we can add other language translations easily later.
• The main content should have fluid width to fill all available space.
• This challenge will focus on making the prototype work with Desktop and Tablet browsers, however keep in mind that we’ll extend this to make it responsive in upcoming challenges, so keep your code clean and reusable.
• Pagination should work (the “Load More” feature)
• Must use Angular 6 and follow the provided design
• The pages should clearly indicate invalid input data to users, for example: if user tries to submit a page without providing a required text field, the textbox should be highlighted with an error message
• Must follow Angular best coding practices
• You are expected to create a detailed README file including information on how to setup, run and verify your application.

 
HTML Requirements

• HTML should be valid HTML5 compliant.
• Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
• Please use clean INDENTATION for all HTML code so future developers can follow the code.
• 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.
• Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.

 
Code Requirements

• Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
• Please use clean INDENTATION for all CSS so developers can follow the code.
• Do not create a single .css/.scss file for the whole app. Each component should have its own stylesheet file.
• Ensure that there are no lint errors.
• All CSS naming should not have any conflicts.
• You’re free to choose between CSS & SCSS but you need to use flex instead of float.
• Follow a clean folder structure.
• Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
• Make sure npm run build works without any errors.

 
Javascript Requirements

• All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
• Use typescript and linter for code quality

 
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, but if a library is not commercial friendly you 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.

 
Browser Requirements
Windows: IE 11+, Chrome Latest, Firefox Latest
Mac: Safari Latest, Chrome Latest, Firefox Latest
Tablets: Safari / Chrome on iPad, Chrome on Android Tablets
 
Individual requirements
Below is the list of screens that are supposed to be implemented in the prototype. Please cross compare this with the design, and if you see any inconsistencies or have any questions, raise them in the forum for clarification / confirmation.
 
05 HOME.png
06 CASE STUDIES.png
07 CASE STUDIES.png
08 CASE STUDIES.png
09 CASE STUDIES FILTER.png
10 CASE STUDIES FILTER.png
13 CASE STUDY DETAILS.png
14 CASE STUDY LIKED.png
15 CASE STUDY SHARE.png
16 CASE STUDY DETAILS.png
17 CASE STUDY DETAILS.png
19 ADD TO COLLECTION.png
20 CASE STUDY.png
23 BOOKMARK COLLECTION.png
24 BOOKMARK COLLECTION.png
27 BOOKMARK LIST.png
29 BOOKMARK LIST.png
35 CREATE COLLECTION.png
36 CREATE COLLECTION.png
37 CREATE COLLECTION.png
38 CREATE COLLECTION.png
39 SEARCH.png
40 SEARCH.png
41 SEARCH.png
42 SEARCH.png
43 SEARCH.png
44 SEARCH.png
45 SEARCH.png
46 NOTIFICATION.png
47 MY ACCOUNT.png

Please note you only have to implement the desktop screens, but you need to make them also work on tablets! Implenting the tablet specific screens is NOT IN SCOPE of this challenge.

Documentation
Register to download the following documents we provided in the forum

• Full Design
• MarvelApp Link

Final Submission Guidelines

What To Submit

• Full code that covers all the requirements.
• A detailed README file including information on how to setup and run your application.