Pomodoro timer with offline capabilities
Powerful pomodoro timer with offline capabilities, local caching, real-time task synchronization, OPEN REST API, and pixel perfect animations built on top of ReactJS and NodeJS and deployed on heroku.
Add, edit and delete tasks freely with ease of use - every task is sync'ed across multiple devices in real time thanks to the adoption of a noSQL realtime database powered by the Google Cloud infrastructure
Add tasks through the expanded task list, available expanding the right drawer, or directly through the task editor
Edit your task's name, completion, estimated pomodoro and let the Cromato automatically update it and sync it across every device
If you accidentally added a task, or simply changed your mind you can always delete it!
Regardless of the elapsed pomodoro, you can always check the task you have completed and keep track of your progresses!
Adjust application's and timer specific settings such as pomodoro durations, auto-closing drawer, editor auto-focus and offline mode
Check you performance in realtime, and generate report to evaluate your efficiency
The system has been designed around a NodeJS server that:
- serve the
cromato-client-reactjs - provide
Open REST APIfor statistical purposes for 3rd party applications
The client is a single page PWA web app built on top of ReactJS served by the NodeJS server and deployed over Heroku.
The application uses the noSQL Google Firebase real time database in conjuction with firestore to secure, store and retrieve all the tasks and associated information. The database has been deployed and managed with the Google Cloud Console.
db access rules restrictions: only the owner of the data can read/write
The server has been implemented in NodeJS using express with the following notable deps:
firebase-admin-sdkpassportpassport-google-oath20cookie-sessiondotenvcors
The database holding the application data as well as settings and statistics (partials) has been deployed on Firebase/Google Cloud Platform. The NodeJS backend and the React PWA have been deployed on Heroku.
When deployed, the backend is first build, then the cromato-client-reactjs is built using Heroku postbuilt.
heroku-postbuild": "cd cromato-client-reactjs && npm install --only=dev && npm install && npm run build
Both the backend and client are automatically deployed on Heroku once a commit or PR is pushed on the branch master.
Both the React PWA client and the Open REST API are secured using Google's OAuth2.0 with registered Google API Key credential.
The OPEN REST API provides all the statistics available in the PWA client and more (e.g. overdues tasks) along with all the tasks and their details as well as a basic user profiling. All the endpoints required the user to auth using Google's Oauth2.0 and provide information only regarding the auth user. An extra layer of protection has ben added in the DB access rules, allowing the auth user only to read/write his data.
| Exposed endpoint path | description | response type |
|---|---|---|
/api |
Main entry-point | REDIRECT |
/api/auth |
Auth using Google's OAuth2.0 | REDIRECT |
/api/auth/callback |
Callback from OAuth2.0 | REDIRECT |
/api/statistics |
Provide statistics | JSON |
/api/fail |
onAuth failed | JSON |
/api/signout |
Signout and destroy server's session | JSON |
/api/loggedout |
onSignOut | JSON |
The React PWA client offers pre-enabled offline support with additional opt-in offline-first implementation. The client automatically detects network throttling and/or interruptions and when necessary cache data locally allowing the user to use the application even in cases of service disruption.
You can add/remove/edit tasks while offline and push them as soon as you go online
Optionally is possible to enable the offline-mode in the settings modal. This will force the client to cache data locally and will interrupt any communication and/or subscription handle with the server.
The NodeJS server has been dockerized per-specification and a .dockerignore has also been created.
- Version control: GitHub |
🏷️req 3.1 - NodeJS backend |
🏷️req 3.2 - Front-end: ReactJS |
🏷️req 3.3 - Persistent storage: Firebase
🏷️req 3.4 - Purpose: time management |
🏷️req 3.5 - Documentation: availble on readme file |
🏷️req 3.6 - User can auth (wigh google OAuth 2.0) to store his tasks or (todos) |
🏷️req 3.7 - the NodeJS will provide a REST API that serves all the data (todos / user-info etc)
🏷️req 3.8
- Data collection: add tasks (todos)
- statistics function: productivity performances (tasks created/completed, pomodoro run etc...) |
🏷️req 4.9
- statistics function: productivity performances (tasks created/completed, pomodoro run etc...) |
- Separate view to display productivity performance (display statistics) |
🏷️req 4.10 - NodeJS OPEN REST API that provides statistics |
🏷️req 4.11 - " Distinctive Cloud Technology ": Serverless functions |
🏷️req 4.12
- Create a deployable docker image |
🏷️req 5.13 - either:
🏷️req 4.14- deploy with GH Actions
- build with GH Actions
- React Offline capabilities |
🏷️req 4.15- You can add/remove/edit tasks (todos) while offline and push them as soon as you go online
- OPEN REST API (statistics) must verify the user identity before serving the request |
🏷️req 4.16 - In-depth documentation on readme with technical explanation |
🏷️req 4.17