https://github.com/abdellatif-laghjaj/todo-list-test
To Do List App using Laravel and Vue js
https://github.com/abdellatif-laghjaj/todo-list-test
Last synced: 10 days ago
JSON representation
To Do List App using Laravel and Vue js
- Host: GitHub
- URL: https://github.com/abdellatif-laghjaj/todo-list-test
- Owner: abdellatif-laghjaj
- Created: 2025-09-03T14:14:03.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-09-03T22:30:39.000Z (about 1 month ago)
- Last Synced: 2025-10-02T01:01:24.414Z (11 days ago)
- Language: Vue
- Homepage:
- Size: 285 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Todo List Application
A modern, full-stack todo list application built with Laravel (backend) and Vue.js (frontend), featuring real-time notifications, JWT authentication, and a responsive design with Tailwind CSS.
## Table of Contents
- [Features](#features)
- [Screenshots](#screenshots)
- [Architecture](#architecture)
- [Tech Stack](#tech-stack)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Environment Configuration](#environment-configuration)
- [Database Setup](#database-setup)
- [Running the Application](#running-the-application)
- [API Documentation](#api-documentation)
- [Project Structure](#project-structure)
- [Development Workflow](#development-workflow)
- [Testing](#testing)
- [Contributing](#contributing)
- [Troubleshooting](#troubleshooting)
## Features
### 🎯 Core Features
- **Task Management**: Create, read, update, and delete tasks
- **Task Status Tracking**: Three status levels (pending, in_progress, completed)
- **Priority System**: Set task priorities (low, medium, high)
- **Due Date Management**: Set and track task deadlines
- **User Authentication**: Secure JWT-based authentication System
### 🔔 Advanced Features
- **Real-time Notifications**: Live updates using Laravel Echo and Pusher
- **Task Statistics**: Dashboard with task completion analytics
- **Responsive Design**: Mobile-first approach with Tailwind CSS
- **Vue.js SPA**: Single Page Application with Vue Router
- **State Management**: Centralized state management with Pinia
- **Event Broadcasting**: Real-time task updates across sessions
- **Profile Management**:
- Update User Information
- Update User Password
### 🛡️ Security Features
- JWT token-based authentication
- API rate limiting
- CSRF protection
- Input validation and sanitization
- Secure password hashing
## Screenshots
## Architecture
This project follows a modern, decoupled full-stack architecture. The frontend is a Vue.js Single Page Application (SPA) that communicates with a Laravel-based REST API. Real-time functionality is achieved using WebSockets via Pusher.
```mermaid
graph TD
subgraph "Frontend Vue.js SPA"
A[User] --> B[Browser]
B --> C[Vue Components]
C <--> D[Pinia Stores]
C --> E[Vue Router]
D --> F[Axios]
end
subgraph "Backend Laravel API"
G[API Routes] --> H[Controllers]
H --> I[Services]
I --> J[Repositories]
J --> K[Eloquent Models]
K <--> L[Database PostgreSQL/MySQL]
I --> M[Laravel Events]
end
subgraph "Real-time Communication"
M --> N[Pusher]
N --> O[Laravel Echo]
end
F --> G
O --> D
style A fill:#ff6b6b,stroke:#333,stroke-width:2px,color:#fff
style L fill:#74c0fc,stroke:#333,stroke-width:2px,color:#fff
style N fill:#69db7c,stroke:#333,stroke-width:2px,color:#fff
```
## Tech Stack
### Backend
- **Framework**: Laravel 12.x
- **Language**: PHP 8.2+
- **Database**: SQLite (configurable to MySQL/PostgreSQL)
- **Authentication**: JWT (tymon/jwt-auth)
- **Broadcasting**: Pusher
- **Queue**: Database driver
- **Cache**: Database driver
### Frontend
- **Framework**: Vue.js 3.x
- **Router**: Vue Router 4.x
- **State Management**: Pinia
- **HTTP Client**: Axios
- **CSS Framework**: Tailwind CSS
- **Icons**: Heroicons
- **UI Components**: Headless UI
- **Build Tool**: Vite
## Prerequisites
Before you begin, ensure you have the following installed on your system:
- **PHP** >= 8.2
- **Composer** >= 2.0
- **Node.js** >= 18.x
- **npm** or **yarn**
- **Git**
### Optional
- **SQLite** (included with PHP)
- **MySQL** or **PostgreSQL** (if not using SQLite)
## Installation
### 1. Clone the Repository
```bash
git clone https://github.com/abdellatif-laghjaj/todo-list-test.git
cd todo-list-test
```
### 2. Install PHP Dependencies
```bash
composer install
```
### 3. Install Node.js Dependencies
```bash
npm install
```
### 4. Environment Setup
```bash
# Copy the environment file
cp .env.example .env
# Generate application key
php artisan key:generate
# Generate JWT secret
php artisan jwt:secret
```
## Environment Configuration
Edit the `.env` file with your specific configuration:
### Basic Configuration
```env
APP_NAME="Todo List App"
APP_ENV=local
APP_DEBUG=true
APP_URL=http://localhost:8000
```
### Database Configuration (MySQL)
```env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_username
DB_PASSWORD=your_password
```
### Broadcasting Configuration (Optional - for real-time features)
```env
BROADCAST_CONNECTION=pusher
PUSHER_APP_ID=your_pusher_app_id
PUSHER_APP_KEY=your_pusher_key
PUSHER_APP_SECRET=your_pusher_secret
PUSHER_APP_CLUSTER=your_pusher_cluster
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
```
### Queue Configuration
```env
QUEUE_CONNECTION=database
```
## Database Setup
### 1. Create Database
Go to your database management tool (e.g., phpMyAdmin, MySQL Workbench) and create a new database named `todo-list`.
### 2. Run Migrations
```bash
php artisan migrate
```
## Running the Application
### Development Mode
#### 1. Start the Laravel Server
```bash
php artisan serve
```
#### 2. Start the Queue Worker (New Terminal)
```bash
php artisan queue:work
```
#### 3. Start Vite Development Server (New Terminal)
```bash
npm run dev
```
### Production Build
```bash
# Build frontend assets
npm run build
# Optimize Laravel
php artisan config:cache
php artisan route:cache
php artisan view:cache
```
## API Documentation
### Authentication Endpoints
| Method | Endpoint | Description |
| ------ | -------------------- | ------------------- |
| POST | `/api/auth/register` | Register a new user |
| POST | `/api/auth/login` | Login user |
| POST | `/api/auth/logout` | Logout user |
| POST | `/api/auth/refresh` | Refresh JWT token |
| GET | `/api/auth/profile` | Get user profile |
### Task Endpoints
| Method | Endpoint | Description |
| ------ | ------------------ | ------------------- |
| GET | `/api/tasks` | Get all user tasks |
| POST | `/api/tasks` | Create a new task |
| GET | `/api/tasks/{id}` | Get specific task |
| PUT | `/api/tasks/{id}` | Update task |
| DELETE | `/api/tasks/{id}` | Delete task |
| GET | `/api/tasks-stats` | Get task statistics |
### Notification Endpoints
| Method | Endpoint | Description |
| ------ | -------------------------------------- | ------------------------------ |
| GET | `/api/notifications` | Get all notifications |
| PUT | `/api/notifications/{id}/mark-as-read` | Mark notification as read |
| PUT | `/api/notifications/mark-all-as-read` | Mark all notifications as read |
| DELETE | `/api/notifications/{id}` | Delete notification |
| DELETE | `/api/notifications` | Clear all notifications |
## Project Structure
```
todo-list-test/
├── app/
│ ├── Events/ # Laravel Events
│ ├── Http/Controllers/ # API Controllers
│ ├── Models/ # Eloquent Models
│ ├── Repositories/ # Repository Pattern
│ └── Services/ # Business Logic Services
├── database/
│ ├── migrations/ # Database Migrations
│ └── seeders/ # Database Seeders
├── resources/
│ ├── js/
│ │ ├── components/ # Vue Components
│ │ ├── router/ # Vue Router Configuration
│ │ └── stores/ # Pinia Stores
│ └── views/ # Blade Templates
├── routes/
│ ├── api.php # API Routes
│ └── web.php # Web Routes
└── tests/ # PHPUnit Tests
```
## Development Workflow
### Adding New Features
1. **Create a new branch**
```bash
git checkout -b feature/your-feature-name
```
2. **Backend Development**
- Create migration: `php artisan make:migration create_feature_table`
- Create model: `php artisan make:model FeatureName`
- Create controller: `php artisan make:controller FeatureController --api`
- Add routes in `routes/api.php`
3. **Frontend Development**
- Create Vue components in `resources/js/components/`
- Add routes in `resources/js/router/index.js`
- Create Pinia stores in `resources/js/stores/`
### Code Style
- **PHP**: Follow PSR-12 coding standards
- **JavaScript**: Use ESLint configuration
- **Vue**: Follow Vue.js style guide
```bash
# Format PHP code
./vendor/bin/pint
# Format JavaScript/Vue code
npm run lint
```
## Contributing
We welcome contributions! Please follow these steps:
1. **Fork the repository**
2. **Create a feature branch**
```bash
git checkout -b feature/amazing-feature
```
3. **Make your changes**
4. **Add tests for new functionality**
5. **Ensure all tests pass**
```bash
composer test
```
6. **Commit your changes**
```bash
git commit -m "Add amazing feature"
```
7. **Push to your branch**
```bash
git push origin feature/amazing-feature
```
8. **Open a Pull Request**
### Contribution Guidelines
- Write clear, descriptive commit messages
- Add tests for new features
- Update documentation as needed
- Follow existing code style
- Ensure CI/CD pipeline passes
## Troubleshooting
### Common Issues
#### 1. JWT Secret Not Set
```bash
Error: JWT secret not set
Solution: php artisan jwt:secret
```
#### 2. Database Connection Error
```bash
Make sure to create the database
```
#### 3. Permission Errors
```bash
# Fix storage permissions (Linux/Mac)
chmod -R 775 storage bootstrap/cache
# Windows
# Ensure the web server has write access to storage/ and bootstrap/cache/
```
#### 4. Node Modules Issues
```bash
# Clear npm cache
npm cache clean --force
# Remove node_modules and reinstall
rm -rf node_modules package-lock.json
npm install
```
#### 5. Composer Issues
```bash
# Clear composer cache
composer clear-cache
# Remove vendor and reinstall
rm -rf vendor composer.lock
composer install
```