App Review: ProcessLog

ProcessLog (v1.0) is a static single-page project tracking dashboard built for a user named Lina, a fashion designer. The app renders data from a hardcoded JavaScript object (sampleData) rather than a live API. It presents a single project — "Spring Collection Concept" — organized into three numbered phases with associated artifacts.

The layout is divided into three columns:

Left sidebar — Project Stats: Displays total projects (1), completed projects (0), phases tracked (3), total artifacts (3), and active projects (1).
Main content area: Shows the project title, category badge ("Fashion Design"), status badge ("In Progress"), and start date (Jan 31, 2026). Below that, three collapsible Project Phase cards are listed: Research (Moodboard artifact), Ideation (Sketch artifact), and Prototype (Prototype artifact). A "Reflections & Insights" section below the phases shows Key Challenges, Lessons Learned, and Next Steps — all hardcoded notes from the designer.
Right sidebar — Project Timeline: A simple vertical timeline that lists the three phases (Research, Ideation, Prototype) each labeled with the parent project name.

Observed Behavior

The phase cards (Research, Ideation, Prototype) are clickable — clicking toggles the dropdown arrow between ▼ and ▲, indicating an expand/collapse intent. However, the actual phase content (description + artifact) does not visually collapse when clicked, meaning the toggle logic updates the CSS class (expanded) but the layout doesn't change noticeably in the default state.
The artifact rows show a → arrow link styled as a clickable element. Clicking these triggers a alert() popup that says "File: [filename]" (e.g., moodboard_spring.jpg) — confirming artifact links are placeholders rather than real files.
The right-side timeline entries and the left-side stats cards are purely decorative — clicking them has no effect.
The app is fully functional as a visual mock with no backend, no routing, and no user input fields.

Things That Didn't Work as Expected

Phase collapse doesn't work visually: Clicking a phase card toggles the arrow indicator (▼ → ▲) but does not actually hide or collapse the phase description and artifact list. The togglePhaseExpand() function adds an expanded class to the element, but no corresponding CSS rule hides child elements when the class is absent or present. The expand/collapse feature is essentially broken.
Artifact → arrows are dead links: The arrow button on each artifact row is styled to look like a navigation trigger, but only shows a browser alert() with the filename. Users would reasonably expect a preview, modal, or link to open.
Only one project is supported: The data model supports an array of projects, but only one is present and there is no UI to switch between multiple projects or add new ones.
Progress bar appears but is static: A thin progress bar is rendered under "Phases Tracked" in the left sidebar, but it always appears at the same fixed width regardless of actual completion status (0 of 1 projects completed). It doesn't reflect real progress.
Timeline has no timestamps: The Project Timeline on the right shows phase names but no dates, making it visually decorative rather than informative.

Improvement Prompt

Improve the ProcessLog app with the following fixes and feature additions: 1. **Fix phase collapse:** When a phase card is clicked, actually toggle the visibility of its description and artifact list. The phase header (number + name + arrow) should remain visible, but the body content should animate open/closed using CSS max-height transitions. 2. **Replace artifact alerts with modals:** When the → arrow on an artifact is clicked, open a styled modal/overlay that shows the artifact type, title, a placeholder image (or an icon if no image), and metadata. Include a close button. 3. **Make the progress bar dynamic:** Calculate the progress bar fill width based on the ratio of completedProjects / totalProjects (or completed phases / total phases). Use a CSS custom property to animate the bar fill. 4. **Add timeline dates:** Pull startDate from the project data and assign estimated phase dates (e.g., evenly distributed across the project duration). Display these next to each timeline item in the right sidebar. 5. **Support multiple projects:** Render all items in the projects[] array and add a left-sidebar project list or tabs so users can switch between projects. Highlight the active project. 6. **Add an "Add Project" / "Add Phase" form:** Include a collapsible form at the bottom of the left sidebar that lets users define a new project (title, category, start date) and add it to the view dynamically using localStorage for persistence. 7. **Status-based color coding:** Color the phase number badges and artifact icons differently based on a phase status field (e.g., "complete" = green, "in-progress" = yellow, "not-started" = gray).

📋 ProcessLog — App Review

Loaded Source URL

What the App Does

Observed Behavior

Things That Didn't Work as Expected

Improvement Prompt