Initial Sztab Web UI

Goal

Begin work on the Sztab Web UI in parallel with backend REST functionality, as requested. The goal is to deliver a minimal but functional UI for early validation and feedback — even at the cost of slower backend feature velocity.

UI Technology Stack

We will use a lightweight, modern stack that prioritizes developer productivity and quick ramp-up:

This setup enables clean, maintainable UI with minimal boilerplate. We can later extend it with component libraries like shadcn/ui if needed.

Folder Structure

frontend/
├── index.html
├── public/
├── src/
│   ├── App.tsx
│   ├── main.tsx
│   ├── api/          # API interfaces to Spring Boot backend
│   ├── components/   # Shared visual components
│   ├── pages/        # Screens: Dashboard, Issues, Projects, etc.
│   ├── styles/       # Tailwind setup
│   └── index.css
├── tsconfig.json
├── tailwind.config.ts
└── vite.config.ts

First Milestone (target for PR)

• Scaffold the project using Vite + React + TypeScript
• Integrate Tailwind CSS
• Create sample pages for /users and /projects using existing REST endpoints
• Ensure clean separation of API, components, and page logic
• Enable CORS and confirm backend integration via REST calls

I will start by scaffolding the UI in a new top-level frontend/ directory and push initial commits. Later iterations will flesh out each page and support login/OAuth if needed.

Worklog (in progress – SZ-26)

Started work on the Sztab Web UI as requested by Artur. Given that this is a new technology stack for me (my background has primarily been in backend and system architecture), I’m taking a cautious but consistent approach to ramp up on modern frontend tooling.

To that end, I’ve selected the following stack based on speed of setup, large ecosystem, and ease of handoff to future frontend contributors:

• React + TypeScript (widely used, productive, and familiar to full-stack developers)
• Vite (blazing-fast dev server, low config friction)
• Tailwind CSS (avoids deep dive into CSS; allows fast iteration)
• Optionally shadcn/ui for clean, accessible UI components

The UI will live in a new top-level frontend/ folder in the monorepo.

Progress so far

• Project structure drafted (see issue description)
• Development environment partially set up locally (Vite scaffolding complete)
• First commit will drop a working scaffold: App.tsx, Tailwind setup, folder structure

Time management

Given that my hands are already full with backend responsibilities, I’m setting a realistic pace: aiming for small, meaningful code drops every 2–3 days, with a strong emphasis on code clarity and maintainability. This will allow Artur and others to run and test early versions, while giving me space to avoid frontend technical debt.

Next few steps

•  Create /users and /projects pages, integrating backend REST APIs
•  Add reusable layout components and navigation
•  Confirm CORS behavior and tweak Spring Boot config if needed
•  Enable backend-driven page testing (you can try real flows)

Sztab MVP: Backend Requirements for First UI Code Drop

This document outlines the minimal set of backend functionality required to support the first user interface showcase for Artur.

First UI Drop: Backend Requirements

Authentication / Access (Minimal)

• Use admin users only for now (hardcoded or bootstrap users).
• Role assignment can be skipped — no UI for RBAC needed yet.

Project Management

•  List all projects
•  Create a new project
•  View project details (optional)
•  Associate users with project (already modeled via @ManyToMany, can default for now)

Issue Management

•  Create a new issue
•  List issues for a given project
•  Assign issue to a user
•  Filter issues by:
  • Reporter
  • Status
  • Priority
  • Assignee
  • Age (createdAt or updatedAt range)

Git Repository (Minimum)

•  Create a GitRepo — required for associating a repo with a project.
•  Update/delete GitRepo — defer to next UI drop.

User Management

•  Create users (admin-only for now)
•  List users
•  Role assignment — defer
•  Delete/update users — defer

Optional Polishing (Nice to have)

• Splash screen on login
• Empty-state UI for no projects/issues
• Basic logout/logout
• Friendly error messages

Summary

This setup is sufficient for Artur to:

• Log in
• See all projects
• Pick a project
• View and filter its issues
• Create new issues and assign them to users
• See associated GitRepos (if surfaced)

Progress update – Nov 6, 2025

Branch: feature/sz-26-web-ui-scaffolding

Status: Environment and base scaffold completed

