Client Project Tracker - Full Stack Technical Assessment

🔗 Deliverables & Repository Link

• GitHub Repository: https://github.com/FreeDirt/task-management-app

---

🚀 Technology Choices

Layer	Technology	Reason
Backend	Laravel 11	Robust PHP framework with excellent ORM, validation, and REST API support
Database	MariaDB 11	Drop-in MySQL replacement; performant, open-source, Docker-friendly
Frontend	Vanilla HTML/CSS/JS	Lightweight, zero-build-step; fast execution; responsive with Dark/Light mode
Web Server	Nginx (Alpine)	Fast, lightweight reverse proxy routing HTTP → PHP-FPM
Container	Docker + Docker Compose	Reproducible, isolated environment; one-command startup on port 8012

---

📋 Features Implemented

Core Features

• ✅ GET /api/projects: List all projects
• ✅ GET /api/projects/{id}: Retrieve single project details
• ✅ POST /api/projects: Create new project
• ✅ PUT /api/projects/{id}: Update existing project
• ✅ DELETE /api/projects/{id}: Delete project
• ✅ Frontend UI: Complete management dashboard (create, edit, delete, view)

Validation & Edge Cases

• ✅ Client Name is required
• ✅ Project Name is required
• ✅ Status must be one of: Planning, In Progress, On Hold, Completed
• ✅ Priority must be one of: Low, Medium, High
• ✅ Due Date cannot be earlier than Start Date
• ✅ Meaningful JSON error responses (422 Unprocessable Entity) for invalid requests

Bonus Features Included

• ✅ Search functionality (by client name, project name, or description)
• ✅ Filter by Status
• ✅ Filter by Priority
• ✅ Column Sorting (Ascending / Descending)
• ✅ Light / Dark / System Mode Theme Switcher (persisted in localStorage)
• ✅ Containerized Docker Setup (Laravel + MariaDB + Nginx on port 8012)

---

🛠 Setup & How to Run the Application

Prerequisites

• Docker Desktop installed and running.

1. Clone the repository

git clone https://github.com/FreeDirt/task-management-app.git
cd task-management-app

2. Run with Docker Compose

docker compose up -d --build

⚡ Sample Data is Seeded Automatically!
You do NOT need to manually run a seeder command. The container's startup entrypoint automatically detects an empty database, runs migrations, and populates all 12 sample projects from test_data.json.

3. Access the Application

• Frontend Dashboard: http://localhost:8012
• REST API Base URL: http://localhost:8012/api/projects

---

💡 Assumptions Made

1. Environment Setup: Default credentials for MariaDB container are pre-configured in .env and docker-compose.yml for local evaluation convenience.
2. Data Model: client_name and project_name are non-empty strings. status defaults to Planning and priority to Medium.
3. Date Validation: Start and due dates are optional, but if both are provided, due_date must be on or after start_date.
4. Automatic Data Seeding: Database seeding runs automatically when containers start up so evaluators immediately see full sample project data upon opening http://localhost:8012.
5. No Authentication: Authentication was left optional to keep evaluation straightforward.

---

🔧 Useful Helper Commands (Makefile & Manual Commands)

Action	Makefile Command	Raw Docker Command
Start containers	make up	docker compose up -d
Stop containers	make down	docker compose down
Rebuild containers	make build	docker compose build --no-cache
Access app container shell	make shell	docker exec -it fds_app sh
Run migrations	make migrate	docker exec fds_app php artisan migrate
Re-seed sample data	make seed	docker exec fds_app php artisan db:seed
Wipe & re-seed from scratch	make fresh	docker exec fds_app php artisan migrate:fresh --seed
View logs	make logs	docker compose logs -f

---

📡 API Reference

Response Envelope

{
  "success": true,
  "data": { ... },
  "message": "..."
}

Endpoints

Method	Endpoint	Description
GET	/api/projects	List projects (supports search, status, priority, sort_by, sort_direction)
GET	/api/projects/{id}	Get single project by ID
POST	/api/projects	Create a new project
PUT	/api/projects/{id}	Update existing project
DELETE	/api/projects/{id}	Delete a project

---

💭 Technical Reflection

1. Why did you choose this implementation approach?

Laravel 11 was selected for the backend due to its expressive Eloquent ORM, robust Request validation rules, and structured API routing capabilities. MariaDB was used as a reliable, production-ready relational database that pairs seamlessly with Laravel.

For the frontend, vanilla JavaScript with HTML5/CSS3 was chosen over a heavy framework like React/Next.js. Since the app centers around single-page CRUD management, vanilla JS eliminates build step dependencies and bundler overhead while keeping page loads instantaneous.

2. What tradeoffs did you make?

• Vanilla JS vs. SPA Framework: Kept the architecture clean and zero-build, but sacrifices standard component reusability found in React/Vue.
• Blade-served Frontend: Served the single-page frontend directly through Laravel Blade to eliminate CORS complexity and simplify single-port (8012) deployment.
• Session/State in Browser: Theme preferences and UI filters are handled client-side via localStorage and URL parameters rather than persisted user settings in DB.

3. What would you improve if given additional time?

• Automated Testing Suite: Add PHPUnit/Pest feature tests for API validation, search filtering, and CRUD operations.
• Pagination: Implement server-side pagination for scaling to thousands of project records.
• Authentication & Authorization: Integrate Laravel Sanctum for API token authentication and role-based permissions (e.g. Admin vs PM).
• Real-time Notifications: Add WebSockets (Laravel Reverb) to update project lists across multiple open browser tabs in real-time.

4. What was the most challenging part of this assessment?

Ensuring seamless initialization inside Docker where MariaDB container readiness can lag behind container startup. This was solved by adding MariaDB container health checks in docker-compose.yml along with a robust PDO retry loop in docker/app/entrypoint.sh before running migrations and seeders.

5. Did you use AI tools during development?

Yes.

• Which tools? Google Antigravity (Claude Sonnet 4.6 Thinking & Gemini 3.6 Flash).

• How were they used?

  • Scaffolding Laravel 11 structure, API Controller logic, and Form Validation rules.
  • Designing and styling the dark/light/system theme dashboard UI with CSS variables.
  • Writing Docker Compose, Nginx, and PHP 8.4-FPM container configurations.
  • Debugging container PHP version compatibility and fine-tuning git remote configurations.