Introduction

Inspired by the SV94 Communications Hub, I developed the dashboard manually but leveraged AI to create intuitive settings and dynamic user profile interfaces. This hybrid approach seamlessly fused innovative design with efficient code generation, resulting in a modern data visualization experience.

Links

• App
• Code

AI Tools

• V0
• Cursor
• Claude

Tech Stack

• Astro
• Alpine.js
• React
• TypeScript
• Tailwind
• shadcn/ui

Prompts

Create a settings page for a data visualization dashboard. Please include the shadcn imports and npm commands to install all components.

Can you create a user profile page with an image header and avatar image?

Human Contributions

• Created the dashboard

Future Features

• The ability to filter and sort data dynamically
• A search functionality to find specific data points
• An export feature to download charts as images or data as CSV
• Real-time data updates
• allow user to change their profile pictures
• sync settings and user profile settings to a database