Challenge Overview
Project Overview
Fit is an internal app used by topcoder admins to discusss ideas with client and help them pick the top ideas to buid through topcoder's crowdsourcing platform.
This app will be built as an ionic based hybrid app that works on both iOS and Android phones, so you'll need to use Angular.js and avoid jQuery.
Competition Task Overview
In this challenge, we need to build the prototype for this mobile app. Please follow the design we provide in the forum with exception to the following changes:
- The PNGs are most up to date, the PSD has a couple screens that are out dated. In such cases follow the PNGs instead of the PSD.
- For login screen, the design only has an email field and a login button. We need to add another shorter textbox to enter a code and a button beside it that says send code. When user enters email, the send code will be enabled and when user clicks it the app will send a randomly generated code to the user's email and the user will have to enter the correct code to be able to login. Note in this prototype challenge you don't have to implement the generate / send code logic, just simulate this process.
- Add a new "status" field to the "Admin - Edit Session.jpg" screen, this will be a drop down with 3 values: active / started / ended. This drop down is only visible when edting an active session, it's not available when creating session or editing a draft
- On "How It Works 1.jpg" screen, users must enter First Name and Last Name to go next
- Timer countdown must be implemented, see "Landing Page - Dark Theme.jpg" for an example
- Note that admins and normal users see different dashboard and menus after login
Key Requirements
- Create the prototype based on the provided design and detailed requirements above
- The prototype must be fully functional using data that comes from json (no hardcoded data)
- The prototype must be built using HTML5 / Angular.js, no flash and no jQuery
- Make sure the prototype works on iOS and Android phones (need to adpat to different phone screen sizes)
- Test in all the required browsers (example: Safari on iOS, Chrome on iOS / Safari).
- Your pages must match the colors and structure of the provided storyboards.
- 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.
Timeline
Please note this challenge has shortened timeline for several phases, make sure you don't miss the deadlines.
Specific HTML/CSS/JavaScript Requirements
- You MUST use HTML5 and CSS3 and Angular.js
- 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.
- 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.
- No inline CSS styles - all styles must be placed in an external stylesheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- 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).
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers we listed
JavaScript Libraries/Plugins
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.
- You should use Angular.js for this challenge
- Usage of jQuery is not allowed
Browser Requirements
- Safari on iOS
- Chrome on iOS / Android
Final Submission Guidelines
Submission Deliverables
- Full prototype that works as expected, note the UI is expected to be fully working.
Submission Guidelines
Submit an archive file contains all HTML/CSS/JS/images and other required files via the challenge detail page on topcoder.com.