LaraCollab

LaraCollab is a full-stack project management application built with Laravel and React. It gives developers and agencies a free, self-hosted platform to manage clients, projects, time logging, and invoicing—designed with Laravel workflows in mind so you can extend and integrate it into your own toolchain.

---

Table of Contents

• Features
• Screenshots
• Technology & Skills
• Requirements
• Setup
• Admin User
• Web Sockets
• Social Login (Google)
• Roadmap

---

Features

• User roles (e.g. client, manager, developer, designer) with configurable permissions
• Client companies and client users with access to company tasks
• Projects with access control and task groups (e.g. Todo, In progress, QA, Done, Deployed)
• Tasks with assignee, due date, custom labels, time estimation (manual or timer), attachments, subscribers, and comments
• Task filters for quick organization
• Real-time updates via WebSockets (notifications and task changes)
• Mentions in task descriptions and comments
• My Tasks view per user
• Activity feed for projects
• Invoicing from billable tasks and logged time; print or download from the app
• Dashboard with project progress, overdue tasks, recently assigned tasks, and recent comments
• Reports: daily logged time per user and total logged time
• Dark mode support

---

Screenshots

---

Technology & Skills

This section summarizes the stack used in LaraCollab and related technologies you may use when extending or deploying it.

Backend (PHP / Laravel)

Used in project	Related skills & ecosystem
Laravel 11 (PHP 8.2+)	MVC, routing, middleware, service container, service providers
Laravel Sanctum	API tokens, SPA authentication
Laravel Socialite	OAuth (e.g. Google); extendable to GitHub, etc.
Eloquent ORM	Models, relationships, scopes, accessors/mutators
Migrations & seeders	Schema versioning, factories, dev/production data
Form Requests	Validation, authorization
Policies	Authorization per model/action
API Resources	JSON transformation for API/Inertia responses
Events, Listeners, Observers	Decoupled logic, model lifecycle hooks
Queues & jobs	Async emails, notifications; QUEUE_CONNECTION=database
Task scheduling	Cron-driven commands (e.g. prune notifications/activities)
Broadcasting	Real-time events (Pusher or alternatives)
Laravel Pint	PHP code style (formatting)
Pest	PHP testing (unit/feature)
Composer	Dependency management, autoloading, scripts
Laravel Sail	Docker-based local dev (optional)

Notable packages in use:

• Spatie Laravel Permission — roles and permissions
• Spatie Eloquent Sortable — ordered models (e.g. task groups)
• Laravel Auditing (owen-it) — audit trail for models
• Laravel Archivable (joelbutcher) — soft-archive for tasks/groups
• Lacodix Laravel Model Filter — reusable query filters
• Laravel Invoices (laraveldaily) — invoice generation
• Overtrue Laravel Favorite — favoriting (e.g. projects)
• Intervention Image — image handling (e.g. uploads)
• Pusher PHP Server — server-side broadcasting
• Tightenco Ziggy — Laravel routes in JavaScript
• Inertia Laravel — bridge to React without building a separate API

Frontend (React / JavaScript)

Used in project	Related skills & ecosystem
React 18	Components, hooks, context, composition
Inertia.js	SPA feel with server-driven pages; shared data, flash messages
Vite 5	Build tool, HMR, Laravel Vite plugin
JSX	Component syntax, conditional rendering, lists
Mantine 7	UI primitives, theme, modals, notifications, dates, dropzone
TipTap (via Mantine)	Rich text, mentions, links, highlight, placeholder
Zustand	Client-side state (tasks, filters, drawer, notifications)
Axios	HTTP client for API-style calls
Laravel Echo + Pusher JS	WebSocket client for real-time events
React DnD (@hello-pangea/dnd)	Drag-and-drop (e.g. Kanban)
Day.js	Date formatting and manipulation
NProgress	Progress bar for navigation
Print.js	Print/download (e.g. invoices)
ESLint, Prettier	Linting and formatting
CSS Modules	Scoped styles (e.g. *.module.css)
PostCSS	Autoprefixer, Mantine preset, simple vars

Wider frontend skills (useful when extending or rewriting):

