Daily Expense Tracker

A fully responsive React.js frontend for tracking daily expenses with AWS Cognito authentication, analytics, and spending limits.

Features

• Authentication: AWS Cognito integration with sign up, login, and logout
• Expense Management: Add, edit, delete, and filter expenses
• Analytics: Visual charts showing spending patterns (bar, pie, line charts)
• Spending Limits: Set monthly limits with alerts when approaching/exceeding
• Responsive Design: Mobile-first design using Tailwind CSS
• Real-time Updates: Automatic refresh of data after operations

Setup Instructions

1. Environment Variables

Copy .env.example to .env.local and fill in your AWS Cognito details:

```bash cp .env.example .env.local ```

2. AWS Amplify Setup

Install AWS Amplify:

```bash npm install aws-amplify @aws-amplify/ui-react ```

Configure Amplify in your app by importing the config:

```javascript import { Amplify } from 'aws-amplify' import amplifyConfig from './amplify-config'

Amplify.configure(amplifyConfig) ```

3. Install Dependencies

```bash npm install ```

4. Run Development Server

```bash npm run dev ```

5. Build for Production

```bash npm run build npm start ```

API Integration

The app expects the following API endpoints:

• GET /expenses - Get user expenses
• POST /expenses - Create new expense
• PUT /expenses/:id - Update expense
• DELETE /expenses/:id - Delete expense
• GET /spending-limit - Get spending limit
• PUT /spending-limit - Update spending limit

All requests include:

• Authorization: Bearer <jwt-token>
• X-User-ID: <user-id>

Deployment

This app is ready for deployment on Vercel:

1. Connect your GitHub repository to Vercel
2. Add environment variables in Vercel dashboard
3. Deploy automatically on push to main branch

Architecture

• Frontend: Next.js 14 with App Router
• Authentication: AWS Cognito via Amplify
• Styling: Tailwind CSS with shadcn/ui components
• Charts: Custom Canvas-based charts (can be replaced with Chart.js)
• State Management: React hooks and context
• API: RESTful API with AWS API Gateway integration