'Breaking Code' used their coding and design skills to create a new system to collate and measure client retainers. This innovative app manages time, budget and tasks all in one single location; a perfect new tool for Cyber-Duck.

R&D ›

Currently, our retainer clients have various methods for adding tasks they would like completed using their monthly retainer hours. They can call, email or add them to Zendesk. The team aimed to create a web based service that would allow our clients to manage their monthly retainer hours by adding tasks, getting updates on current tasks and checking their retainer hours.

Named iRequire, the project was designed to integrate information from the various online tools that Cyber-Duck uses to manage client retainers. The new app incorporates the amount of time spent on client’s retainers along with budget and presents this data clearly on a dashboard. This enables anyone working on the project to assess how much of the retainer hours or budget remains; acting as an effective time management tool. The team have collaborated the tools we use day-to-day in the Cyber-Duck offices into one user-friendly app.

Technologies

  • Angular.JS (Javascript framework) - the team built the entire front-end with angular.js as it will allows us to easily create projects and add tasks to them. Users of the app can also dynamically edit the details of a project or task as well as search for specific tasks, and then assign users to a task using simple search functionality.
  • Laravel 4 (PHP framework) - this was used to build the API. It sends all the data stored in the MYSQL database to the front end in JSON format. Angular reads this and displays the correct data for each project and task.
  • MYSQL (Database) - as mentioned above, MYSQL was used to store all information and tasks for each project and users account details.
  • Hoisin.scss - Hoisin is used to make the whole web app responsive, and is our very own framework, written in Sass. A responsive web design allows the app to be easily accessed across phone, tablet and desktop devices providing the optimum user experience across any model.

Challenges

Gareth spent some time despairing whilst he tried to integrate the Harvest API. This would allow a client to see how many retainer hours they had left for that month. He got this working in the end and we feel it’s something we can use to good effect with some tweaking.

Ramon had a few issues with Angular. He wanted to create a dynamic editing process that allowed the user to click on a task description and edit it directly without using added unnecessary cluttered UI elements like buttons and text boxes. This would also streamline our editing process as the user would never have to leave the page. Ramon did a great job to get this working, considering it was his first time using Angular and the project provided him with a great learning experience.

Andrew’s challenges were mainly styling related, however Ramon’s framework was easy to understand and enabled him to easily tweak any styling problems on the website. It was a good experience for Andrew to get to work closely with the developers on the same project using Git.

Roadmap

The iRequire app will allow employees at Cyber-Duck to track the hours and budget of retainers in one place. While still a long way from completion, we plan to test iRequire with Cyber-Duck's internal projects to measure its effectiveness in project management.

This project was created as part of the Quack Hack Hackathon, where the team created 6 projects in the space of 32 hours.