WooCommerce Sales Dashboard Enhancer
A Full-Stack E-Commerce Analytics Tool
Project Overview
The WooCommerce Sales Dashboard Enhancer is a sleek, full-stack tool I built to showcase my Node.js, TypeScript, and Next.js skills. It delivers key WooCommerce sales insights—metrics, trends, and top products—via an intuitive, responsive dashboard with chart and table views.
Features
- Custom Date Range: Pick "From" and "To" dates with a modern picker.
- Sales Summary: Key metrics in a stylish card layout.
- Top Products: Toggle between a bar chart (default) and table.
- Responsive: Mobile and desktop-friendly.
- Mock Data: Switch for demos without live credentials.
Skillset Showcased
- Node.js & TypeScript: Custom API wrapper, async data handling.
- Next.js & React: CSR frontend with hooks and components.
- API Integration: CORS-enabled WooCommerce REST API calls.
- UI/UX: Tailwind CSS, MUI date pickers, polished design.
- Visualization: Bar charts via
react-chartjs-2. - Architecture: Modular backend (Azure Functions) and frontend (Next.js).
Screenshots
Default chart view for instant sales insights.
Detailed top products in table format.
Easy date selection with year dropdowns.
Architecture Diagram
Client-side Next.js app fetches data from a Node.js Azure Function backend, with optional mock data.
Detailed Description
The WooCommerce Sales Dashboard Enhancer integrates with the WooCommerce REST API to provide store owners with actionable sales data. Built with Node.js and TypeScript, the backend processes raw API responses into concise metrics, while the Next.js frontend renders them dynamically using React hooks. The UI features a custom date range picker (Material-UI), responsive Tailwind CSS styling, and a toggleable view (chart via react-chartjs-2 or table). A mock data mode ensures flexibility for demos. This project highlights my ability to design scalable, user-focused solutions with modern tools and best practices.
Explore the Code
Want to dive into the source code? Check out the project on GitHub!
View code in Github for frontend View code in Github link backend