{"id":29622771,"url":"https://github.com/dev-saiful/expense-client","last_synced_at":"2025-08-27T19:07:35.770Z","repository":{"id":304793564,"uuid":"1019983711","full_name":"dev-saiful/expense-client","owner":"dev-saiful","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-15T07:10:11.000Z","size":69,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-15T16:46:43.569Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://expense-tracker-chi-plum.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/dev-saiful.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-07-15T07:02:02.000Z","updated_at":"2025-07-15T07:10:14.000Z","dependencies_parsed_at":"2025-07-15T17:10:12.827Z","dependency_job_id":"5eaf0f93-0bef-4fb3-ae3c-f1e118aea636","html_url":"https://github.com/dev-saiful/expense-client","commit_stats":null,"previous_names":["dev-saiful/expense-client"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/dev-saiful/expense-client","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-saiful%2Fexpense-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-saiful%2Fexpense-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-saiful%2Fexpense-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-saiful%2Fexpense-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dev-saiful","download_url":"https://codeload.github.com/dev-saiful/expense-client/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-saiful%2Fexpense-client/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272366279,"owners_count":24922104,"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-08-27T02:00:09.397Z","response_time":76,"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-07-21T04:37:08.156Z","updated_at":"2025-08-27T19:07:35.744Z","avatar_url":"https://github.com/dev-saiful.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Expense Tracker Frontend\n\nA modern, minimalist expense tracking application built with React 19, TypeScript, and GraphQL.\n\n## Features\n\n- 🔐 User Authentication (Login/Signup)\n- 📊 Dashboard with financial overview\n- 💰 Transaction management (Add, view, categorize)\n- 📈 Analytics with charts and insights\n- 🎨 Modern, responsive UI with Tailwind CSS\n- ⚡ Real-time GraphQL integration\n- 🔄 Optimistic updates and caching\n\n## Tech Stack\n\n- **React 19** - Latest React with concurrent features\n- **TypeScript** - Type-safe development\n- **React Router v7** - Modern routing solution\n- **Apollo Client** - GraphQL client with caching\n- **Tailwind CSS v4** - Next-generation utility-first CSS framework\n- **React Hook Form** - Performant forms with validation\n- **Recharts** - Beautiful charts and graphs\n- **Lucide React** - Modern icon library\n- **Vite** - Fast build tool and dev server\n\n## Project Structure\n\n```\nsrc/\n├── components/\n│   ├── layout/          # Layout components (Header, Layout)\n│   └── ui/              # Reusable UI components (Button, Input, Card)\n├── context/             # React Context providers\n├── graphql/             # GraphQL queries and mutations\n├── lib/                 # Library configurations (Apollo)\n├── pages/               # Page components\n│   ├── auth/           # Authentication pages\n│   ├── DashboardPage.tsx\n│   ├── AddTransactionPage.tsx\n│   └── AnalyticsPage.tsx\n├── types/               # TypeScript type definitions\n├── utils/               # Utility functions\n├── App.tsx              # Main app component\n├── main.tsx            # App entry point\n└── index.css           # Global styles\n```\n\n## Installation\n\n1. **Install dependencies:**\n\n   ```bash\n   npm install\n   ```\n\n2. **Start the development server:**\n\n   ```bash\n   npm run dev\n   ```\n\n3. **Build for production:**\n   ```bash\n   npm run build\n   ```\n\n## Features Overview\n\n### Authentication\n\n- Clean, modern login/signup forms\n- Form validation with error handling\n- Automatic redirects based on auth state\n\n### Dashboard\n\n- Financial overview with net worth calculation\n- Category breakdown charts (Pie \u0026 Bar charts)\n- Recent transactions list\n- Quick action buttons\n\n### Transaction Management\n\n- Add new transactions with form validation\n- Categorize as expense, saving, or investment\n- Support for cash and card payments\n- Optional location tracking\n\n### Analytics\n\n- Detailed category distribution charts\n- Financial insights and summaries\n- Responsive chart visualizations\n\n## Design Principles\n\n### Separation of Concerns\n\n- **Components**: Reusable UI components in `/components/ui/`\n- **Pages**: Route-based page components\n- **Context**: State management with React Context\n- **GraphQL**: API layer with Apollo Client\n- **Utils**: Pure utility functions\n- **Types**: Centralized TypeScript definitions\n\n### Minimalist UI Design\n\n- Clean, modern interface\n- Consistent spacing and typography\n- Thoughtful use of color and contrast\n- Responsive design for all devices\n- Intuitive navigation and user flow\n\n### Performance Optimizations\n\n- Lazy loading and code splitting\n- Optimistic updates for better UX\n- Efficient GraphQL caching\n- Minimal bundle size with tree shaking\n\n## Development\n\n### Available Scripts\n\n- `npm run dev` - Start development server\n- `npm run build` - Build for production\n- `npm run preview` - Preview production build\n- `npm run lint` - Run ESLint\n- `npm run format` - Format code with Prettier\n\n### Environment Setup\n\nThe app expects the GraphQL server to be running on `http://localhost:4000/graphql`.\n\n## Backend Integration\n\nThis frontend integrates with a GraphQL backend that provides:\n\n- User authentication and session management\n- Transaction CRUD operations\n- Category statistics and analytics\n- Real-time data synchronization\n\n## Contributing\n\n1. Follow the existing code structure and patterns\n2. Use TypeScript for all new code\n3. Follow the component composition principles\n4. Write meaningful commit messages\n5. Test your changes across different screen sizes\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-saiful%2Fexpense-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdev-saiful%2Fexpense-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-saiful%2Fexpense-client/lists"}