One Click Task - OCT

OneClickTask is a new type of to-do list application designed for efficiency and ease of use. Upon login or page visit, the input field is immediately focused, allowing users to quickly enter new tasks.

The list of current tasks can be filtered by hashtags with just a click, making organization straightforward. Additionally, tasks that cannot be immediately attended to can be paused or postponed with a single click.

Built with Laravel 12, Vue 3, and Inertia.js.

📙 Features

Board-based Multi-tenancy: Create and join multiple boards with role-based access (admin/member)
Task Management: Create, update, and organize tasks within boards
Collaboration: Comments, file attachments, and tags for enhanced teamwork

📙 Tech Stack

Backend

Laravel 12 - PHP framework
PHP 8.2+ - Required PHP version
Laravel Fortify - Authentication
Pest - Testing framework
SQLite - Default database (MySQL/PostgreSQL supported)

Frontend

Vue 3.5 - Progressive JavaScript framework
TypeScript 5.2 - Static type checking
Inertia.js - Modern monolith approach
Vite 7 - Fast build tool
Tailwind CSS 4.1 - Utility-first CSS framework
reka-ui - Headless UI components
Lucide Icons - Beautiful icon set

Package Manager

PNPM - Fast, disk space efficient package manager

📙 Prerequisites

Before you begin, ensure you have the following installed:

PHP 8.2 or higher
```
php -v
```
Composer 2.x
```
composer --version
```
Node.js 22.x
```
node -v
```

PNPM 9.x

pnpm -v
# If not installed:
npm install -g pnpm

SQLite 3 (or MySQL/PostgreSQL if preferred)
```
sqlite3 --version
```

📙 Installation

Quick Setup

The fastest way to get started:

composer setup

This command will:

Install PHP dependencies
Copy .env.example to .env
Generate application key
Run database migrations
Install Node dependencies
Build frontend assets

Manual Setup

If you prefer to run steps individually:

Clone the repository

git clone https://github.com/mct-net/oneclicktask.git
cd oneclicktask

Install PHP dependencies
```
composer install
```
Install Node dependencies
```
pnpm install
```

Environment configuration

cp .env.example .env
php artisan key:generate

Database setup

For SQLite (default):

touch database/database.sqlite
php artisan migrate

For MySQL/PostgreSQL, update your .env file:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=oct
DB_USERNAME=root
DB_PASSWORD=

Then run migrations:

php artisan migrate

Seed database with example tasks (optional)
```
php artisan db:seed --class=TaskSeeder
```
Build frontend assets
```
pnpm build
```

📙 Development

Running the Development Server

Start all development services (recommended):

composer dev

This runs:

Laravel development server (http://localhost:8000)
Queue worker
Log viewer (Pail)
Vite dev server with HMR

Individual Services

Run services separately if needed:

Backend only:

php artisan serve

Frontend only:

pnpm dev

Queue worker:

php artisan queue:listen

Log viewer:

php artisan pail

SSR Development

For server-side rendering:

composer dev:ssr

📙 Testing

Run All Tests

composer test
# or
php artisan test

Run Specific Tests

Specific test file:

php artisan test --filter=DashboardTest
# or
./vendor/bin/pest tests/Feature/DashboardTest.php

Specific test method:

php artisan test --filter=test_user_can_create_board

Test Configuration

Tests use SQLite in-memory database (:memory:)
Database is automatically refreshed before each test
Configuration: tests/Pest.php

📙 Code Quality

Formatting

Format PHP code:

./vendor/bin/pint

Format frontend code:

pnpm format

Check formatting without fixing:

pnpm format:check

Linting

Lint JavaScript/TypeScript/Vue:

pnpm lint

Lint styles (CSS/SCSS/Vue):

pnpm lint:styles

Pre-commit Hooks

The project uses Husky and lint-staged to automatically format and lint code before commits:

ESLint runs on *.{js,ts,vue} files
Stylelint runs on *.{css,scss,sass,html,vue} files
Prettier checks all files

Commit messages must follow Conventional Commits format.

CI/CD

All code quality checks run automatically on push and pull requests:

PHP formatting (Pint)
Frontend formatting (Prettier)
ESLint
Stylelint
Tests (Pest)

📙 Building for Production

Client-Side Rendering (CSR)

pnpm build

Server-Side Rendering (SSR)

pnpm build:ssr

This creates both client and SSR bundles.

📙 Contributing

We welcome contributions! Please see CONTRIBUTING.md for details on:

Code of Conduct
Development workflow
Pull request process
Coding standards
Testing requirements

📙 Support

If you encounter any issues or have questions:

Check existing GitHub Issues
Create a new issue with detailed description
Join our community discussions

Built with ❤️ using Laravel and Vue

oneclicktask/product-overview