{"id":31074258,"url":"https://github.com/ashmit-kumar/money-weaver-assignment","last_synced_at":"2025-09-16T02:13:21.087Z","repository":{"id":311333778,"uuid":"1042919685","full_name":"Ashmit-Kumar/money-weaver-assignment","owner":"Ashmit-Kumar","description":null,"archived":false,"fork":false,"pushed_at":"2025-08-23T04:41:39.000Z","size":1177,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-24T08:02:59.579Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/Ashmit-Kumar.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,"zenodo":null}},"created_at":"2025-08-22T19:56:19.000Z","updated_at":"2025-08-23T04:41:43.000Z","dependencies_parsed_at":"2025-08-24T08:38:52.835Z","dependency_job_id":"7d22bf3e-4d1f-451e-a66e-a4f819fd6f27","html_url":"https://github.com/Ashmit-Kumar/money-weaver-assignment","commit_stats":null,"previous_names":["ashmit-kumar/money-weaver-assignment"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Ashmit-Kumar/money-weaver-assignment","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ashmit-Kumar%2Fmoney-weaver-assignment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ashmit-Kumar%2Fmoney-weaver-assignment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ashmit-Kumar%2Fmoney-weaver-assignment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ashmit-Kumar%2Fmoney-weaver-assignment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ashmit-Kumar","download_url":"https://codeload.github.com/Ashmit-Kumar/money-weaver-assignment/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ashmit-Kumar%2Fmoney-weaver-assignment/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275348511,"owners_count":25448626,"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","status":"online","status_checked_at":"2025-09-16T02:00:10.229Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-09-16T02:13:16.203Z","updated_at":"2025-09-16T02:13:21.078Z","avatar_url":"https://github.com/Ashmit-Kumar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 Sales Dashboard - Responsive Interactive Dashboard\n\nA modern, responsive sales dashboard built with React, TypeScript, and Tailwind CSS. Features interactive charts, mobile-optimized design, and comprehensive data visualization for sales analytics.\n\n![Dashboard Preview](./assets/Home.png)\n\n## ✨ Features\n\n- 📱 **Fully Responsive Design** - Optimized for mobile, tablet, and desktop\n- 📊 **Interactive Charts** - Built with Recharts for dynamic data visualization\n- 🎨 **Modern UI Components** - Powered by Radix UI and Tailwind CSS\n- 🔄 **Pull-to-Refresh** - Mobile-friendly data refresh functionality\n- 🎯 **Multi-page Navigation** - Home, Shop, Orders, and more\n- 🌈 **Colorful Interface** - Vibrant gradients and modern design patterns\n- ⚡ **Fast Performance** - Built with Vite for lightning-fast development\n\n## 📸 Screenshots\n\n### Home Dashboard\n![Home Dashboard](./assets/Home.png)\n\n### Shop Page\n![Shop Page](./assets/orders.png)\n\n### Commodity Page\n![Commodity Page](./assets/Commodity.png)\n\n### Mobile Responsive Design\n![Mobile Responsive](./assets/Responsive_2.png)\n\n## 🛠️ Tech Stack\n\n- **Frontend Framework:** React 18.3.1\n- **Language:** TypeScript\n- **Build Tool:** Vite 5.4.19\n- **Styling:** Tailwind CSS 3.4.17\n- **UI Components:** Radix UI\n- **Charts:** Recharts 3.1.2\n- **Routing:** React Router DOM 6.30.1\n- **Icons:** Lucide React\n- **State Management:** React Hooks\n- **Form Handling:** React Hook Form\n\n## 🚀 Quick Start\n\n### Prerequisites\n\nMake sure you have the following installed on your system:\n\n- **Node.js** (v18.0.0 or higher) - [Download here](https://nodejs.org/)\n- **npm** (v8.0.0 or higher) or **yarn** (v1.22.0 or higher)\n- **Git** - [Download here](https://git-scm.com/)\n\n### Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/yourusername/sales-dashboard.git\n   cd sales-dashboard\n   ```\n\n2. **Install dependencies**\n   ```bash\n   # Using npm\n   npm install\n   \n   # Or using yarn\n   yarn install\n   \n   # Or using pnpm\n   pnpm install\n   ```\n\n3. **Start the development server**\n   ```bash\n   # Using npm\n   npm run dev\n   \n   # Or using yarn\n   yarn dev\n   \n   # Or using pnpm\n   pnpm dev\n   ```\n\n4. **Open your browser**\n   \n   Navigate to [http://localhost:5173](http://localhost:5173) to view the application.\n\n### Available Scripts\n\n```bash\n# Start development server\nnpm run dev\n\n# Build for production\nnpm run build\n\n# Build for development (with source maps)\nnpm run build:dev\n\n# Preview production build\nnpm run preview\n\n# Run ESLint\nnpm run lint\n```\n\n## 📁 Project Structure\n\n```\nsales-dashboard/\n├── public/                 # Static assets\n│   ├── placeholder.svg\n│   └── robots.txt\n├── src/                   # Source code\n│   ├── components/        # Reusable UI components\n│   │   ├── ui/           # Base UI components (shadcn/ui)\n│   │   ├── Header.tsx    # Application header\n│   │   ├── Sidebar.tsx   # Navigation sidebar\n│   │   ├── Navigation.tsx # Main navigation\n│   │   └── ...\n│   ├── pages/            # Application pages\n│   │   ├── Home.tsx      # Dashboard home page\n│   │   ├── Shop.tsx      # Shop/products page\n│   │   ├── Order.tsx     # Orders management\n│   │   └── ...\n│   ├── hooks/            # Custom React hooks\n│   │   ├── useResponsive.ts    # Responsive breakpoint hook\n│   │   ├── usePullToRefresh.tsx # Pull-to-refresh functionality\n│   │   └── ...\n│   ├── contexts/         # React contexts\n│   │   └── SidebarContext.tsx\n│   ├── lib/              # Utility libraries\n│   │   └── utils.ts      # Common utilities\n│   ├── App.tsx           # Main application component\n│   ├── main.tsx          # Application entry point\n│   └── index.css         # Global styles\n├── assets/               # Project assets and screenshots\n│   ├── Home.png\n│   ├── Commodity.png\n│   ├── orders.png\n│   └── Responsive_2.png\n├── package.json          # Project dependencies and scripts\n├── tailwind.config.ts    # Tailwind CSS configuration\n├── vite.config.ts        # Vite configuration\n└── README.md            # Project documentation\n```\n\n## 🎨 Key Features Breakdown\n\n### Responsive Design\n- **Mobile-first approach** with progressive enhancement\n- **Breakpoint system**: Mobile (\u003c 640px), Tablet (640px - 1024px), Desktop (\u003e 1024px)\n- **Touch-friendly interactions** with proper touch targets\n- **Collapsible sidebar** that transforms into a mobile drawer\n\n### Interactive Charts\n- **Line charts** for sales trends and performance metrics\n- **Pie charts** for category distribution and analytics\n- **Responsive tooltips** with formatted data display\n- **Mobile-optimized** chart sizing and interactions\n\n### Modern UI Components\n- **Gradient backgrounds** and modern color schemes\n- **Smooth animations** and transitions\n- **Consistent spacing** and typography\n- **Accessible design** following WCAG guidelines\n\n## 🔧 Customization\n\n### Styling\nThe project uses Tailwind CSS for styling. You can customize the design by:\n\n1. **Modifying the Tailwind config** (`tailwind.config.ts`)\n2. **Updating CSS variables** in `src/index.css`\n3. **Customizing component styles** in individual component files\n\n### Adding New Pages\n1. Create a new component in `src/pages/`\n2. Add the route in `src/App.tsx`\n3. Update navigation in `src/components/Navigation.tsx`\n\n### Responsive Breakpoints\nCustomize responsive behavior by modifying the `useResponsive` hook in `src/hooks/useResponsive.ts`.\n\n## 🚀 Deployment\n\n### Build for Production\n```bash\nnpm run build\n```\n\nThe build artifacts will be stored in the `dist/` directory.\n\n### Deploy to Vercel\n```bash\n# Install Vercel CLI\nnpm i -g vercel\n\n# Deploy\nvercel --prod\n```\n\n### Deploy to Netlify\n```bash\n# Build the project\nnpm run build\n\n# Deploy the dist/ folder to Netlify\n```\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## 📝 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- [Radix UI](https://www.radix-ui.com/) for accessible UI components\n- [Tailwind CSS](https://tailwindcss.com/) for utility-first CSS framework\n- [Recharts](https://recharts.org/) for beautiful React charts\n- [Lucide](https://lucide.dev/) for beautiful icons\n- [Vite](https://vitejs.dev/) for fast build tooling\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashmit-kumar%2Fmoney-weaver-assignment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fashmit-kumar%2Fmoney-weaver-assignment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashmit-kumar%2Fmoney-weaver-assignment/lists"}