TimeKeeper

Related to this Quarkus Hackaton, we decided to build a plain and simple Quarkus + React application. We integrated Keycloak, React, Swagger, SmallRye Metrics, GraalVM native deployment.

Comment

Inspiration

As a service company, we use time-tracking / timesheets application for years... and we always wanted to build our own solution. Quarkus generated a lot of interestes within our company. We decided to start and to write a sample application, that became TimeKeeper. It's a 4 months journey, with a lot of fun and discoveries.

What it does

This Web application is a timesheet entry applicaiton. The software allows each employee to record the activities of his or her day. The tool takes into account vacation, corporate events, and per-project budgets. It will then allow project administrators to easily generate invoices for each project at the end of the month.

You can test the 'latest' version that is deployed automatically on Clever-cloud here : https://acceptance.timekeeper.lunatech.fr

Username : alice Password : alice

Or another user : Username : demo Password : demo

Why did you develop this software?

We wanted to create a fast and simple tool adapted to our activity as a consulting firm. Entering hours and work can be daunting. That is why we plan to add a gamification component to our software. Inspired by sports coaching tools, TimeKeeper helps you to improve your statistics, and to increase the quality and regularity of your timesheet input.

Why Quarkus?

Our first tests with Quarkus quickly showed us the simplicity and power of the tool. We decided to write a very classic application (i.e. time tracking), in order to show a real example of software, coded on the basis of Quarkus.

Authentication is managed by Keycloak.

The graphical interface is coded with React, which also allows us to show an example of a full-stack project.

What Quarkus extensions did you use?

The application consists of a Quarkus backend in version 1.3, with the use of RESTEasy and Jackson for the Web layer. Firstly, we have used Swagger and the OIDC module to expose a complete API with Swagger. This makes it easy to test our backend. Note that we have also connected the Swagger API with Keycloak, which allows us to test the API access points by authenticating. The Persistence layer uses Panache with a PostgreSQL relational database. The Flyway extension is responsible for updating the schema.

The application already uses SmallRye-Health and exposes standard health-check endpoints, which then facilitates its use in the Cloud.

SmallRye Metrics allows the implementation of the MicroProfile Metrics 2.3 API in our application. This gives us a very simple way to track the number of invocations and call durations for our main resources.

We integrated Keycloak as a Docker container, also customizing the GUI. Keycloak serves several clients: Quarkus, the React application but also the Swagger API. The tool has also been configured with the integration of our Google domain, which allows Lunatech employees to authenticate themselves automatically.

Finally on the testing side, we integrated Keycloak and the use of Quarkus to perform full integration tests. One of the selling points of Quarkus is the ease of writing powerful and complete tests. Here, there is no mock or partial testing: the API is tested with REST Assured, and a small tool we coded to simplify testing.

Challenges we ran into

We decided to deploy the application on a PaaS platform, Clever-cloud. But in january 2020, the GraalVM support was not up-to-date on the Clevercloud side. We investigated and managed to fix the various issues. See this video in French https://www.youtube.com/watch?v=awZ-bCSqbu8&list=PLp7l6aUrkPog_OCfZQzMNYCtXgPQGOwNO&index=2&t=0s

We're also happy to use Swagger and the OpenAPI extension of Quarkus. We had small issues to connect our swagger API with the Keycloak system. Guess what... another article about this here : https://lunatech.fr/2020/06/18/quarkus-swagger-et-keycloak-comment-les-reunir-en-respectant-les-gestes-barrieres/

Accomplishments that we're proud of

This project was built by a team :

  • Laurie was the product owner
  • Thierry and Guillaume are 2 students at Lunatech, and this is also their first project
  • Fabrice, Raymond and Sebastien had to find a project during the COVID-19 and they helped us a lot of the Architecture / Security / Docker / GraalVM part of this project
  • Geoffroy is our UX-UI Designer, he was also happy to learn react during this project
  • François was hired as a new Lunatech employee, and worked on this project during 2 months
  • Coline helped us at the beginning with the React part of the application
  • Nicolas finally suggested that this project should be open-sourced, and registered the team for this Hackaton

The code is available here under Apache 2.0 license : https://github.com/lunatech-labs/lunatech-timekeeper

What we learned

This project for us is a "typical simple and not so stupid project" that a lot of companies will do. It's not a killer Quarkus extension or an I.o.T project. It's Timekeeper, a Quarkus backend, with a React frontend, using Keycloak for authentication and autorization.

We're happy if this project can help anyone to learn Quarkus, backend tests with docker + keycloak, how can you integrate react with quarkus in one project, how can we use Cypress for end-to-end testings... etc.

We learn a LOT of things in a very short period of time (february till july)

In term of hosting, the GraalVM version of Quarkus is just amazing : 0,20 EUR per day on Clever-cloud ! ! That's insane! We can also auto-scale in a few ms, thanks to the fast startup time of this application.

What's next for TimeKeeper

We started to work on a SaaS web site and we plan to launch a service in september.

Next step on our roadmap is the gamification part of the application. We want to build something that is close to the sport tracker application, something that should give us energy and motivation to use TimeKeeper.

The code is and will stay open-source.

Built With

+ 18 more
Share this project:

Updates