Simple Analytics Dashboard with data visualizations using charts and graphs
Demo Link - https://streamify-mauve.vercel.app/
- NextJS
- TypeScipt
- OpenAI
- NextJS Api routes to mock data
- TailwindCSS
- ShadcnUi
- Recharts
- MagicUI
- Depoyed on vercel
- For the design theme, I chose a dark gradient background and incorporated a glass UI effect on the cards.
- I also added subtle interactions and a fade-in animation on load to create an engaging user experience.
- Donut chart for Key metrics
- Pie chart for Revenue Data annd Location wise user segmentation
- Multi Line chart to show user growth and active users trends over past 12 months data
- Horizontal Bar Chart to show top 5 most streamed songs
- Data Table to show top streamd songs with actions including Sort, Filter, Search
I integrated OpenAI to provide valuable insights on Revenue and User Growth data. To access these AI-generated insights, click the Star button located in the top-right corner of the Revenue and User Growth cards.
To ensure the quality and reliability of the code, unit tests were written using React Testing Library and Jest.
Test case written for:
- Common Pie Chart Component
- Data Table
- Key metrics
- Shared utils functions
I did not implement Redux for state management, as it was not necessary for this single-page dashboard. The state management needs were minimal, and React's built-in state management was sufficient to handle all required functionality.
But I'm aware and know how to implement Redux and Redux Toolkit.
Note : You will need an opneAI api to run this project on local. Once you have created the API key create a .env file in the root directory and add the key as follows
NEXT_PUBLIC_OPENAI_KEY=<openAI API KEY>Install all the dependencies:
npm i
# or
npm installRun the development server:
npm run devRun test cases:
npm run testOpen http://localhost:3000 with your browser to see the result.