Skip to content

feat: Modernise and redesign the web application UI #5

@mukund-gohil-atos

Description

@mukund-gohil-atos

Summary

The current web app (codewiki/src/fe/) has a functional but minimal UI built with
FastAPI + Jinja2 templates. A modern, polished redesign will improve developer
experience and make the project more approachable.

Goals

  • Refresh the visual design with a modern look and feel (dark/light mode support)
  • Improve the repository submission form UX (URL validation, commit selector)
  • Add a real-time progress view for documentation generation jobs
    (streaming log output instead of polling)
  • Make the documentation viewer richer: syntax-highlighted Markdown,
    collapsible module tree sidebar, Mermaid diagram rendering
  • Mobile-responsive layout
  • Add a proper navigation header/footer with project branding

Suggested Stack Choices (open for discussion)

  • Keep FastAPI backend as-is
  • Frontend: upgrade Jinja2 templates with Tailwind CSS + Alpine.js,
    OR move to a lightweight React/Vite SPA served by FastAPI
  • Mermaid.js for in-browser diagram rendering

Files Affected

  • codewiki/src/fe/templates.py and codewiki/templates/ — update HTML templates
  • codewiki/src/fe/routes.py — update API endpoints as needed
  • New static assets directory for CSS/JS

Acceptance Criteria

  • New design implemented and responsive on mobile
  • Dark/light mode toggle
  • Real-time job progress via SSE or WebSocket
  • Mermaid diagrams rendered in the doc viewer
  • Existing functionality (job submission, status, doc serving) unaffected

Metadata

Metadata

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions