Three Prompts: Software Team Tool Dashboard

•AI Assistant

Three Prompts: Software Team Tool Dashboard

Software Team Tool Dashboard demonstration

Introduction

Managing software team capacity and project allocation is a common challenge for engineering managers. The Software Team Tool Dashboard is a lightweight, browser-based solution that helps track team members, projects, and assignments without the complexity of external databases or backend systems. Built entirely with React and Vite, this single-page application demonstrates how a practical internal tool can be created with minimal dependencies while providing valuable visualization of team capacity and project progress.

What makes this project particularly interesting is that it was created using only three AI prompts, yet it delivers a fully functional tool with features you'd expect from commercial team management software. The application showcases how modern web technologies can be leveraged to create practical business tools that run entirely in the browser.

The Three Prompts

Here are the exact prompts that were used to create this project:

Prompt 1


@projects/software-team-tool-poc 


You are to generate a minimal internal web app—a single-page dashboard—for a software company to track people and projects.

============ 1. TECH / SETUP ============
• Build a single-page application that runs entirely in the browser—**no backend, server, or external database**.
• Persist all data in `localStorage` via a tiny utility module (`storage.js`) exposing `get`, `set`, `update`, and `remove` helpers.
• Use any lightweight front-end stack you like (plain HTML/CSS/JS, React + Vite, Svelte, etc.). Keep dependencies minimal.
• The app must start with one simple command (`npm run dev`, `yarn dev`, or by double-clicking `index.html` if you go fully static).
• Provide a concise **README** that covers prerequisites, how to launch the app, and how to clear or reset the stored data.

============ 2. DATA MODELS ============
Represent data as plain JavaScript objects stored in the browser.

**Person** (covers both developers & designers)
- `id` (string UUID)
- `name` (text, required)
- `role` (enum: Developer | Designer)
- `level` (enum: Junior | Mid | Senior | Lead)
- `weekly_capacity` (int, hours per week, default 40)

**Project**
- `id` (string UUID)
- `name` (text, required)
- `dev_hours_needed` (int)
- `design_hours_needed` (int)
- `qa_hours_needed` (int)

