What We Are Building

A SaaS analytics dashboard with a collapsible sidebar, multiple chart types, a searchable data table, user authentication, and export functionality. This is the kind of internal tool that typically takes a frontend developer two to three weeks to build from scratch. With VULK, the first working version takes minutes.

This tutorial walks through the exact prompts and iteration workflow to go from nothing to a polished, deployable dashboard.

Step 1: The Initial Generation Prompt

The quality of the initial generation depends entirely on how much context you provide. Here is a prompt that consistently produces a strong foundation:

Build a SaaS analytics dashboard for a project management tool.

Layout: Fixed sidebar on the left (240px, collapsible to icons only
on mobile), top header with user avatar and notification bell,
main content area with padding.

Sidebar navigation:
- Dashboard (home icon)
- Projects (folder icon)
- Tasks (checkbox icon)
- Team (users icon)
- Reports (chart icon)
- Settings (gear icon)

Dashboard page content:
1. Top row: 4 stat cards showing Total Projects (127),
   Active Tasks (843), Team Members (24), Completion Rate (87%)
   Each card has an icon, value, label, and percentage change
   from last month (green for positive, red for negative)

2. Middle row: Two charts side by side
   - Line chart: "Task Completion Trend" showing last 12 months
   - Bar chart: "Projects by Department" with 6 departments

3. Bottom row: Data table "Recent Tasks" with columns:
   Task Name, Project, Assignee (with avatar), Priority
   (Low/Medium/High badges), Status (To Do/In Progress/Done
   badges), Due Date. Include search input and pagination
   (10 rows per page).

