This repository contains a basic setup for a JavaScript project. See "System requirements" below to get up and running! The "Project outline" section walks you through a basic rundown of the structure.

You will be working in a company where our customers purchase printed products. As such your expertise should not be restricted to developing applications, but also extend to understand the requirements of print and how to translate between the app and the print world and vice versa.

You should write a very simple application where there are two scenarios:

• The user can select a photo file from his/her device and import it into the application

• The user can position and scale this photo on a canvas. Important: Photo must always cover the full canvas.

  • Correct:

  

  • Not correct:

  

• Hit a submit button which will generate the print description as described below These instructions should be stored locally as a JSON file.

• The user can hit an import button which loads a previously saved JSON description
• Upon loading, the application should show a canvas that contains the photo
• Photo is scaled and positioned as expected according to the loaded print instructions

Out of the box, the application already provides you some code to load and validate image files from your computer. You can take some inspiration here, or if you don't like the design approach of that code, feel free to show what you think is the "right approach" to code this application. Don't write code that just "get's the job done", write it as if was an application that you would have to maintain for years to come ;)

It is by no means necessary to make this application look attractive or to spend a lot of time in providing the best interaction with the photo. If you need to add buttons to “move photo left”, "move photo right" or “scale photo 50%", "scale photo 200%” that is enough. It is about the design of your code, NOT the design of the application interface!

It is more important to show how you write (in your eyes) a maintainable application. Be prepared to explain the steps you took in a review of this test.

Don't forget to add the necessary documentations and tests.

At Albelli, we define the dimensions of our printed products in inches. For this application we will name the product “Canvas” (a single printable surface). This Canvas is a rectangle of 15” x 10” in size.

A photo must always fill the full surface of the canvas (in other words: a photo must cover an area equal to or larger than 15” in width or 10” in height).

A photo has the following properties: width, height, x and y (once more all in inches). X and Y describe the coordinates of the photo relative to the top-left position of its canvas.

The print description you will generate (in scenario #1 of your application) can be in any format of your liking, as an example you could consider the following output in JSON format:

{
    "canvas": {
        "width": 15
        "height": 10,
        "photo" : {
            "id": “fileName”,
            "width": 20,
            "height": 20,
            "x": -2.5,
            "y": -5
        }
    }
}

Once you receive this test by e-mail please copy this repository to your own GitHub account.

You can use any libraries / frameworks that make your life easier, but strictly speaking they are not necessary. We are more interested in seeing how you would structure things.

Your application should run on the latest public version of Google Chrome. You don't have to worry about making your code work on any other browser, as such you are free to use anything that is supported by Chrome and not worry about cross-browser implementations.

The entry point for your JavaScript application is ./app/js/main.js. The build script will ensure these get automatically built for use in your browser.

The project uses SASS as a preprocessor for writing your styles (though you can write regular CSS inside a .scss file if you would like to). If you choose to use CSS, you can use ./app/css/main.scss as your entry point SASS file.

Using npm run build all build output will be stored in the ./dist folder, this is automatically generated by the build script and its contents can be ignored.

In order to build the project you will need Node.js.

In the root of this repository, you can resolve all these dependencies via the command line using:

npm install

You can now start developing the application using Webpack by typing:

npm start

The following will happen:

• All JavaScript is included and built for the browser
• All SASS styles are converted into CSS
• Your browser will open and run the application
• File watchers are started

You can add / remove / change files to in the source folder and your browser will automatically update to reflect the changes.

The Final Project is hosted at https://abhimanr.netlify.app/