A modern, full-stack expense tracking application built with Laravel 12 and Vue 3, with modern architecture patterns and best practices for scalable web applications.
This application provides a comprehensive solution for personal finance management, allowing users to track expenses, categorize transactions, and gain insights into spending patterns. Built with a focus on clean architecture, testability, and user experience.
- User Authentication & Authorization: Secure registration, login, and role-based access control
- Expense Management: Create, read, update, and delete expense records
- Category Organization: Flexible categorization system for better expense tracking
- Data Filtering: Filter expenses by category
- User Groups: Different user groups
- RESTful API Design: Well-structured API endpoints following REST principles
- Service Layer: Business logic encapsulated in service classes
- Request Validation: Form requests for robust input validation
- API Resources: Eloquent API resources for consistent JSON responses
- Eloquent ORM: Efficient database queries with relationships
- Authentication: Laravel Sanctum for SPA authentication
- Authorization: Policy-based authorization for resource access
- Testing: PHPUnit tests for critical business logic
- Composition API: Modern, composable component architecture
- Vue Router: Client-side routing with navigation guards
- Pinia: Centralized state management for predictable data flow
- Composables: Reusable logic extraction for DRY principles
- Component Library: Modular, reusable UI components
- Form Validation: Client-side validation for better UX
- Axios Integration: HTTP client for API communication
- Loading States: User feedback during asynchronous operations
- Error Handling: Graceful error handling and user notifications
- Laravel 12: Latest PHP Laravel framework
- PHP 8.3+: Modern PHP with strong typing and performance improvements
- MySQL: Robust relational database
- Laravel Sanctum: API token authentication
- Vue 3: Progressive JavaScript framework with Composition API
- Vue Router: Official routing library
- Pinia: Intuitive state management
- Axios: Promise-based HTTP client
- Vite: Next-generation frontend tooling
- Tailwind CSS: Utility-first CSS framework
- Composer: PHP dependency management
- NPM: JavaScript package management
- Laravel Vite: Asset compilation
- PHP >= 8.3
- Composer
- Node.js >= 18.x
- NPM
- MySQL >= 8.0
git clone https://github.com/oitcode/expense-tracker-laravel-vue.git
cd expense-tracker-laravel-vue# Install PHP dependencies
composer install
# Copy environment file
cp .env.example .env
# Generate application key
php artisan key:generate
# Configure your database in .env file
# DB_CONNECTION=mysql
# DB_HOST=127.0.0.1
# DB_PORT=3306
# DB_DATABASE=expense_tracker
# DB_USERNAME=root
# DB_PASSWORD=
# Run migrations
php artisan migrate
# (Optional) Seed database with sample data
php artisan db:seed# Install JavaScript dependencies
npm install
# Compile assets for development
npm run dev
# Or for production
npm run build# Terminal 1 - Laravel backend
php artisan serve
# Terminal 2 - Vite dev server (in another terminal)
npm run devVisit http://localhost:8000 in your browser.
# Run PHP tests
php artisan test
# Run with coverage
php artisan test --coveragePOST /api/register Register new user
POST /api/login User login
POST /api/logout User logout
GET /api/user Get authenticated user
GET /api/expenses List all expenses (with filters)
POST /api/expenses Create new expense
GET /api/expenses/{id} Get single expense
PUT /api/expenses/{id} Update expense
DELETE /api/expenses/{id} Delete expense
GET /api/categories List all categories
POST /api/categories Create new category
PUT /api/categories/{id} Update category
DELETE /api/categories/{id} Delete category
GET /api/groups List all groups
POST /api/groups Create new group
GET /api/groups/{id} Get single group
PUT /api/groups/{id} Update group
DELETE /api/groups/{id} Delete group
GET /api/groups/{id}/members Get group members
POST /api/groups/{id}/members Add member to group
DELETE /api/groups/{id}/members/{userId} Remove member from group
- SOLID principles implementation
- DRY (Don't Repeat Yourself)
- Separation of concerns
- Dependency injection
- Single responsibility per class/component
- CSRF protection
- SQL injection prevention via ORM
- XSS protection
- Authentication token security
- Input validation and sanitization
- Database query optimization
- Eager loading to prevent N+1 queries
- API response caching
- Asset optimization with Vite
- Lazy loading for Vue components
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open-sourced software licensed under the MIT license.
- GitHub: @oitcode
- Laravel framework and community
- Vue.js and ecosystem
- All open-source contributors