Color scheme: White background, slate-gray sidebar, blue accent
color (#3B82F6) for active states and primary buttons.
Use Tailwind CSS and Recharts for charts. TypeScript.

This prompt specifies layout dimensions, navigation structure, data content, chart types, table columns, and visual design. The AI does not need to guess at any of these decisions.

Step 2: Reviewing the Initial Output

After generation, VULK's preview shows the complete dashboard. Here is what to check:

Layout structure. The sidebar should be fixed-position, the header sticky, and the content area should scroll independently. Verify that the sidebar collapses correctly on smaller viewports.

Chart rendering. Recharts components should render with proper axes, labels, and responsive containers. The data should match what you specified — 12 months for the line chart, 6 departments for the bar chart.

Table functionality. The data table should render all columns, display badge-styled priority and status fields, and include the search input and pagination controls.

Component organization. Check that the generated code uses separate component files — Sidebar.tsx, StatCard.tsx, TaskTable.tsx, CompletionChart.tsx — rather than putting everything in a single page file.

Step 3: Adding Authentication

The initial prompt focused on the dashboard UI. Now add authentication:

Add authentication to this dashboard. Include:
- Login page with email and password fields, "Remember me"
  checkbox, and "Forgot password" link
- Registration page with name, email, password, confirm password
- Protected routes: redirect to /login if not authenticated
- User context that stores the logged-in user's name, email,
  and avatar URL
- Logout button in the sidebar footer
- Show the user's name and avatar in the top header

Use a simple auth context with localStorage for the session.
The login form should validate email format and require
password minimum 8 characters.

This generates a complete auth flow with form validation, route protection, and user state management. The surgical edit system adds these files without regenerating the existing dashboard components.

Step 4: Enhancing Charts and Data Visualization

The initial charts are functional but basic. Improve them:

Enhance the dashboard charts:

1. Make the line chart interactive: show tooltip with exact
   values on hover, add a gradient fill below the line,
   and include a toggle to switch between "Tasks Completed"
   and "Tasks Created" datasets

2. Add a donut chart next to the bar chart showing
   "Task Status Distribution" with segments for To Do (blue),
   In Progress (yellow), Done (green), and Overdue (red).
   Show the total count in the center of the donut.

3. Add a date range picker above the charts section.
   Options: Last 7 days, Last 30 days, Last 3 months,
   Last 12 months, Custom range. The selected range
   should filter all chart data.

Each follow-up prompt builds on the existing code. The AI understands the component structure from the initial generation and modifies the correct files.

Step 5: Building the Data Table Features

Data tables are where SaaS dashboards become genuinely useful. Expand the table:

Upgrade the Recent Tasks table:

1. Add column sorting: click any column header to sort
   ascending/descending. Show a sort arrow indicator.

2. Add filters: dropdown filters for Priority (All/Low/Medium/High)
   and Status (All/To Do/In Progress/Done). Filters work
   alongside the search input.

3. Add row selection: checkbox on each row, "Select All" checkbox
   in the header. Show a floating action bar when rows are
   selected with options: "Mark as Done", "Delete", "Export Selected"

4. Add an "Export CSV" button that downloads the current filtered
   view as a CSV file.

5. Increase to 25 mock data rows with realistic task names
   and varied statuses.

This is a dense prompt, but each requirement is specific. The AI generates sorting logic, filter state management, CSV generation, and selection handling — all integrated into the existing table component.

Step 6: Adding the Projects Page

Dashboards need more than one page. Expand the sidebar navigation:

Build the Projects page (accessible from the sidebar).

Content:
- Header with "Projects" title and "New Project" button
- Grid of project cards (3 columns on desktop, 1 on mobile)
- Each card shows: project name, description (truncated to
  2 lines), progress bar with percentage, team member avatars
  (stacked, max 3 with +N overflow), due date, and a
  status badge (Active/On Hold/Completed)
- Search bar and filter by status at the top
- "New Project" button opens a modal with: project name,
  description textarea, start date, due date, team member
  selection (multi-select dropdown), and priority selection

Include 9 mock projects with varied data.

Step 7: Adding the Settings Page

Build the Settings page with tabs:

1. Profile tab: form with avatar upload area, name, email,
   job title, and bio textarea. Save button at bottom.

2. Notifications tab: toggle switches for email notifications
   (task assigned, task completed, project updates, weekly
   digest). Each toggle has a label and description.

3. Appearance tab: theme selector (Light/Dark/System) with
   preview thumbnails, and sidebar position (Left/Right)
   radio buttons.

4. Security tab: change password form (current password,
   new password, confirm new password) and two-factor
   authentication toggle with setup instructions.

Iteration Tips for Dashboard Projects

After building the core pages, these follow-up prompts improve polish and usability:

Responsive behavior:

Make the sidebar collapse to a hamburger menu on screens
below 768px. The sidebar should slide in as an overlay
with a backdrop. Add smooth transition animations.

Loading states:

Add skeleton loading states for the stat cards, charts,
and data table. Show skeletons for 1.5 seconds when the
dashboard first loads, simulating an API fetch.

Empty states:

Add empty state illustrations for when there are no tasks
(show a clipboard icon with "No tasks yet" message) and
no projects (show a folder icon with "Create your first
project" message and a CTA button).

Dark mode:

Add dark mode support. The theme toggle in Settings should
switch between light and dark themes. Dark mode: #1a1a2e
background, #16213e sidebar, #e2e8f0 text. Store preference
in localStorage.

What to Review Before Deploying

Before deploying your generated dashboard, check these areas:

State management. For a prototype, React context and useState work fine. If your dashboard will grow to 10+ pages with shared state, consider asking VULK to refactor to Zustand or a similar state library.

API integration points. The generated dashboard uses mock data. Identify where fetch calls will replace static arrays — the generated code typically uses clean data structures that map directly to API response shapes.

Error boundaries. Add error handling around chart components and data fetches. A chart library crash should not take down the entire page.

Accessibility. Verify keyboard navigation in the sidebar, focus management in modals, and proper aria labels on interactive elements. The generated code includes basic accessibility, but complex interactions like the data table may need ARIA enhancements.

Deploying the Dashboard

Once satisfied with the result, deploy with one click to Cloudflare Pages. Your dashboard gets a live URL immediately. Share it with stakeholders for feedback, then iterate based on their input. The entire cycle — from first prompt to deployed dashboard — can happen in a single working session.