Time Tracking and Management System

Overview

The Time Tracking and Management System is a comprehensive web application designed to manage and track work hours efficiently. The system showcases a backend developed in both Go and Dart with functional programming principles, and a React frontend to provide an interactive user experience.

Features (longterm Goal)

  • User management: Registration, login, profile updates.
  • Time tracking: Start/stop time tracking, manual entry, break management.
  • Project management: Create and manage projects.
  • Reporting: Generate daily/weekly reports and export as PDF/CSV.
  • Real-time updates using WebSockets.
  • Role-based access control (RBAC) with a permission system.

Architecture

The project follows Domain-Driven Design (DDD) and Clean Architecture principles to ensure a modular, maintainable, and scalable codebase. The system is structured into well-defined layers with separation of concerns. The backend logic is divided in four primary layers:

  1. Domain-Layer: This layer contains only interfaces and definitions. Objects within can be regarded as contracts.
  2. Infrastructure-Layer: This layer contains implementations that rely on external sourcs. (e.g. database, configuration files)
  3. Application-Layer: All businesslogic is implemented within the application layer. This Layer defines how the applogic behaves and how the server responds.
  4. Interface-Layer: Analogous to the Infrastructure-Layer, this Layer defines the external interface of the application.

alt text

Technology Stack

  • Frontend: React, Axios/Fetch API, WebSockets, Styled Components.
  • Backend (Go):
    • GORM for ORM, go-redis for caching.
    • gorilla/websocket and gorilla/mux for WebSocket and HTTP handling.
  • Backend (Dart):
    • drift or aqueduct for ORM, redis_client for Redis integration.
    • shelf_web_socket for WebSocket handling.
  • Databases: PostgreSQL for primary data storage, Redis for caching and real-time updates.

Directory Structure

  • backend-go/: Go backend implementation.
  • backend-dart/: Dart backend implementation.
  • frontend-react/: React frontend implementation.
  • docs/: Documentation files, including LaTeX source for specifications and design diagrams.

Getting Started

Prerequisites

All prerequistes are already bundled with the devcontainer

  • Node.js (for the React frontend)
  • Go (for the Go backend)
  • Dart (for the Dart backend)
  • PostgreSQL and Redis servers

Installation

  1. Clone the repository:
    git clone https://inf-git.th-rosenheim.de/studavrije7683/ws24-kp-avril.git
    cd ws24-kp-avril
    

Requirements

  • Docker
  • (WSL on Windows)

Run Software

You can start developing and hacking by starting the dev container. Besides that you can also install the dev environment on your host system. Make sure versions do match.

IMPORTANT: Place the repository on a unix native file system before starting the devcontainer. Otherwise you will experience severe performance issues. On Windows I recommend pulling the git repository on a wsl instance. (e.g. Ubuntu) Then navigate inside the folder and run code . to launch visual studio code. Visual Studio code then asks you if the devcointainer should be launched.

Frontend

cd frontend-react
#deno install # devcontainer does this for you
deno run dev # starts web ui on port 3000

Go-Backend

cd backend-go
go run cmd/actatempus/main.go # Backend on port 8080

Dart-Backend

cd backend-dart
dart run bin/backend_dart.dart # Backend on port 8080

Database

To simplify things, we chose to use prisma as orm. This enables us to use the same database definition for go and dart. Therefore also error prone manually written sql queries can be avoided.

In order to deploy the database schema you need to run

bunx prisma db push

The prisma cli can be initialized with the following command:

bunx prisma

More: https://www.prisma.io/docs/orm/tools/prisma-cli

Bun Studio

After deployment, data can be accessed via a webui:

bunx prisma studio

Codegen

Inside the corresponding backend run: bunx prisma generate

Known Issues

Hydration issue caused by browser extensions

Some browserextensions inject js code. This leads to a mismatch between the ssr and the client rendered version. In case of grammerly, you can see that some attribute was injected in the dom data-lt-installed="true" alt text

Roadmap

  1. Phase: Initialize
  • Definition with Spec
  • Initialize Repository
  1. Phase: Initial Setup
  • Frontend with NextJS and Deno
  • Backend
    • Dart
    • Go
  • Dev-Container
  1. Phase: Implement backends (first Iteration) Goal: Implement working MVPs in GO and Dart to showoff functional programming in both languages
  • Frontend foundation (basic setup, not connected to backend)
  • Backend foundation
    • Dart
    • Go
  • Domain
    • Entities
    • Repositories
    • DataSources
  • Application (Business Logic)
    • Services (Endpoints)
    • DTOs
    • Authentication with JWT Token
    • Simple Authorization
  • Dart Testing
    • Rpository Tests
    • API Handler Tests

progress is currently here

  1. Phase: Web UI (second Iteration)
  • Introduce Permission System
  • Reporting for TimeEntries (with MapReduce...)
  • Frontend
    • Timetracker
    • Manage Projects
    • Manage TimeEntries
    • Manage Tasks
    • View Reports

Ideas for Advanced Features and further Iterations

  • Exports (Excel, PDF)
  • Maybe Billing
  • Multitennant

Resources

Zen of Go

Best of do's and dont's https://the-zen-of-go.netlify.app/

FP-Go Documentation

https://pkg.go.dev/github.com/IBM/fp-go

https://betterprogramming.pub/investigate-functional-programming-concepts-in-go-1dada09bc913

https://rlee.dev/practical-guide-to-fp-ts-part-1

Description
Timwetracker api tool to compare both languages
Readme 179 MiB
Languages
Dart 85.7%
Go 13.8%
Dockerfile 0.3%
Shell 0.2%