The Assignment

Congratulations, you just landed your first job at Todo Inc. After endless nights of relentless programming and designing your company has just been founded with millions of venture capital after pitching investors with a shiny prototype. The dilemma: It’s just a prototype and its your job to turn this pile of hasty assembled source files and workarounds into a production ready setup.

Project Files


Lets start by looking at what we got. The backend is implemented using the Spring Boot framework and luckily the responsible developer wrote a Gradle file so to start the backend we just have to run:

$ cd todo-backend
$ ./gradlew bootRun

The build.gradle file also includes the Idea (apply plugin: 'idea') and the Eclipse plugin (apply plugin: 'eclipse') allowing us to create IntelliJ or Eclipse project files by calling ./gradlew idea respectively ./gradlew eclipse. Afterwards we can directly open the project directly in our favorite IDE creating a hassle free developer experience.


The frontend team has gifted is with a a Vue.js based frontend that also contains some basic unit tests. It is built and bundled using webpack, so to start the frontend locally just change into the the frontend project directory, and run npm:

$ cd todo-frontend
$ npm run dev
DONE  Compiled successfully in 6945ms
I  Your application is running here: http://localhost:8080

The frontend is now available at http://localhost:8080, and it is expecting a running backend at http://localhost:9090.

First Run

The local dev instance of the frontend comes with all bells and whistles like live reloading for code and css, to create the real deployable artifacts run the build via npm:

$ cd todo-frontend
$ npm run build

> todo-frontend@1.0.0 build todo-frontend
> node build/build.js

Hash: 722667b099318cce6988
Version: webpack 3.10.0
Time: 12917ms
                                                  Asset       Size  Chunks             Chunk Names
               static/js/vendor.bfbe8931f13dc4c86ffe.js     111 kB       0  [emitted]  vendor
                  static/js/app.d37b66e3593c9e271a18.js  910 bytes       1  [emitted]  app
             static/js/manifest.19de70c0b3ebd3fbdf13.js    1.49 kB       2  [emitted]  manifest
    static/css/app.a62596eaa159b3b17c85d0c7afbaab30.css  432 bytes       1  [emitted]  app
static/css/  828 bytes          [emitted]
           static/js/     546 kB       0  [emitted]  vendor
              static/js/    7.83 kB       1  [emitted]  app
         static/js/     7.8 kB       2  [emitted]  manifest
                                             index.html  515 bytes          [emitted]

  Build complete.

The build output is placed in the dist folder. These are the files that need to be served by a web server when we deploy the application to a live system.

$ cd todo-frontend
$ tree dist
├── index.html
└── static
    ├── css
    │   ├── app.a62596eaa159b3b17c85d0c7afbaab30.css
    │   └──
    └── js
        ├── app.d37b66e3593c9e271a18.js
        ├── manifest.19de70c0b3ebd3fbdf13.js
        ├── vendor.bfbe8931f13dc4c86ffe.js

3 directories, 9 files