Challenge Overview
Challenge Overview
In previous challenges we have completed the design for a travel ticketing and accommodation system. In this challenge, we are looking for your help to convert the design to a working mobile prototype app based on ionic.
All screens from the mobile design are in scope.
Assets provided in Forums (available on registration)
- MarvelApp Link
- Design Sources
Requirements
- Overall the screen flow is pretty clear if you follow the MarvelApp link, so please carefully check that.
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- You are building an Ionic based mobile app in this contest, with Android and iOS as the target platforms.
- The app will be locked to Portrait mode. Landscape mode is NOT in scope
- Consider iOS 10.0+ and Android 6.0+ as the baseline versions
- The application is for phones and is expected to run on tablets in scaled / enlarged mode, besides we need this to work on desktop browsers with scaled / enlarged view as well (it's ok if the page will have white spaces at both sides)
- Please use Ionic or CSS to implement screen transition animation
- For features like Download Ticket / Download Insurance, you may use an embeded PDF to demonstrate them for now
- The design asset sources and Marvelapp link are provided in the forum
- Use Ionic components/directives (ion-list, ion-item, etc.) as much as possible, providing they exactly match the behaviour and styling of the design. You can use the Sass variables for the ionic directives for customising the style to fit the app.
- If the Ionic component/directive does not exactly match the design, then you should create an Ionic component/directive
- Consider how you might employ view caching to improve the user experience
- We strongly recommend using this seed project as a starting point but you are NOT REQUIRED to do so. Clean up anything that you don’t need.
- The converted prototype should exactly match the provided design including the screen transitions.
- For data for all screens, use JSON files and use methods that read data off these files. The idea is that we should be able to replace the URL in these methods to point to actual backend at a later stage for minimal changes. Do NOT hardcode data into the code.
Technologies
- Ionic
- Javascript
- HTML5
- CSS
- iOS 10+
- Android 6+
- Tablets
- Desktop Browsers
Final Submission Guidelines
- Zipped project source code
- Provide detailed deployment document (in markdown format) that covers how to setup the environment, required software and dependencies in order to run the apps, as well as how to build the app, package it into both iOS and Android platforms, and run it in emulators