Challenge Overview
Overview
The goal of this challenge is to build a modern Windows Application using WPF for editing photos. The Photo Editing System is an application that can rapidly process photos of Participants in a sponsorship system so they can be used in printed material or on the sponsorship system’s website. The end user can rapidly rotate, color correct, and crop the photo, among other operations.
There is an existing application but it’s outdated (see sample). We like how fast and practical it is, working through keyboard shortcuts and solving UI goals fast, but the look and feel needs a refinement, as well as features polishment and UI improvement.
We ran a design challenge to come up with alternate themes/ concepts and the winning design has been attached in the forums.
We also ran a code challenge to build the photo editing capabilities in a WPF .NET app that can be used and re-skinned with the design. The winning submission from the previous code challenge is attached in the forums.
Technology Stack
The application should be built using the following technology stack:
- Visual Studio 2015 Community Edition
- C# Windows Presentation Foundation (WPF)
- Target .NET Framework version 4.6
Input & Output Image Format
- All photos will be .jpg format.
- The application should auto-size the original image to 488 x 638 pixels, 150 dpi, 24 bit depth which will be the largest size for the photo
- The application should also create a thumbnail conforming to the following requirements - size no larger than 30K, 200 x 261 pixels, 96 dpi, 24 bit depth
Scope
All user stories in the provided PDF document are in scope
Actual integration with Salesforce is OUT of scope. The application needs to provide a Facade layer for Salesforce integration as laid out in the user stories
Application Workflow
00-00-login
* This is the login screen. Refer to User Story titled ‘Store Salesforce Credentials’ for how this will behave.
* Add an environment dropdown with options - Dev, QA, UAT below password field
* The actual Salesforce authentication is out of scope for this challenge and you can mock this flow for now
* Note - as mentioned in the user story, this screen is only shown only if no Salesforce credentials exist as part of the application configuration
01-00
* Show this screen once user logs in
* The 2 actions on this screen are Exit & Browser
* Exit will exit the application
01-01
* Browse will open a folder picker. Refer to User story titled ‘Select Photos for Processing’ for how this will behave (ignore searching - that’s not required)
01-02
* Out of scope, not needed
01-03
* See the GetPhotoMetadata web service call defintion on how to extract the photo metadata.
Each row in the table represents an image in the scanned folder
* This table is referred to as the ‘Processing Queue’
* Show the count of images in the Processing Queue as shown
01-04
* When hovering over any column header, the cursor changes to ‘hand’
01-05
* Shows the data sorted by child name
* Default should be ascending sort
01-06
* When hovering over any row, the cursor changes to ‘hand’
01-07
* Selecting a row loads that image in the left pane for editing
01-08
* Apart from narrative, all other fields are read-only and hovering over them shows the hand cursor
01-09
* Narrative is an editable field. See the User story ‘Edit Narrative’ for more details.
01-10
* Clicking ‘Save’ updates the narrative text and loads the next photo in processing queue for editing. See the User story ‘Edit Narrative’ for more details.
01-11
* See the ‘Reject Photo’ user story. Rejecting a photo should load the next photo in processing queue for editing and invoke the RejectPHoto web service method.
01-12
* Show a confirmation modal for rejection. See the ‘Reject Photo’ user story for details.
01-13
* Shows the dropdown values in Rejection reason flyout. See the ‘Reject Photo’ user story for details.
01-14
* See the ‘Save Photo’ user story for details.
01-15
* Shows the save confirmation
01-16
* Once an image has been saved, it is removed the processing queue and the photo is saved in two locations as mentioned in the ‘Save Photo’ user story.
01-17
* Clicking ‘Reset’ will remove all editing effects applied on the photo
01-18
* The sidebar shown in the design is out of scope
* We still need a Settings button which can be used to access the application configuration. See ‘Store Application Configuration’ user story for more details. We do not have a formal design for this but make sure to style it as per the look and feel for rest of the app.
01-19
* The user should be able to drag the splitter bar to resize the upper and lower sections as needed.
02-01 to 02-06
* Various photo editing effects (already implemented in the provided POC). Refer to ‘Edit Photo’ user story for details.
02-07
* Reset photo editing effects (already implemented in the provided POC)
Final Submission Guidelines
- Submit your zipped application source code
- Submit a deployment and verification guide
- Submit a demo video showing your solution in action