DT403B Microsoft Licensing Data Dashboard
The DT403B Microsoft Licensing Dashboard is a front-end application built with React and Vite, designed to display Microsoft CSP Licensing products in a user-friendly and interactive dashboard. It's purpose is to be an idea of a potential workplace application that could be used in pre-sales roles, leveraging our Microsoft CSP Partner ArrowSphere for quoting and visualising product data, I am developing a dashboard which could later on be a real tool we choose to use.
This dashboard is part of DT403B, showcasing my application of project management techniques and deployment practices such as:
- UI development with reusable components
- Version control (Git & GitHub)
- Cloud deployment
- Project methodologies
- Documentation
- Project and branching management
- 🛒 Product List Filtering by segment and keyword
- 📈 Price History Chart with dynamic visualisations (via Recharts)
- 📦 Mock API data structure with plan pricing and SKU information
- 🧠 Component-based architecture using React, TailwindCSS, Recharts, and Framer Motion
- 🌐 Ready for Vercel or AWS deployment
- Frontend Framework: React (Vite setup)
- Styling: TailwindCSS
- Charting: Recharts
- API Data: Local mock ArrowSphere-like JSON
- Dev Tools: GitHub, Vercel, Framer Motion, WebStorm IDE
- Set up Vite, React, Tailwind
- Created UI component structure with
ProductListCard,PriceHistoryCard, etc. - Integrated mock API with Microsoft CSP-style data
- Implemented filtering and interactivity
- Used Recharts for dynamic charting based on SKU data
- Styled components with dark theme via Tailwind
- Created GitHub repo and set up branching strategy
- Deploy to Vercel / AWS
- Add dashboards for usage and customer segmentation
-
ShadCN, shadcn/ui. Available at: https://ui.shadcn.com (Accessed: March 2025).
-
Recharts, Recharts Documentation. Available at: https://recharts.org/en-US (Accessed: March 2025).
-
Microsoft, Microsoft Licensing Overview. Available at: https://learn.microsoft.com/en-us/licensing/ (Accessed: April 2025).
-
Arrow ECS, ArrowSphere Licensing Partner Portal Platform. Internal tool used by Ricoh UK for Microsoft CSP quoting. Professional reference for CSP pricing and SKU data structure.
-
GitHub, inventory-management dashboard by EdwinManzongo. Available at: https://github.com/EdwinManzongo/inventory-management (Accessed: April 2025).
This repository is developed as part of the DT403B Managing Technology Projects Module at Corndel College London (CCL). This web app demonstrates modern tech-stack front-end skills, GitHub workflows, deployment, and practical UI design aligned with workplace responsibilities in a Microsoft-focused pre-sales role.