Details: • Created dedicated branch feature/sz-26-web-ui-scaffolding off wolnosc. • Installed Node.js 25.1.0 and npm 11.6.2 via Homebrew. • Initialized a new Vite + React + TypeScript app under sztab-ui/. • Installed and configured Tailwind CSS v4 (zero-config). • Verified that Tailwind styles render correctly in the browser (Tailwind v4 is working!). • Ready to proceed with initial Sztab layout components: Sidebar, Navbar, and Dashboard.

Next steps: 1. Implement minimal responsive layout (Sidebar + Navbar + Dashboard with mock data). 2. Commit as feat(ui): initial Sztab UI layout scaffold. 3. Push branch to remote for visibility and review.

Worklog — SZ-26: Web UI Scaffolding (Day 1 – UI Foundation, Router & Splash)

Date: 2025-11-05 → 2025-11-06
Branch: feature/sz-26-web-ui-scaffolding

Summary

Set up the initial Sztab web UI using Vite + React + TypeScript + Tailwind v4, ensuring a clean, modern, and themable frontend foundation compatible with backend APIs.

Completed Tasks

• Created new branch feature/sz-26-web-ui-scaffolding from wolnosc.
• Installed Node.js 25 and npm 11 via Homebrew (fixed sqlite dylib linkage issue).
• Scaffolded React + TS project with Vite:

  npm create vite@latest sztab-ui -- --template react-ts
  

• Installed and configured TailwindCSS v4 (modern import syntax via @import "tailwindcss";).
• Added custom PostCSS config and fixed compatibility issues.
• Integrated Tailwind animations (fadeIn) for UI transitions.
• Implemented React Router with placeholders for:
  • Dashboard
  • Projects
  • Issues
  • Pull Requests
  • Users
• Added reusable Navbar and Sidebar components.
• Implemented an animated Splash Screen:
  • Shows minimalist Sztab branding and version.
  • Tagline “Powered by Tygrys” (italicized, gold tone).
  • Smooth fade-in/out animation.
• Integrated a Polish cultural logo concept based on the White Eagle (Orzeł Biały):
  • Minimalist line-art eagle with crown.
  • Red/white/gold color palette for brand continuity.

Outcome

Sztab UI now:

• Boots with a sleek splash screen (Sztab vX.Y.Z – Powered by Tygrys).
• Transitions into the routed dashboard view.
• Has fully working client-side navigation and Tailwind styling.

Visual Reference

Latest working UI and splash screen captured at 00:39 AM PST, 2025-11-06.

Time Spent

Approx. 3.2 hours (incl. Node reinstall, Tailwind v4 troubleshooting, router setup, splash UI, logo integration).

🚀 Next Steps

1. Navbar + Sidebar polish

   • Add icons for sections (Dashboard, Projects, Issues, etc.) using Lucide React.
   • Make sidebar collapsible for smaller screens.

2. Dashboard mock content

   • Create placeholder metrics (e.g., total users, open issues, PRs pending review).
   • Integrate fake data JSON for layout testing.

3. Theming

   • Introduce Tailwind color tokens for Sztab Red, Gold, and Slate Gray.
   • Enable dark/light toggle (via Tailwind data-theme).

4. Authentication placeholder

   • Add Keycloak login button stub with “Connect via Tygrys Auth”.
   • Route /login page for future integration.

5. Build configuration

   • Ensure sztab-ui builds cleanly under npm run build.
   • Add output (dist/) ignored in .gitignore.

Next work session: connect mock data + refine layout (ETA: 2h)

This issue was originally opened as a broad direction to begin developing the Web UI alongside backend functionality, so that the UI could evolve in parallel and be tested in real-use scenarios.

Over the past few weeks, that foundation has been built and verified in v1.4: • Functional login/logout with session-based authentication • Persistent Spring Security context via cookies • Splash screen and dashboard integration • Unified Docker Compose stack (PostgreSQL + Backend + UI)

At this point, the intent of this issue — to kickstart the UI effort in parallel with backend work — has been achieved. However, since the scope is too broad for closure as a single deliverable, I’m converting it into a tracking issue for ongoing UI development.

Follow-up focused issues will cover specific UI areas:

• https://tigase.dev/sztab/~issues/37: Splash screen transition and visual polish
• https://tigase.dev/sztab/~issues/38 - user self service, profile update
• Admin User Management (Create, List, Update, Delete Users) (SZ-39)

Once these are completed and reviewed, SZ-26 can be marked as fully resolved.