Challenge Overview
Challenge Summary
Welcome to "HP Data Quality ETL App UI Prototype Challenge". We want to build an Extract Transform and Load (ETL) application that will allow user to moves data between a source file or database and a destination directory or database. The goal of this challenge is to create the HTML5 Prototype for an application using the provided Data Quality ETL storyboards. The prototype must follow our standards and our guidelines. Review the details below.
The main task of this project is to create the HTML5 UI Prototype based on the provided Storyboard design by using industry standard best practices. As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JavaScript code functions and make it easier for future developers and the client to understand what you have built.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Competition Task Overview
The main task of this competition is to develop HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Background Overview
The HP Data Quality team is tasked with moving large amounts of data on a regular basis. They would like to create an "Extract Transform and Load" (ETL) tools that allows them to move file and relational data on a regular basis and create a monitoring service which can display the status of the currently scheduled and recently completed jobs. Often they are moving data between regular and HDFS file systems.
The application will need to handle the following data source types:
- Fixed Width Text Files
- Delimited Text Files (such as csv files)
- JSON Files
- XML Files
- Excel Files
- Relational Databases (Oracle, SQL Server, MySQL)
- Columnar Databases (Redshift and Vertica)
- NoSQL Databases (MongoDB)
- Hadoop Databases (Hive)
- Etc (for future consideration..)
General Requirements
- Replicate the design of the approved Storyboards (PSD Files) for all pages.
- Your pages must match the colors and structure of the provided storyboards.
- Provide hover and active condition for all link and buttons
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML and CSS Validation error and warning.
- Test in all the required browsers.
- Provide all hover and active state for buttons and links.
Screen Requirements
NOTE: There will be 2 kind of users that will use this apps (User and Admin), each user share similar features in the app but we needs each roles to have their own prototype screens:
00. Login Screen
WF Reference: Login
Storyboard Reference: 00-1-Login.png, 00-2-Login_error.png
- This tool will have both ETL capabilities and job monitoring capabilities.
- Users will log into the tool to see all the jobs that are currently scheduled as well as those in the future.
- Provide screen interactions when user enter wrong credential.
01. Dashboard Screen
WF Reference: Dashboard-user (User) and Dashboard-admin (Admin)
Storyboard Reference: 01-1-Dashboard_Grid.png to 01-7-Dashboard_info_hover.png
- Default screen after user successfully login to the apps.
- From this screen, user can open a project to find the job details and create jobs.
- Admin Users will have visibility to all Projects and Jobs in the System whileNormal User will only have access to their own projects and jobs.
- Show summary of all activity in the apps, such as:
-- Summary of total Projects available in the app (change text in the storyboard from “Total Projects” to simply “Projects”)
-- Summary of total Jobs available in the app (change text from “Total Jobs” to simply “Jobs”)
-- Running Execute Job (change label here from “Running Execute Jobs” to “Currently Running Jobs”)
-- Upcoming Job (change label here from “Upcoming Job” to “Upcoming Jobs”)
-- Completed Job (change label here from “Completed Job” to “Completed Jobs”)
-- Running Execute Job, Upcoming Job, and Completed Job chart will be dynamic and have differents width based on how many content that they have at each time.
- Show list of Active and Completed Projects. (change label here from “Completed Projects” to “Archived Projects”)
- In the project list section, user can view them as list or grid.
- User can drag and drop any project details in grid and list view
- Clicking any circle chart inside the project details will show summary information about jobs inside the projects.
- Clicking “Add Project” button will redirect user to create new Project in the app.
- Arrange the project by their status: with warning, running, modified, others
- Provide active condition for grid and list buttons
- User will be able to see summary of projects:
-- Project Name
-- Project Description
-- Created On Timestamp
-- Modified On Timestamp
-- Created By
-- Modified By
-- Status: Running/Total Jobs
-- Action buttons (Open project details, Edit Project, Archive Project)
- You can remove the “All Category” search box from the Search Filter.
02. Settings Screen
WF Reference: Settings (User) - Settings (Admin)
Storyboard Reference: 02-1-Settings.png to 02-2-Settings.png
- User can configure their component versions from this screen.
- There are two tabs: input files and output files.
- Then expandable sections to avoid to get lost having too much visible information.
- "+ Add Type", to include a new file type that needs to be supported
- "+ Add Version", to include a new version relation
- "+ Add File", means to add library files to the referred version
- "Edit - Save/Cancel", means to edit version label and be able to modify or delete file paths manually.
- "Delete", to delete a version
- User can add new file or database type that needs to be supported in this screen.
The section header text “Data Bases” should be changed to “Databases”
03. Create/Edit Project Screen
WF Reference: CreateProject and EditProject (User), CreateProject and EditProject (Admin)
Storyboard Reference: 03-1-Create-project.png to 03-3-Edit-project.png
- User can create a new project from this page.
- Simple form with the following field needs to be added in this screen:
-- Project Name
-- Project Description
-- Created By
-- Creation Date
- Once user successfully create a project, they will be redirected back to dashboard and then can choose the new project to start manage all jobs there.
- Provide tool tips to explain each field purpose to user.
- User will be able to edit any projects, however only Project name and Project Description will be editable.
04. Project Details Screen
WF Reference: ProjectDetails (User and Admin)
Storyboard Reference: 04-1-Project-Details.png to 04-2-Project-Details.png
- This screen should show project description summary and show summary of "Project Status" and "Jobs"
- Show all "Running Jobs", "Completed Jobs" and "Upcoming Jobs" in list and grid view
- Please note that all Job detail list here can be dragged and drop.
- The Job details should have the following content:
-- Job name
-- Description
-- Created
-- Modified
-- Created by
-- Modified By
-- Status
-- Schedule
-- Action Buttons (Schedule Job, Edit Job, Delete Job)
05. Job Details Screen
WF Reference: JobDetails (User and Admin)
Storyboard Reference: 05-1-Job-Details.png to 05-2-Job-Details-edit-schedule.png
- Show all information related to the Jobs here.
- Information related to jobs detail can be found in the expandable/collapsible section (user can expand/collapse any informations) :
-- Details (showing description of the job)
-- Progress (showing the on going/running job progress)
-- Schedule (showing schedule for the job)
-- History (showing all completed schedue for the job)
- Please create a version where the Job details don't have a schedule set (WF Reference "JobDetails-noSchedule") and a version where there is an error found in the job details (WF Reference "JobDetails-Error")
- User can edit Schedule for the jobs by clicking edit button in Schedule section (WF Reference "JobScheduler-Edit"):
-- User can define start and end date of a job
-- At the bottom area, user can define time for each day
-- We need to provide users with the ability to schedule jobs to operate on a recurring basis.
-- This screen should include fields to allow users to pick a start date, and end date, days of the week and time of day.
06. Create/Edit Job Screen
WF Reference: CreateJob-Description, CreateJob-Workspace, CreateJob-MappingInterface, CreateJob-JobRunner, EditJob-Description, EditJob-Workspace, EditJob-MappingInterface, EditJob-JobRunner (User and Admin)
Storyboard Reference: 06-1-Create-Job_Description.png to 06-4-2-Create-Job_Job_Runner_playing.png
Job Description
- User can enter description of the job in this area
- Fields needs to be included in this section are:
-- Job Name
-- Job Description
-- Creation Date
-- Created By
-- Modification Date
-- Modified By
-- Once Job Description done, click Next
Workspace
- Once the basic details of a job have been declared user should be able to enter a workspace where they can enter the details of their data migration job. There should be several parts to the workspace screen:
- Component List - The ETL tool will also need a list of components. In the toolbox there should be input and output versions of each of the components listed above. (e.g Input Delimited Text File, Output Delimited Text File, Input XML File, Output XML File, etc..). We don't need detail out all of the components with the initial release of the application but let's define the following fields for some of the component (check "component_details.txt").
- Each component will have their own workspace - A 'job' is created by dragging components into the workspace.
- Each job will have two components - a source and a destination.
- We need to create set of screen interactions on how to use the workspace area:
-- Provide screen interactions regarding drag and drop features - drag component list item to object fields
-- Provide screen interactions once the item successfully dropped to the object fields
-- Provide screen interactions where user needs to define the schemas (column layouts) of the source and destination files item in the Define table along with interactions to delete the item .
-- Provide screen interactions where user needs to set Field and value on the right side.
-- Provide screen interactions where there are more than 2 toolbar item in each source and destination area.
-- Provide screen interactions when user remove the component list item from the workspace.
- Once the workspace is done, click Next.
Mapping Interface
- One of the most important elements of the job is the mapping interface where source and destination fields are mapped to each other.
- When an input and output component both have a schema definition, users should be able to bring up a mapping screen which will allow users to map input fields to output fields and do some basic transformations. It would be great if this mapping could done visually. There should be a line in the User Interface connecting an input field to an output field.
- On the mapping interface we'll also support some basic transformations. This will allow users to modify data as it changes between input and output. Here are the functions that will be supported initially (click the f(x) link):
-- Trim() - removes all whitespace
-- Right(integer numOfChars) - removes a certain number of characters from the right side of the input string
-- Left(integer numOfChars) - removes a certain number of characters from the left side of the input string
-- FindAndReplace(String stringToFind, String stringToReplace) - replaces characters in the source data with the replacement string.
-- DateToString(String dateFormat)
-- NumberToString (String numberFormat)
-- CurrencyToString (String currencyFormat)
-- Index(String stringToFind) - returns an integer index value of the designated string or -1 if the value isn't found.
-- These functions will available at the field level for the relevant input source data type. For example, Trim(), Right(), Left() are only really relevant to Strings. They wouldn’t apply to numeric input. DateToString would only apply to fields of type Date, etc.
- User can add as many as they want new field in this area.
Job Runner
- As jobs are created it will be important to actually execute a job in real time to verify results.
- The app should provide some progress indications as a data is read from the source and written to the destination. In this screen please show simulation where the “2550” number is decrease and the “0” number is increase along with some time indicator on the circle area (like stop watch counting down).
Edit Job
- User will be able to edit jobs to update information (07-1-Edit-Job.jpg to 07-4-Edit-Job.jpg).
CODE REQUIREMENTS
- Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS3 code that displays and functions correctly in all the requested browsers on desktop. Responsive is not the top priority, and code will not be QA'd on other devices, but should have appropriate media queries in place for phone and tablet portrait and landscape orientations.
- All elements should be consistent: pay attention to padding, margin, line-height, etc.
- Matching the designs (as closely as possible) across the required browsers.
HTML5
- Provide comments on the page elements 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 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 camelback 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.
CSS3
- Provide comments in 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.
- All CSS naming should not have any conflicts
- Please use CSS3 styles when creating shapes.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
- Minimum width for the page should be 1280px and accommodate desktop.
- If not responsive, at a minimum have some media queries as placeholders for standard breakpoints (phone portrait and landscape, tablet portrait and landscape) - so that we can build upon them in a later phase.
Javascript
- All JavaScript must not have a copyright by a third party.
- You are encouraged to use your own scripts, or scripts that are free and publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- Please use AngularJS 1.x for this challenge
Images
- Images should be properly compressed while still having good visual quality.
- Please use sprites when submitting icons as images, and common icon fonts like Font-Awesome when possible.
Browsers
- IE11++ above
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
Documentation Provided:
- Wireframes and Storyboard files can be found in forums.
- A complete list of UI prototype deliverables can be viewed at: UI Prototype Tutorial
Final Submission:
- For each member, the final submission should be uploaded to: Online Review Tool
Final Submission Guidelines:
- All pages of the UI prototype developed according to the provided design as described above
- Any standard Topcoder documentation for a web UI prototype challenge
- All source code from your project uploaded as a zip
Welcome to "HP Data Quality ETL App UI Prototype Challenge". We want to build an Extract Transform and Load (ETL) application that will allow user to moves data between a source file or database and a destination directory or database. The goal of this challenge is to create the HTML5 Prototype for an application using the provided Data Quality ETL storyboards. The prototype must follow our standards and our guidelines. Review the details below.
The main task of this project is to create the HTML5 UI Prototype based on the provided Storyboard design by using industry standard best practices. As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JavaScript code functions and make it easier for future developers and the client to understand what you have built.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Competition Task Overview
The main task of this competition is to develop HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Background Overview
The HP Data Quality team is tasked with moving large amounts of data on a regular basis. They would like to create an "Extract Transform and Load" (ETL) tools that allows them to move file and relational data on a regular basis and create a monitoring service which can display the status of the currently scheduled and recently completed jobs. Often they are moving data between regular and HDFS file systems.
The application will need to handle the following data source types:
- Fixed Width Text Files
- Delimited Text Files (such as csv files)
- JSON Files
- XML Files
- Excel Files
- Relational Databases (Oracle, SQL Server, MySQL)
- Columnar Databases (Redshift and Vertica)
- NoSQL Databases (MongoDB)
- Hadoop Databases (Hive)
- Etc (for future consideration..)
General Requirements
- Replicate the design of the approved Storyboards (PSD Files) for all pages.
- Your pages must match the colors and structure of the provided storyboards.
- Provide hover and active condition for all link and buttons
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML and CSS Validation error and warning.
- Test in all the required browsers.
- Provide all hover and active state for buttons and links.
Screen Requirements
NOTE: There will be 2 kind of users that will use this apps (User and Admin), each user share similar features in the app but we needs each roles to have their own prototype screens:
00. Login Screen
WF Reference: Login
Storyboard Reference: 00-1-Login.png, 00-2-Login_error.png
- This tool will have both ETL capabilities and job monitoring capabilities.
- Users will log into the tool to see all the jobs that are currently scheduled as well as those in the future.
- Provide screen interactions when user enter wrong credential.
01. Dashboard Screen
WF Reference: Dashboard-user (User) and Dashboard-admin (Admin)
Storyboard Reference: 01-1-Dashboard_Grid.png to 01-7-Dashboard_info_hover.png
- Default screen after user successfully login to the apps.
- From this screen, user can open a project to find the job details and create jobs.
- Admin Users will have visibility to all Projects and Jobs in the System whileNormal User will only have access to their own projects and jobs.
- Show summary of all activity in the apps, such as:
-- Summary of total Projects available in the app (change text in the storyboard from “Total Projects” to simply “Projects”)
-- Summary of total Jobs available in the app (change text from “Total Jobs” to simply “Jobs”)
-- Running Execute Job (change label here from “Running Execute Jobs” to “Currently Running Jobs”)
-- Upcoming Job (change label here from “Upcoming Job” to “Upcoming Jobs”)
-- Completed Job (change label here from “Completed Job” to “Completed Jobs”)
-- Running Execute Job, Upcoming Job, and Completed Job chart will be dynamic and have differents width based on how many content that they have at each time.
- Show list of Active and Completed Projects. (change label here from “Completed Projects” to “Archived Projects”)
- In the project list section, user can view them as list or grid.
- User can drag and drop any project details in grid and list view
- Clicking any circle chart inside the project details will show summary information about jobs inside the projects.
- Clicking “Add Project” button will redirect user to create new Project in the app.
- Arrange the project by their status: with warning, running, modified, others
- Provide active condition for grid and list buttons
- User will be able to see summary of projects:
-- Project Name
-- Project Description
-- Created On Timestamp
-- Modified On Timestamp
-- Created By
-- Modified By
-- Status: Running/Total Jobs
-- Action buttons (Open project details, Edit Project, Archive Project)
- You can remove the “All Category” search box from the Search Filter.
02. Settings Screen
WF Reference: Settings (User) - Settings (Admin)
Storyboard Reference: 02-1-Settings.png to 02-2-Settings.png
- User can configure their component versions from this screen.
- There are two tabs: input files and output files.
- Then expandable sections to avoid to get lost having too much visible information.
- "+ Add Type", to include a new file type that needs to be supported
- "+ Add Version", to include a new version relation
- "+ Add File", means to add library files to the referred version
- "Edit - Save/Cancel", means to edit version label and be able to modify or delete file paths manually.
- "Delete", to delete a version
- User can add new file or database type that needs to be supported in this screen.
The section header text “Data Bases” should be changed to “Databases”
03. Create/Edit Project Screen
WF Reference: CreateProject and EditProject (User), CreateProject and EditProject (Admin)
Storyboard Reference: 03-1-Create-project.png to 03-3-Edit-project.png
- User can create a new project from this page.
- Simple form with the following field needs to be added in this screen:
-- Project Name
-- Project Description
-- Created By
-- Creation Date
- Once user successfully create a project, they will be redirected back to dashboard and then can choose the new project to start manage all jobs there.
- Provide tool tips to explain each field purpose to user.
- User will be able to edit any projects, however only Project name and Project Description will be editable.
04. Project Details Screen
WF Reference: ProjectDetails (User and Admin)
Storyboard Reference: 04-1-Project-Details.png to 04-2-Project-Details.png
- This screen should show project description summary and show summary of "Project Status" and "Jobs"
- Show all "Running Jobs", "Completed Jobs" and "Upcoming Jobs" in list and grid view
- Please note that all Job detail list here can be dragged and drop.
- The Job details should have the following content:
-- Job name
-- Description
-- Created
-- Modified
-- Created by
-- Modified By
-- Status
-- Schedule
-- Action Buttons (Schedule Job, Edit Job, Delete Job)
05. Job Details Screen
WF Reference: JobDetails (User and Admin)
Storyboard Reference: 05-1-Job-Details.png to 05-2-Job-Details-edit-schedule.png
- Show all information related to the Jobs here.
- Information related to jobs detail can be found in the expandable/collapsible section (user can expand/collapse any informations) :
-- Details (showing description of the job)
-- Progress (showing the on going/running job progress)
-- Schedule (showing schedule for the job)
-- History (showing all completed schedue for the job)
- Please create a version where the Job details don't have a schedule set (WF Reference "JobDetails-noSchedule") and a version where there is an error found in the job details (WF Reference "JobDetails-Error")
- User can edit Schedule for the jobs by clicking edit button in Schedule section (WF Reference "JobScheduler-Edit"):
-- User can define start and end date of a job
-- At the bottom area, user can define time for each day
-- We need to provide users with the ability to schedule jobs to operate on a recurring basis.
-- This screen should include fields to allow users to pick a start date, and end date, days of the week and time of day.
06. Create/Edit Job Screen
WF Reference: CreateJob-Description, CreateJob-Workspace, CreateJob-MappingInterface, CreateJob-JobRunner, EditJob-Description, EditJob-Workspace, EditJob-MappingInterface, EditJob-JobRunner (User and Admin)
Storyboard Reference: 06-1-Create-Job_Description.png to 06-4-2-Create-Job_Job_Runner_playing.png
Job Description
- User can enter description of the job in this area
- Fields needs to be included in this section are:
-- Job Name
-- Job Description
-- Creation Date
-- Created By
-- Modification Date
-- Modified By
-- Once Job Description done, click Next
Workspace
- Once the basic details of a job have been declared user should be able to enter a workspace where they can enter the details of their data migration job. There should be several parts to the workspace screen:
- Component List - The ETL tool will also need a list of components. In the toolbox there should be input and output versions of each of the components listed above. (e.g Input Delimited Text File, Output Delimited Text File, Input XML File, Output XML File, etc..). We don't need detail out all of the components with the initial release of the application but let's define the following fields for some of the component (check "component_details.txt").
- Each component will have their own workspace - A 'job' is created by dragging components into the workspace.
- Each job will have two components - a source and a destination.
- We need to create set of screen interactions on how to use the workspace area:
-- Provide screen interactions regarding drag and drop features - drag component list item to object fields
-- Provide screen interactions once the item successfully dropped to the object fields
-- Provide screen interactions where user needs to define the schemas (column layouts) of the source and destination files item in the Define table along with interactions to delete the item .
-- Provide screen interactions where user needs to set Field and value on the right side.
-- Provide screen interactions where there are more than 2 toolbar item in each source and destination area.
-- Provide screen interactions when user remove the component list item from the workspace.
- Once the workspace is done, click Next.
Mapping Interface
- One of the most important elements of the job is the mapping interface where source and destination fields are mapped to each other.
- When an input and output component both have a schema definition, users should be able to bring up a mapping screen which will allow users to map input fields to output fields and do some basic transformations. It would be great if this mapping could done visually. There should be a line in the User Interface connecting an input field to an output field.
- On the mapping interface we'll also support some basic transformations. This will allow users to modify data as it changes between input and output. Here are the functions that will be supported initially (click the f(x) link):
-- Trim() - removes all whitespace
-- Right(integer numOfChars) - removes a certain number of characters from the right side of the input string
-- Left(integer numOfChars) - removes a certain number of characters from the left side of the input string
-- FindAndReplace(String stringToFind, String stringToReplace) - replaces characters in the source data with the replacement string.
-- DateToString(String dateFormat)
-- NumberToString (String numberFormat)
-- CurrencyToString (String currencyFormat)
-- Index(String stringToFind) - returns an integer index value of the designated string or -1 if the value isn't found.
-- These functions will available at the field level for the relevant input source data type. For example, Trim(), Right(), Left() are only really relevant to Strings. They wouldn’t apply to numeric input. DateToString would only apply to fields of type Date, etc.
- User can add as many as they want new field in this area.
Job Runner
- As jobs are created it will be important to actually execute a job in real time to verify results.
- The app should provide some progress indications as a data is read from the source and written to the destination. In this screen please show simulation where the “2550” number is decrease and the “0” number is increase along with some time indicator on the circle area (like stop watch counting down).
Edit Job
- User will be able to edit jobs to update information (07-1-Edit-Job.jpg to 07-4-Edit-Job.jpg).
CODE REQUIREMENTS
- Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS3 code that displays and functions correctly in all the requested browsers on desktop. Responsive is not the top priority, and code will not be QA'd on other devices, but should have appropriate media queries in place for phone and tablet portrait and landscape orientations.
- All elements should be consistent: pay attention to padding, margin, line-height, etc.
- Matching the designs (as closely as possible) across the required browsers.
HTML5
- Provide comments on the page elements 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 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 camelback 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.
CSS3
- Provide comments in 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.
- All CSS naming should not have any conflicts
- Please use CSS3 styles when creating shapes.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
- Minimum width for the page should be 1280px and accommodate desktop.
- If not responsive, at a minimum have some media queries as placeholders for standard breakpoints (phone portrait and landscape, tablet portrait and landscape) - so that we can build upon them in a later phase.
Javascript
- All JavaScript must not have a copyright by a third party.
- You are encouraged to use your own scripts, or scripts that are free and publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- Please use AngularJS 1.x for this challenge
Images
- Images should be properly compressed while still having good visual quality.
- Please use sprites when submitting icons as images, and common icon fonts like Font-Awesome when possible.
Browsers
- IE11++ above
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
Documentation Provided:
- Wireframes and Storyboard files can be found in forums.
Final Submission Guidelines
Submission Deliverables:- A complete list of UI prototype deliverables can be viewed at: UI Prototype Tutorial
Final Submission:
- For each member, the final submission should be uploaded to: Online Review Tool
Final Submission Guidelines:
- All pages of the UI prototype developed according to the provided design as described above
- Any standard Topcoder documentation for a web UI prototype challenge
- All source code from your project uploaded as a zip