Challenge Overview
Project Overview
Fujitsu has public cloud platform called Cloud Service K5 (ref. http://www.fujitsu.com/uk/solutions/cloud/k5/)
This platform provides a same kind of service as Amazon’s AWS, Microsoft’s Azure, Google Cloud Platform.
K5 currently has IaaS (where hardware level services are provided) and PaaS (one of which is called PF service, where application level services).
The goal of this challenge is to build a polished UI prototype using ReactJS. The prototype will implement the new design and visualization ideas to enhance user experience for this service’s management console (application).
Competition Task Overview
The purpose of this challenge is to develop an HTML/CSS web application powered by React.js. For this challenge, you can assume the app will primarily be used on a desktop browser with a minimum width of 1280px - this should be your primary focus for this challenge, but please do not use code that will make it hard to change this to a responsive web in the future, that probably means you should use responsive components such as fluid grid system etc. Also, your prototype must work properly in all the required browsers.
We have provided the screen designs and source files to help you complete this challenge, all screens in the design are in scope. There are also quite a few charts in the app, please use d3.js (react-d3) for these and try to make these charts reusable across pages.
If any requirements are unclear in the screens please ask on the forum and we’ll be happy to help clarify!
Good luck! We look forward to seeing your submissions!
General
- Source code and design text must be written in US-English
- We do not care about Material Design which is the design guideline by Google, we think Material UI is good (which is one of the implementations of Material Design) because it has CSS in Javascript architecture, which has good reusability as a UI component library. So if the submissions code with "CSS in JavaScript" style instead of using global CSS, that's a plus and we'll pay $100 bonus for this, the submissions needs to be in the top 2 and pass review to qualify for this bonus.
- Please note the storyboard doesn't strictly follow Material Design guidelines, and we don't want you to change that, instead you must follow the look & feel of the design when building the prototype.
- If Material UI with the above requirement covered, then we consider it a plus as well and will pay another $100 bonus for it, again the submissions need to be in the top 2 and pass review to quality for the bonus. We are also fine with submissions based on Bootstrap 3.
- Must be compatible with all major browsers including: latest Firefox, Chrome, Safari and Internet Explorer 11+, Edge
- If using Material UI, must follow Material UI best practices (CSS in Javascript will be required for example). If using Bootstrap, must be compliant with Bootstrap's infrastructure, CSS settings, fundamental HTML elements, and use the grid system: we want the ability to use out-of-the-box bootstrap elements even though they are not part of the design.
Detailed Requirements
- All screens provided in the storyboard are in scope. To give you an idea of the scope of this challenge the following screens needs to be developed. We have provided the screen designs and source files to help you complete this challenge.
- The design only covers the Overview and IaaS pages, it's intended and not a mistake.
- When the screen width gets bigger, the app should adapt its layout to show more cards first, and if there are no more cards, make each card / element wider.
- The prototype should consume data from static json files, no data should be hardcoded into the prototype code. Please provide different json data for different charts so the charts will look different in different sections / on different pages.
- Please try to make the charts reusable in the prototype, since many of these pages use a lot of common charts.
- The pop up edit screens are also in scope.
- All data should come from static JSON files, there should be no hardcoded data in the prototype. For example: 01_20_number_of_servers_chart.png has a section named "NUMBER OF SERVERS PER REGIONS", right now it shows 10 bars in the design, but there are only 4 regions supported right now (jp-east, jp-west, US, UK), and we expect it to be possible to just modify the data in JSON and the page will just show whatever is in the data.
Coding
- Include both source & prebuilt/minified.
- If using Material UI, please follow Material UI coding practices.
- If using Bootstrap: allow for future Bootstrap updates: override Bootstrap variables and rebuild saas files, IDs and classes must follow Bootstrap naming conventions (lowercase, hyphen (-) separated)
Design
- The design should be 1280px wide.
- Grid: The design is not pixel perfect towards its grid/gutters; you should choose so it approaches the design. We prefer a consistent design with well defined grid/font/gutter sizing over pixel perfect styling.
- Use Material UI / Bootstrap’s included responsive fluid grid system where appropriate.
- Image file sizes should be reasonable to allow for quick transfer while still maintaining an appropriate level of quality.
- Images intended to span the full width of the screen must be at least 1920 pixels wide.
React Guidelines
- The applications UI components should be built using React.js
- This will allow for simple, powerful and fast client side rendering. Both Facebook and Instagram are built using React so competing in this challenge will show your mastery of this highly popular and powerful framework.
- If you need to brush up on your React skills here are some great resource:
---- React Library
---- React 101 guide
---- React Starter Kit
- Use Redux to manage application state (if needed)
- Follow Airbnb React/JSX styleguide
Licenses & Attribution
- Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok, but if a library is not commercial friendly you need to get our approval first.
- Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.
Browser Requirements
- IE11+
- Chrome latest
- Safari latest (Mac only)
- Firefox latest
Technologies
- Material UI / Bootstrap
- CSS3
- HTML5
- JavaScript
- React.js
- d3.js React
Documentation Provided
Please register to download the PSD files from challenge forum.
Final Submission Guidelines
Submission Deliverables
A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.Submission Guidelines
Submit an archive file contains all HTML/CSS/JS/images and other required files via the challenge detail page on topcoder.com.