John Hancock - Giving Tuesday - Prototype 48h

For our frequent client, John Hancock, we are going to develop a small frontend-only ReactJS application. The deadline, though, is also short: the app should be ready by November 20. In this opening 48h prototype challenge you will setup the framework, and implement layouts and styling of all application screens.

Tech Stack

• Autoprefixer
• Babel (ES6 support)
• ReactJS
• prop-types 
• SCSS
• ESLint (AirBnB config)
• Stylelint (Standard config)
• Webpack

The app will be frontend-only; no need for Redux (to speed-up development, and because it is assumed to be small). Setup webpack-dev-server for development with Hot Module Reloading; for production / demonstration it is enough to build .js, .css bundles and serve them along with html template using http-server.

Browsers to support: Safari IOS 10+, Chrome Android 59+, IE11+, Facebook Browser for Mobile
Devices to support: Apple iPhone (5, 5s, 6, 6 Plus, 6S, 7), Samsung Galaxy, S6, S7 Edge, Google Note 6; desktops.

Scope

Design assets (PSD) are provided in the challenge forum. All five screens are in scope (both mobile and desktop views). As you’ll see, the screens are not huge, and you can reuse many components between them, if organize the code properly. All transitions between the screens and main logic are in scope, with the following exceptions:

• No need to load / capture the actual photo from camera: when these buttons are clicked just take user to the next screen and load in there some sample photo from the bundle;
• Choosing frames and placing stickers is in scope, but no need to actually merge them into the photo for now;
• No need to implement the actual sharing to social network now.

Final Submission Guidelines

Submit resulting app prototype.