the start

README.md

@@ -1,36 +1,125 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# Envelope Budgeting App
+
+A modern web-based envelope budgeting application built with Next.js, TypeScript, and Tailwind CSS. This app helps you manage your finances using the traditional envelope budgeting method in a digital format.
+
+## Features
+
+- **Envelope Management**: Create and manage budget envelopes for different spending categories
+- **Visual Progress Tracking**: See spending progress with color-coded progress bars
+- **Transaction History**: Track and view recent transactions
+- **Data Input Options**:
+  - **Manual Entry**: Add individual transactions with amount, description, date, and envelope assignment
+  - **File Import**: Import transactions from bank exports (CSV, OFX, QFX, QBO formats)
+- **Transaction Editing**: Edit existing transactions with full details
+- **Envelope Creation**: Add new budget envelopes with custom colors and allocations
+- **Data Export**: Export all data to CSV or JSON formats for backup or analysis
+- **Budget Overview**: Monitor total allocated, spent, and remaining amounts
+- **Responsive Design**: Works seamlessly on desktop and mobile devices
 
 ## Getting Started
 
-First, run the development server:
+### Prerequisites
 
+- Node.js 18+ and npm
+
+### Installation
+
+1. Clone the repository:
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+git clone <repository-url>
+cd budget
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+2. Install dependencies:
+```bash
+npm install
+```
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+3. Run the development server:
+```bash
+npm run dev
+```
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+4. Open [http://localhost:7654](http://localhost:7654) in your browser.
 
-## Learn More
+## Available Scripts
 
-To learn more about Next.js, take a look at the following resources:
+- `npm run dev` - Start the development server
+- `npm run build` - Build the project for production
+- `npm run start` - Start the production server
+- `npm run lint` - Run ESLint for code quality checks
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+## Project Structure
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+```
+src/
+├── app/
+│   ├── layout.tsx      # Root layout component
+│   ├── page.tsx        # Main budgeting dashboard
+│   └── globals.css     # Global styles
+public/                 # Static assets
+```
 
-## Deploy on Vercel
+## Technologies Used
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+- **Next.js 16** - React framework with App Router
+- **TypeScript** - Type-safe JavaScript
+- **Tailwind CSS** - Utility-first CSS framework
+- **React 19** - UI library
+- **ESLint** - Code linting
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+## How to Use
+
+1. **View Dashboard**: The main page shows your budget overview and envelope cards
+2. **Add Transactions**:
+   - **Manual Entry**: Click "Manual Entry" and fill in transaction details
+   - **File Import**: Click "Import from File", select your bank export format, and upload the file
+3. **Monitor Envelopes**: Each envelope displays allocated amount, spent amount, and remaining balance
+4. **Track Progress**: Visual progress bars show spending percentage for each envelope
+5. **View Transactions**: Recent transactions are listed with envelope associations
+
+## Data Import
+
+### Supported File Formats
+
+- **CSV**: Comma-separated values with columns: Date, Amount, Description, Category (optional)
+- **OFX/QFX**: Standard bank export formats from most financial institutions
+- **QBO**: QuickBooks Online format
+- **PDF**: Coming soon (statement parsing)
+
+### CSV Format Example
+```csv
+Date,Amount,Description,Category
+2024-01-15,-25.50,Weekly groceries,Groceries
+2024-01-16,-12.00,Gas station,Transportation
+2024-01-17,1500.00,Salary deposit,Income
+```
+
+## Advanced Features
+
+### Transaction Editing
+- Click the edit icon (pencil) next to any transaction to modify its details
+- Update amount, description, date, and envelope assignment
+- Changes automatically update envelope spending calculations
+
+### Envelope Management
+- Click "Add Envelope" to create new budget categories
+- Choose from multiple colors for visual organization
+- Set custom budget allocations for each envelope
+
+### Data Export
+- Export all transactions and envelopes to CSV for spreadsheet analysis
+- Export to JSON format for data backup or integration
+- Includes complete transaction history and envelope details
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Run tests and linting
+5. Submit a pull request
+
+## License
+
+This project is licensed under the MIT License.