Task Manager

A full-stack task management application built with Laravel (backend) and React (frontend). This application allows users to register, authenticate, and manage their personal tasks with features like creating, editing, deleting, and filtering tasks.

🚀 Features

Authentication

• User registration and login
• JWT-based authentication
• Protected routes and API endpoints
• User profile management
• Secure logout functionality

Task Management

• Create, read, update, and delete tasks (CRUD operations)
• Task status management (pending/completed)
• Bulk delete functionality
• Search tasks by title
• Filter tasks by status
• Sort tasks by creation date
• Pagination support
• Real-time task statistics dashboard

User Interface

• Responsive design with Tailwind CSS
• Modern React components with hooks
• Toast notifications for user feedback
• Loading states and error handling
• Clean and intuitive dashboard layout

🛠 Tech Stack

Backend

• Framework: Laravel 12.0
• Language: PHP 8.2+
• Authentication: JWT (tymon/jwt-auth)
• Database: MySQL (configurable)
• API: RESTful API with Laravel's built-in routing
• Validation: Laravel Form Requests
• Testing: PHPUnit

Frontend

• Framework: React 19.2.5
• State Management: Redux Toolkit
• Routing: React Router DOM 7.14.2
• Styling: Tailwind CSS 3.4.19
• HTTP Client: Axios 1.15.2
• Icons: Heroicons React 2.2.0
• Notifications: React Hot Toast 2.6.0
• Testing: Jest and React Testing Library

Development Tools

• Package Manager: Composer (PHP), npm (JavaScript)
• Build Tool: Create React App
• Code Quality: ESLint, Pint (PHP)

📋 Prerequisites

Before running this application, ensure you have the following installed:

• PHP 8.2 or higher
• Composer (PHP package manager)
• Node.js 16+ and npm (or yarn)
• MySQL database server (or any supported database)
• Git for version control

🚀 Installation & Setup

1. Clone the Repository

git clone <repository-url>
cd Task-Manager

2. Backend Setup

Navigate to the backend directory:

cd task-manager-backend

Install PHP dependencies:

composer install

Create environment file:

cp .env.example .env

Generate application key:

php artisan key:generate

Configure your database in the .env file:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=task_manager_backend
DB_USERNAME=your_database_username
DB_PASSWORD=your_database_password

Run database migrations:

php artisan migrate

(Optional) Seed the database with sample data:

php artisan db:seed

This will create a test user with the following credentials:

• Email: jonedeo@example.com
• Password: 123456

The seeder also creates 25 sample tasks for testing purposes.

Start the Laravel development server:

php artisan serve

The backend API will be available at http://localhost:8000

3. Frontend Setup

Navigate to the frontend directory (in a new terminal):

cd task_manager_frontend

Install Node.js dependencies:

npm install

Configure the API base URL in the .env file:

REACT_APP_API_BASE_URL=http://localhost:8000/api

Start the React development server:

npm start

The frontend application will be available at http://localhost:3000

📁 Project Structure

Task-Manager/
├── task-manager-backend/          # Laravel Backend
│   ├── app/
│   │   ├── Http/
│   │   │   ├── Controllers/      # API Controllers
│   │   │   ├── Requests/         # Form Request Validation
│   │   │   └── Providers/        # Service Providers
│   │   ├── Models/               # Eloquent Models
│   │   └── Providers/            # Additional Providers
│   ├── bootstrap/               # Bootstrap Files
│   ├── config/                   # Configuration Files
│   ├── database/
│   │   ├── factories/           # Model Factories
│   │   ├── migrations/          # Database Migrations
│   │   └── seeders/             # Database Seeders
│   ├── routes/                  # API Routes
│   ├── .env.example             # Environment Template
│   └── composer.json            # PHP Dependencies
│
├── task_manager_frontend/        # React Frontend
│   ├── public/                  # Static Assets
│   ├── src/
│   │   ├── components/
│   │   │   ├── auth/           # Authentication Components
│   │   │   ├── common/         # Shared Components
│   │   │   ├── dashboard/      # Dashboard Component
│   │   │   └── tasks/          # Task Components
│   │   ├── context/             # React Context
│   │   ├── pages/               # Page Components
│   │   ├── services/            # API Services
│   │   ├── store/               # Redux Store
│   │   │   └── slices/         # Redux Slices
│   │   ├── utils/               # Utility Functions
│   │   ├── App.js               # Main App Component
│   │   └── index.js             # Entry Point
│   ├── .env                     # Environment Variables
│   └── package.json             # Node Dependencies
│
└── README.md                     # This File

