Challenge Overview
Overview
Welcome to the Frontend #1 challenge for our Mobile Hybrid buildpack project. There will be several challenges in this project dealing both with a nodejs based backend hosted on Heroku and an Ionic front end demo application. Get involved now and follow along!
Before starting, please read MobileHybridIonicHerokuBuildpack.pdf. This document explains the overall concept were trying to achieve.
Challenge Goal
In this challenge we'll be building the base Ionic app which will be used for demonstrating the the most common Ionic features used in Hybrid builds by our clients.
This submission should present a good demonstration of Ionic feature in displaying and working with data via API. We're looking for a simple design and layout, using mainly "stock" Ionic features.
It is very important that the code developed in this challenge is as modular as possible. The DB functionality we're implementing in this challenge should be thought of as a "module" that can be "included" or "not included" in the Ionic app. The idea is that as we add more features to the demonstration, each can be easily included or left out. For example - in the future we may have "modules" demonstrating authentication, push notifications, 3rd party API access, ...etc. We should easily be able to add or remove each "module" from this Ionic app. If we want to rebuild the app without one of these features, it should be clean and easy to remove (both from the menu and from the code base). We're counting on the expertise in the community as to how to do this so that it is simple and well designed.
Getting Started
Use Ionic V1.3.1 and start with the side-menu template. There should be just two choices on this menu:
1. About: This should list the version and title (just use "Ionic Buildpack Demo") for now
2. Database: This will lead you to the "Home Screen" for the database demo
The initial state of the side-menu template: http://i.imgur.com/7USoQAp.png
Additional Notes:
- Please pick a background color to use for the side-menu and ensure the meun is using that color (it defaults to White, which blends in too easily).
- Use standard Ionic directives and features wherever possible to ensure we get a "native look and feel" and take advantage of Ionic's ability to provide native looking controls across platforms.
The API
The API for the data is fully functional and documented with Swagger yml and postman files. Details can be found here. In addition there is an instance of the API and data stood up for use in this challenge. You are free to use this endpoint (but keep in mind, you'll be sharing it) or stand up your own. Details and all code and data are available at the repo.
Additional Notes:
- Demo endpoint: https://bp-ionic-heroku-01.herokuapp.com/api/v1/
The "Home Screen" (of this "widget")
The "Home Screen" of this widget should simply show the top 10 games by averageRating (sorted from high to low). Allow the user to "drill down" and see all details of the selected game. In the "drill down", also allow the user to view the image, full screen, without switching to their browser to see it. The user should be able to select any field for editing on the game they are viewing and changes should be saved via API.
Additional Notes:
- There are no wireframe or design for this challenge. We're looking for standard Ionic controls, lists, buttons, ...etc. You have some creative freedom here - to select components / directives and a layout that make sense and looks good. Keeping things "clean and simple" is preferred. The main point of this challenge is demonstrating DB access via API using "core" platform independent Ionic features.
Ability to search for games by Name, Maximum Playing Time, and Rating
The "Home Screen" for this widget should allow the user to search for games. Name search should match partial names and disregard case (the API already does this). Use a selector for maximum playing time in 15 minute increments, returning results that are =< that playing time. Allow searching by averageRating in a range from 0 to 10.
In the results, allow the user to "drill down" and see all details of the selected game, see the image, and edit (just like in the main Home Screen).
Final Submission Guidelines
Challenge Deliverables
- The Ionic app meeting all the requirements above
- No video necessary
- Simple deployment guide in MD format
- App must build successfully and funciton properly for both iOS and Android