• TypeScript, React Query / TanStack Query
• State management (Redux, Jotai, or more Zustand)
• Testing (Vitest, React Testing Library, Playwright/Cypress)
• Responsive design, accessibility (a11y)
• PWA, service workers
• GraphQL (e.g. with Laravel if you add an API)

Third-Party & Integrations

Service / area	In project	Alternatives / notes
Pusher	Real-time (broadcasting)	Ably, Soketi, Laravel Reverb, Redis + Socket.io
Google OAuth	Social login	GitHub, Microsoft, custom OAuth2
SMTP / Mail	Notifications, credentials	Mailgun, Postmark, SES, Mailpit (dev)
Storage	Local disk; optional S3	S3, MinIO, other S3-compatible
Database	MySQL (default)	PostgreSQL, SQLite (dev)
Cache	File (default)	Redis, Memcached
Queue	Database (optional)	Redis, SQS, Beanstalkd
Invoicing	Laravel Invoices (PDF)	Custom templates, external invoicing APIs

DevOps & Environment

• Environment config: .env for app key, DB, mail, queue, cache, Pusher, Google OAuth, AWS (optional).
• Processes: PHP-FPM/web server, queue worker (e.g. Supervisor), cron for schedule:run.
• Containers: Laravel Sail (Docker) for local development.

---

Requirements

• PHP 8.2+
• Composer 2.x
• Node.js 18+ and npm (or pnpm/yarn)
• MySQL 8 (or MariaDB / PostgreSQL with minor config changes)
• For real-time: Pusher account or self-hosted broadcaster (e.g. Soketi, Laravel Reverb)

---

Setup

Project

1. Clone the repository:

   git clone https://github.com/healer-125/pro-laravel-collab.git
   cd pro-laravel-collab

2. Install frontend dependencies:

   npm install

3. Copy environment file and generate key:

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

4. Create an empty database and set DB_* in .env.
5. Run migrations and seed:

   php artisan migrate --seed

   When prompted for development data, choose yes for local/dev or no for production-like.

Development

6. Install PHP dependencies:

   composer install

7. Start the Vite dev server:

   npm run dev

   In another terminal, serve the app (e.g. php artisan serve or Laravel Sail).

Production

6. Install production PHP dependencies:

   composer install --no-dev

7. Optimize and link storage:

   php artisan optimize
   php artisan storage:link

8. Configure the task scheduler (e.g. add to crontab):

   * * * * * cd /path-to-your-project && php artisan schedule:run >> /dev/null 2>&1

9. Optional: set QUEUE_CONNECTION=database in .env and run a queue worker (e.g. with Supervisor):

   php artisan queue:work --queue=default,email

10. Configure mail (MAIL_* in .env).
11. Build frontend assets:

    npm run build

---

Admin User

After running migrations with seed, a default admin user is created:

• Email: admin@mail.com
• Password: password

Change these in production.

---

Web Sockets

Real-time features use Laravel Broadcasting. You can use Pusher (free tier is often sufficient) or open-source alternatives (e.g. Soketi, Laravel Reverb).

Pusher: sign up, create an app, and set in .env:

• PUSHER_APP_ID
• PUSHER_APP_KEY
• PUSHER_APP_SECRET
• PUSHER_APP_CLUSTER

Set BROADCAST_DRIVER=pusher when using Pusher.

---

Social Login (Google)

1. In Google Cloud Console, configure the OAuth consent screen.
2. Create an OAuth 2.0 Client ID (Web application) and copy Client ID and Client secret.
3. In .env set:
   • GOOGLE_CLIENT_ID
   • GOOGLE_CLIENT_SECRET
   • GOOGLE_REDIRECT_URI (e.g. https://your-domain.com/callback/google)

---

Roadmap

• Kanban view
• Report: expense and profit per user
• Project notes section
• Multiple users logging time on the same task
• Task change history
• Per-user permission overrides
• Responsive layout improvements
• Emojis in rich text editor
• Automated tests (backend & frontend)
• Frontend and backend performance tuning
• Consider migrating frontend to TypeScript

---

License

This project is open source; see the repository for license details.