The code in this project is operational, but it was completed with very poor standard. The client is also upset because the app is not fast enough to respond to user actions.
You're given responsibility to refactor the code and align it with the company's coding standards.
- Performance
- Maintainability
- Readability
- Testability
- DRY
- Single Responsibility Principle
This project is a photo sharing app where users can download any photos in the app.
The frontend relies on a legacy API that we don't have control of. Note that the query only returns 3 items at a time.
- Currently, the app supports 3 categories: nature, architecture, and fashion.
- On each category, there should be 9 images loaded per page arranged as a 3 x 3 grid.
- The user should be able to navigate to next and previous pages.
- The user should be able to download the image after clicking the download button.
The main goal is to make the UI as smooth as possible and apply best practices in writing the frontend code.
* Modify any existing files that are not contained in the "do-not-refactor" directory
* Add any third-party libraries
* Add any front-end transpilers, module bundlers, or task managers
* Add tree-shaking on JS and CSS
* Change and/or improve the existing UI
* Add live reload for every file changes
* Wrap the frontend into a Docker container (Big plus)
To run the app, make sure you have Node installed in your machine.
npm install
npm run dev
#Using docker
>docker-compose up --build --force-recreate --no-deps -d
Added Docker
Added vuejs
Added babel polyfill
Added webpack module bundler
Added vue-loading-spinner