A modern, responsive web application for tracking expenses with automatic bank integration using Plaid. Built with Next.js, TypeScript, and Tailwind CSS.
- Dashboard: Overview of financial health with key metrics
- Account Linking: Secure bank account connection via Plaid
- Transaction Management: View, filter, and analyze transactions
- Real-time Syncing: Automatic transaction updates
- Responsive Design: Works seamlessly on desktop and mobile
- Modern UI: Clean, intuitive interface with Tailwind CSS
- Framework: Next.js 14 with App Router
- Language: TypeScript
- Styling: Tailwind CSS
- Icons: Lucide React
- HTTP Client: Axios
- Plaid Integration: react-plaid-link
- State Management: React hooks with Zustand (for future expansion)
- Node.js 18+
- npm or yarn
- Backend server running (see backend README)
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser: Navigate to http://localhost:3001
src/
├── app/ # Next.js App Router pages
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Dashboard page
│ ├── link-account/ # Account linking page
│ ├── transactions/ # Transactions page
│ ├── sign-in/ # Sign-in page
│ └── sign-up/ # Sign-up page
├── components/ # Reusable UI components
│ ├── ui/ # Base UI components
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ └── badge.tsx
│ ├── Header.tsx # Main navigation header
│ └── AuthWrapper.tsx # Authentication wrapper component
├── lib/ # Utility functions and services
│ ├── api.ts # API service layer
│ └── utils.ts # Helper functions
└── types/ # TypeScript type definitions
└── index.ts
This application uses Clerk for user authentication and management. The integration follows the latest Next.js App Router patterns:
- Secure Authentication: User sign-in and sign-up with Clerk
- Protected Routes: All main pages require authentication
- User Management: Built-in user profile and account management
- Modal Authentication: Seamless sign-in/sign-up experience
- Users can sign up or sign in using the buttons in the header
- All protected pages are wrapped with
AuthWrappercomponent - Unauthenticated users see a welcome message and sign-in options
- Authenticated users have access to the full expense tracking features
- Financial overview with key metrics
- Recent transactions preview
- Linked accounts summary
- Quick actions for syncing and linking accounts
- Protected: Requires authentication
- Secure Plaid integration for bank account linking
- Step-by-step account connection process
- Security information and supported banks
- Success confirmation with linked account details
- Protected: Requires authentication
- Comprehensive transaction list with filtering
- Date range and account filters
- Pagination support
- Transaction categorization and status indicators
- Export and analysis features
- Protected: Requires authentication
The frontend communicates with the backend through a RESTful API:
POST /api/plaid/create-link-token- Initialize Plaid LinkPOST /api/plaid/exchange-token- Complete account linkingGET /api/plaid/accounts- Fetch linked accountsGET /api/plaid/transactions- Get transactions with filtersPOST /api/plaid/sync- Manual transaction sync
The application uses Tailwind CSS for styling with a custom design system:
- Primary Colors: Blue-based palette for brand elements
- Semantic Colors: Green for income, red for expenses
- Responsive Design: Mobile-first approach with breakpoints
- Component Library: Reusable UI components with consistent styling
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
- TypeScript for type safety
- ESLint for code quality
- Prettier for code formatting
- Component-based architecture
- Custom hooks for reusable logic
- Connect your GitHub repository to Vercel
- Set environment variables in Vercel dashboard
- Deploy automatically on push to main branch
The app can be deployed to any platform that supports Next.js:
- Netlify
- AWS Amplify
- DigitalOcean App Platform
- Self-hosted servers
| Variable | Description | Default |
|---|---|---|
NEXT_PUBLIC_API_URL |
Backend API URL | http://localhost:3000 |
The application uses Resend for sending budget alerts and weekly summaries. Configure the following environment variables:
| Variable | Description | Required | Default |
|---|---|---|---|
RESEND_API_KEY |
Resend API key | Yes | - |
FROM_EMAIL |
Email address to send from (must be verified in Resend) | No | onboarding@resend.dev |
FROM_NAME |
Display name for email sender | No | Expense Tracker |
NEXT_PUBLIC_APP_URL |
Base URL of your application (for email links) | No | http://localhost:3000 |
- Sign up: Create an account at resend.com
- Get API key:
- Go to API Keys in your Resend dashboard
- Create a new API key
- Copy the key (starts with
re_)
- Verify domain (for production):
- Add your domain in Resend dashboard
- Follow DNS verification steps
- Use your verified domain in
FROM_EMAIL
- Development: You can use
onboarding@resend.devfor testing without domain verification
Example .env.local:
RESEND_API_KEY=re_xxxxxxxxxxxxx
FROM_EMAIL=noreply@yourdomain.com
FROM_NAME=Expense Tracker
NEXT_PUBLIC_APP_URL=https://yourdomain.comNote: For production, you must verify your sending domain in Resend. The default onboarding@resend.dev email only works for testing.
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
This project is licensed under the MIT License.
For support and questions:
- Check the backend README for API documentation
- Review Plaid documentation for integration details
- Open an issue for bugs or feature requests