🔧 API Endpoints

Authentication

• POST /api/auth/login - User login
• POST /api/auth/register - User registration
• POST /api/auth/logout - User logout (requires authentication)
• POST /api/auth/refresh - Refresh JWT token (requires authentication)
• GET /api/auth/my-account - Get user profile (requires authentication)

Tasks

• GET /api/tasks - Get user's tasks (with pagination, filtering, and search)
• POST /api/tasks - Create new task (requires authentication)
• GET /api/tasks/{id} - Get specific task (requires authentication)
• PUT /api/tasks/{id} - Update task (requires authentication)
• DELETE /api/tasks/{id} - Delete task (requires authentication)
• POST /api/tasks/update-status/{id} - Toggle task status (requires authentication)
• DELETE /api/tasks/bulk-delete - Bulk delete tasks (requires authentication)

Query Parameters for Tasks

• search - Search tasks by title
• filter - Filter by status (pending/completed)
• sort - Sort by creation date (asc/desc)
• limit - Number of tasks per page
• page - Page number for pagination

🎯 Usage

Registration and Login

1. Visit http://localhost:3000
2. Click on "Register" to create a new account
3. After registration, you'll be automatically logged in
4. Use your credentials to login on subsequent visits

Managing Tasks

1. Create Task: Click the "Create Task" button on the dashboard
2. Edit Task: Click the edit icon on any task card
3. Delete Task: Click the delete icon on any task card
4. Toggle Status: Click the checkbox to mark tasks as complete/incomplete
5. Search: Use the search bar to find tasks by title
6. Filter: Use the filter dropdown to show pending/completed tasks
7. Bulk Delete: Select multiple tasks and use the bulk delete option

🧪 Testing

Backend Tests

Run PHPUnit tests from the backend directory:

cd task-manager-backend
php artisan test

Frontend Tests

Run React tests from the frontend directory:

cd task_manager_frontend
npm test

🔒 Security Features

• JWT-based authentication with token expiration
• Password hashing using Laravel's built-in security
• Protected API routes with middleware
• Input validation and sanitization
• CORS configuration for API security
• SQL injection prevention through Eloquent ORM

🚀 Deployment

Backend Deployment

1. Set up a production server with PHP 8.2+ and required extensions
2. Configure your production database
3. Set environment variables for production
4. Run composer install --optimize-autoloader --no-dev
5. Run php artisan config:cache
6. Run php artisan route:cache
7. Run php artisan migrate --force

Frontend Deployment

1. Build the production version: npm run build
2. Deploy the build folder to your web server
3. Configure your web server to serve the React app
4. Update the API base URL in production environment

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🐛 Troubleshooting

Common Issues

1. CORS Errors: Make sure the backend CORS configuration allows requests from your frontend URL
2. JWT Token Issues: Clear browser storage and re-authenticate
3. Database Connection: Verify your database credentials in .env file
4. Port Conflicts: Change the default ports if 8000 or 3000 are already in use

Development Tips

• Use php artisan tinker for debugging database queries
• Check Laravel logs in storage/logs/laravel.log for backend errors
• Use browser developer tools for frontend debugging
• Run php artisan migrate:fresh --seed to reset database with seed data

📞 Support

If you encounter any issues or have questions, please:

1. Check the troubleshooting section above
2. Review the code comments and documentation
3. Create an issue in the repository with detailed information

---

Happy Task Managing! 🎉