Real example 1
EtsyPulse: “a dashboard for my small Etsy shop that shows which products sold best each month”
A simple dashboard for small shop owners to track monthly top-selling products using sample data.
v1 includes
- Monthly sales summary cards
- Top products ranking list
- Basic month selector dropdown
- Sample Etsy data so it works instantly
Skip for now
- Etsy API Integration · Requires complex OAuth setup and tokens.
- User Accounts · Not needed for a single-user local dashboard.
- Database · Sample mock data in a JavaScript file is enough.
- Export to CSV · Can be added later once the core view works.
Stack: React with Vite and Tailwind CSS · None · Local mock data array in the project · Local machine
1Set up project and dashboard layoutYou will have a running React app with a nice Tailwind layout and sample Etsy product data.
Create a new Vite React app in the current folder using Tailwind CSS for styling. - Write a PLAN.md file outlining our v1 scope: monthly summary cards, top products list, and a month dropdown, while skipping Etsy API integration, user accounts, and databases. - Create a sample data file with mock Etsy products, monthly sales counts, and revenue for the last three months. - Build the main dashboard screen with a clean sidebar, a header, summary metric cards, and a data table for top products. - Populate the table and cards using the sample data. - Explain how to install dependencies and run the dev server in the terminal. Do not add external backend servers or complex charting libraries yet; keep everything in pure React components with Tailwind. Done when: I can run the dev server and see a styled dashboard populated with mock Etsy sales data.
2Add filtering and detail viewYou will be able to filter products by month and click into items for more details.
Update the EtsyPulse dashboard so the user can interact with the data. - Add a functional month selector dropdown at the top of the dashboard. - Make the summary cards and top products table update dynamically based on the selected month. - Add a click handler to any product row that opens a simple modal showing more details about that product's sales. - Ensure the UI looks clean and handles empty states gracefully if a month has no sales. - Keep changes small and modular, updating existing files cleanly. Do not connect any external APIs or databases; keep using the local mock data file. Done when: Changing the month dropdown updates the stats and clicking a product opens its detail modal.
3Polish and testing guideYou will have a polished app with clear instructions on how to test every feature.
Add final polish and documentation to the EtsyPulse dashboard. - Improve the visual styling with subtle hover effects, clean badge colors for top sellers, and responsive spacing. - Add a README.md file explaining what the app does, how it works with mock data, and step-by-step instructions on how to test it. - Verify there are no broken imports or console errors in the code. - Ensure the layout looks great on both large screens and smaller browser windows. Do not add new major features or pages outside the agreed v1 scope. Done when: The app looks polished, runs without errors, and has a clear README testing guide.