https://github.com/ashmit-kumar/money-weaver-assignment
https://github.com/ashmit-kumar/money-weaver-assignment
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ashmit-kumar/money-weaver-assignment
- Owner: Ashmit-Kumar
- Created: 2025-08-22T19:56:19.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-08-23T04:41:39.000Z (10 months ago)
- Last Synced: 2025-08-24T08:02:59.579Z (10 months ago)
- Language: TypeScript
- Size: 1.12 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 Sales Dashboard - Responsive Interactive Dashboard
A modern, responsive sales dashboard built with React, TypeScript, and Tailwind CSS. Features interactive charts, mobile-optimized design, and comprehensive data visualization for sales analytics.
## ✨ Features
- 📱 **Fully Responsive Design** - Optimized for mobile, tablet, and desktop
- 📊 **Interactive Charts** - Built with Recharts for dynamic data visualization
- 🎨 **Modern UI Components** - Powered by Radix UI and Tailwind CSS
- 🔄 **Pull-to-Refresh** - Mobile-friendly data refresh functionality
- 🎯 **Multi-page Navigation** - Home, Shop, Orders, and more
- 🌈 **Colorful Interface** - Vibrant gradients and modern design patterns
- ⚡ **Fast Performance** - Built with Vite for lightning-fast development
## 📸 Screenshots
### Home Dashboard
### Shop Page
### Commodity Page
### Mobile Responsive Design
## 🛠️ Tech Stack
- **Frontend Framework:** React 18.3.1
- **Language:** TypeScript
- **Build Tool:** Vite 5.4.19
- **Styling:** Tailwind CSS 3.4.17
- **UI Components:** Radix UI
- **Charts:** Recharts 3.1.2
- **Routing:** React Router DOM 6.30.1
- **Icons:** Lucide React
- **State Management:** React Hooks
- **Form Handling:** React Hook Form
## 🚀 Quick Start
### Prerequisites
Make sure you have the following installed on your system:
- **Node.js** (v18.0.0 or higher) - [Download here](https://nodejs.org/)
- **npm** (v8.0.0 or higher) or **yarn** (v1.22.0 or higher)
- **Git** - [Download here](https://git-scm.com/)
### Installation
1. **Clone the repository**
```bash
git clone https://github.com/yourusername/sales-dashboard.git
cd sales-dashboard
```
2. **Install dependencies**
```bash
# Using npm
npm install
# Or using yarn
yarn install
# Or using pnpm
pnpm install
```
3. **Start the development server**
```bash
# Using npm
npm run dev
# Or using yarn
yarn dev
# Or using pnpm
pnpm dev
```
4. **Open your browser**
Navigate to [http://localhost:5173](http://localhost:5173) to view the application.
### Available Scripts
```bash
# Start development server
npm run dev
# Build for production
npm run build
# Build for development (with source maps)
npm run build:dev
# Preview production build
npm run preview
# Run ESLint
npm run lint
```
## 📁 Project Structure
```
sales-dashboard/
├── public/ # Static assets
│ ├── placeholder.svg
│ └── robots.txt
├── src/ # Source code
│ ├── components/ # Reusable UI components
│ │ ├── ui/ # Base UI components (shadcn/ui)
│ │ ├── Header.tsx # Application header
│ │ ├── Sidebar.tsx # Navigation sidebar
│ │ ├── Navigation.tsx # Main navigation
│ │ └── ...
│ ├── pages/ # Application pages
│ │ ├── Home.tsx # Dashboard home page
│ │ ├── Shop.tsx # Shop/products page
│ │ ├── Order.tsx # Orders management
│ │ └── ...
│ ├── hooks/ # Custom React hooks
│ │ ├── useResponsive.ts # Responsive breakpoint hook
│ │ ├── usePullToRefresh.tsx # Pull-to-refresh functionality
│ │ └── ...
│ ├── contexts/ # React contexts
│ │ └── SidebarContext.tsx
│ ├── lib/ # Utility libraries
│ │ └── utils.ts # Common utilities
│ ├── App.tsx # Main application component
│ ├── main.tsx # Application entry point
│ └── index.css # Global styles
├── assets/ # Project assets and screenshots
│ ├── Home.png
│ ├── Commodity.png
│ ├── orders.png
│ └── Responsive_2.png
├── package.json # Project dependencies and scripts
├── tailwind.config.ts # Tailwind CSS configuration
├── vite.config.ts # Vite configuration
└── README.md # Project documentation
```
## 🎨 Key Features Breakdown
### Responsive Design
- **Mobile-first approach** with progressive enhancement
- **Breakpoint system**: Mobile (< 640px), Tablet (640px - 1024px), Desktop (> 1024px)
- **Touch-friendly interactions** with proper touch targets
- **Collapsible sidebar** that transforms into a mobile drawer
### Interactive Charts
- **Line charts** for sales trends and performance metrics
- **Pie charts** for category distribution and analytics
- **Responsive tooltips** with formatted data display
- **Mobile-optimized** chart sizing and interactions
### Modern UI Components
- **Gradient backgrounds** and modern color schemes
- **Smooth animations** and transitions
- **Consistent spacing** and typography
- **Accessible design** following WCAG guidelines
## 🔧 Customization
### Styling
The project uses Tailwind CSS for styling. You can customize the design by:
1. **Modifying the Tailwind config** (`tailwind.config.ts`)
2. **Updating CSS variables** in `src/index.css`
3. **Customizing component styles** in individual component files
### Adding New Pages
1. Create a new component in `src/pages/`
2. Add the route in `src/App.tsx`
3. Update navigation in `src/components/Navigation.tsx`
### Responsive Breakpoints
Customize responsive behavior by modifying the `useResponsive` hook in `src/hooks/useResponsive.ts`.
## 🚀 Deployment
### Build for Production
```bash
npm run build
```
The build artifacts will be stored in the `dist/` directory.
### Deploy to Vercel
```bash
# Install Vercel CLI
npm i -g vercel
# Deploy
vercel --prod
```
### Deploy to Netlify
```bash
# Build the project
npm run build
# Deploy the dist/ folder to Netlify
```
## 🤝 Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## 📝 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 🙏 Acknowledgments
- [Radix UI](https://www.radix-ui.com/) for accessible UI components
- [Tailwind CSS](https://tailwindcss.com/) for utility-first CSS framework
- [Recharts](https://recharts.org/) for beautiful React charts
- [Lucide](https://lucide.dev/) for beautiful icons
- [Vite](https://vitejs.dev/) for fast build tooling