{"id":25062817,"url":"https://github.com/sougata-github/streamify-dashboard","last_synced_at":"2025-12-30T20:28:34.494Z","repository":{"id":276135468,"uuid":"928236518","full_name":"sougata-github/streamify-dashboard","owner":"sougata-github","description":"Music streaming app dashboard built using React.js.","archived":false,"fork":false,"pushed_at":"2025-02-16T06:18:40.000Z","size":237,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-16T07:20:06.818Z","etag":null,"topics":["framer-motion","react","react-router-dom","recharts","search-params","tailwindcss","typescript","vite"],"latest_commit_sha":null,"homepage":"https://react-streamify-dashboard.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sougata-github.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-06T09:49:24.000Z","updated_at":"2025-02-16T06:18:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"8ece156e-8e84-40b4-96c2-36384d82127a","html_url":"https://github.com/sougata-github/streamify-dashboard","commit_stats":null,"previous_names":["sougata-github/streamify-dashboard"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sougata-github%2Fstreamify-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sougata-github%2Fstreamify-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sougata-github%2Fstreamify-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sougata-github%2Fstreamify-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sougata-github","download_url":"https://codeload.github.com/sougata-github/streamify-dashboard/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246460872,"owners_count":20781220,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["framer-motion","react","react-router-dom","recharts","search-params","tailwindcss","typescript","vite"],"created_at":"2025-02-06T17:13:32.618Z","updated_at":"2025-12-30T20:28:34.465Z","avatar_url":"https://github.com/sougata-github.png","language":"TypeScript","readme":"# Streamify - Music Analytics Dashboard\n\n## Overview\n\nStreamify is a sleek and modern music analytics dashboard built with React.js, TypeScript, and TailwindCSS. It provides key insights through interactive charts, data tables, and smooth UI animations. The application follows best practices for modular, scalable, and maintainable code.\n\n![Screenshot (6)](https://github.com/user-attachments/assets/4c9317d5-d9b5-4b52-bf21-ee4a0b26f708)\n\n## Thought Process\n\nI built Streamify with a focus on responsiveness, performance, and maintainability. The tech stack was chosen to ensure a smooth development experience while keeping the UI intuitive and performant. Here’s how I approached the development:\n\n- Key Metrics Display: Used a reusable Card component for clean code. The cards are displayed in a grid layout, adapting to various screen sizes.\n- Data Visualization: Integrated the Recharts library to display:\n    - A bar chart for popular songs.\n    - A line chart for user growth.\n    - A pie chart for revenue distribution.\n    - The entire application uses mock data for demonstration.\n- Reusable Data Table: Created a flexible, TypeScript-powered table that can accept any shape of data and display it accordingly.\n- State Management for Sorting, Filtering \u0026 Pagination:\n    - Used URL search parameters (searchParams) to persist state across renders.\n    - Implemented pagination using searchParams to track the current page, updating it when navigating through pages.\n    - Similarly, sorting and filtering are applied dynamically based on the URL state.\n- Performance Enhancements:\n    - Suspense \u0026 Error Boundaries for improved UX.\n    - Code-splitting to reduce initial load times.\n- Scalability \u0026 Maintainability: Followed a modular project structure with TypeScript for type safety and clean, reusable code.\n\n## Key Features\n\n- Modern \u0026 Sleek UI\n- Fully Responsive\n- Key Metrics Display (Cards)\n- Interactive Charts (Bar, Line, Pie)\n- Data Table for Recent Streams\n- Sorting, Filtering \u0026 Pagination\n- Smooth Animations \u0026 Transitions\n- Organized File \u0026 Folder Structure\n\n## Extra Features\n\n- Pagination for easier data navigation\n- Animations for a smooth user experience\n\n## Tech Stack\n\n- React.js – Frontend library\n- TailwindCSS – Styling framework\n- TypeScript – Type safety \u0026 better developer experience\n- Vite – Fast build tool\n- React Router DOM – For handling search parameters \u0026 navigation\n- Lucide React – Icon library\n- Recharts – For interactive charts \u0026 data visualization\n- usehooks-ts – For media query-based computations\n\n## Getting Started\n\n- Clone the repository\n  ```bash\n  git clone https://github.com/sougata-github/streamify-dashboard\n  cd streamify-dashboard\n  ```\n- Install dependencies\n   ```bash\n  npm install\n  ```\n- Run the development server\n  ```bash\n  npm run dev\n  ```\n\n\n\n\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsougata-github%2Fstreamify-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsougata-github%2Fstreamify-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsougata-github%2Fstreamify-dashboard/lists"}