**Assignment** (links Person → Project)
- `person_id` + `project_id` (composite key)
- `allocation_pct` (int 0-100, percentage of the person's weekly capacity committed to this project)
- Enforce via client-side validation that the sum of a person's `allocation_pct` across all projects never exceeds 100 %.

============ 3. CORE SCREENS ============
1. **People List**
   • Table with Name, Role, Level, Weekly Capacity, and % Allocated (run-time calculation).  
   • “Add” and “Edit” dialogs/modal forms; changes persist immediately to `localStorage`.

2. **Projects List**
   • Table with Name and three columns showing **hours still needed** in Dev, Design, and QA (total needed – sum of current assignments in hours).  
   • “Add” and “Edit” dialogs.

3. **Assignments**
   • Project detail page listing the current team with their `allocation_pct`.  
   • Dropdown or autocomplete to add a person + % allocation; instant validation prevents overallocation (>100 %).

4. **Dashboard / Capacity Heat Map**
   • For every Person, render a horizontal bar:  
     - **Green** ≤ 80 % of capacity used  
     - **Yellow** 81-100 %  
     - **Red** > 100 % (should be impossible but acts as a safeguard).  
   • Provide simple filters (by Role, Level, Over-allocated only).

============ 4. BUSINESS RULES ============
• A Person's total `Σ allocation_pct` across all projects ≤ 100; block or auto-correct any operation that violates this.
• When displaying project hours still needed, compute:
  `remaining_dev = dev_hours_needed - Σ(dev allocations in hrs)`
  (same for Design & QA). Render negative numbers in **red**.
• Levels (Junior/Mid/Senior/Lead) are purely informational; they do **not** affect capacity math.

============ 5. UI GUIDELINES ============
• Bare-bones styling—default CSS or a lightweight utility (e.g., Tailwind) is fine.
• Forms should be short, labels clear, and the layout mobile-friendly.
• Show toast or inline messages for success/failure feedback.

============ 6. DELIVERABLES ============
1. Complete source (e.g., `index.html`, `main.js`, `style.css`, `storage.js`).
2. README with quick-start, build/run instructions, and how to reset localStorage.
3. (Optional) a tiny GIF or screenshot of the dashboard.

Keep everything lightweight and straightforward—this is an internal utility, not a polished product.

Prompt 2

Continue

Prompt 3

Now I want you keep evrything working the way it is.


Update the name of Dashbaord to "Team Dashboard"

Then add a new "Project Dashbaord" tab

This should allow for viewing each project in the same way we can view people right now
- Capacity heatmap for devs and designers for each card

Also remove the "Reset all data" button

Technologies Used

  • React 19: For building the component-based user interface
  • Vite: As the build tool and development server
  • localStorage API: For client-side data persistence without a backend
  • Context API: For state management across components
  • CSS: Custom styling for a clean, responsive interface

Key Features and Functionality

People Management

The application allows users to add, edit, and delete team members with specific roles (Developer or Designer), experience levels (Junior, Mid, Senior, or Lead), and weekly capacity hours. Each person's total allocation across projects is tracked and visualized.

Project Management

Users can create and manage projects with specific hour requirements for development, design, and QA work. The system tracks remaining hours and provides visual indicators when projects are at risk of exceeding allocated resources.

Team Dashboard

The Team Dashboard provides a heat map visualization of each team member's allocation across projects. Color-coded capacity bars instantly show who is under-allocated (green), at capacity (yellow), or potentially over-allocated (red).

Project Dashboard

The Project Dashboard offers a project-centric view with progress bars showing completion percentages for development, design, and QA work. Each project card displays team member allocations with capacity heatmaps, making it easy to identify resource distribution.

Assignment Management

The application enforces business rules such as preventing a person's total allocation from exceeding 100% across all projects. Users can easily assign team members to projects with percentage-based allocation that automatically calculates hours based on weekly capacity.

Implementation Details

Data Persistence

One of the most interesting aspects of this application is its use of browser localStorage for data persistence. A custom utility module (storage.js) provides a clean API for CRUD operations with error handling and consistent key prefixing:

// Example of the storage utility
const PREFIX = 'team-tool-';

export const get = (key, defaultValue = null) => {
  try {
    const item = localStorage.getItem(`${PREFIX}${key}`);
    return item ? JSON.parse(item) : defaultValue;
  } catch (error) {
    console.error(`Error getting ${key} from localStorage:`, error);
    return defaultValue;
  }
};

State Management

The application uses React's Context API to provide a centralized state management solution. The AppContext provider handles all CRUD operations for people, projects, and assignments, making the data available throughout the component tree:

export function AppProvider({ children }) {
  // State for people, projects, and assignments
  const [people, setPeople] = useState([]);
  const [projects, setProjects] = useState([]);
  const [assignments, setAssignments] = useState([]);
  
  // Load data from localStorage on initial render
  useEffect(() => {
    setPeople(storage.get(STORAGE_KEYS.PEOPLE, []));
    setProjects(storage.get(STORAGE_KEYS.PROJECTS, []));
    setAssignments(storage.get(STORAGE_KEYS.ASSIGNMENTS, []));
  }, []);
  
  // ... CRUD operations and business logic
}

Dynamic Calculations

The application performs real-time calculations for project progress, remaining hours, and team allocation. For example, the Project Dashboard component calculates metrics such as development completion percentage based on allocated hours versus required hours:

// Calculate project metrics
const metrics = {
  devCompletion: project.dev_hours_needed > 0 
    ? Math.min(100, (devHours / project.dev_hours_needed) * 100) 
    : 0,
  designCompletion: project.design_hours_needed > 0 
    ? Math.min(100, (designHours / project.design_hours_needed) * 100) 
    : 0,
  // ... other metrics
};

Responsive UI

The application features a responsive design that works well on both desktop and mobile devices. The layout adapts to different screen sizes, and the navigation tabs provide easy access to all main features.

Challenges and Solutions

Challenge: Data Relationships Without a Database

Without a traditional database, maintaining relationships between entities (people, projects, and assignments) could have been difficult.

Solution: The application uses a simple but effective data model with reference IDs to maintain relationships. When displaying data, it performs client-side joins to reconstruct the relationships between entities.

Challenge: Preventing Over-allocation

Ensuring that team members aren't allocated beyond 100% of their capacity across multiple projects required careful validation.

Solution: The application implements validation logic that calculates a person's total allocation before allowing new assignments. If an assignment would push someone over 100%, the operation is blocked and the user is notified.

Challenge: Visualizing Capacity and Progress

Creating intuitive visualizations for team capacity and project progress without complex charting libraries was challenging.

Solution: The application uses CSS-based progress bars and heat maps with color-coding to provide clear visual indicators. These simple but effective visualizations make it easy to spot potential resource issues at a glance.

Conclusion

The Software Team Tool Dashboard demonstrates how a practical internal tool can be built with minimal dependencies while still providing valuable functionality. By leveraging browser localStorage for data persistence, the application eliminates the need for backend infrastructure while still offering a robust solution for tracking team capacity and project progress.

This project showcases the power of modern web technologies and how they can be used to create practical business tools. The fact that it was built using only three AI prompts highlights how AI can accelerate the development of useful applications.

Potential improvements could include adding data export/import functionality, implementing more advanced filtering options, or adding time-based tracking to monitor allocation changes over time.

Explore the live demo to see the Software Team Tool Dashboard in action, and check out other Three Prompts projects to discover more AI-generated applications.