Worksome Fullstack Case - Trusted Contacts

This is a Laravel + Vue.js application that demonstrates a "Trusted Contacts" feature for managing freelancers in a company's talent pool.

🚀 Local Setup Instructions

Prerequisites

• PHP 8.2+
• Composer
• Node.js 18+
• NPM

Installation Steps

1. Clone and Setup

   git clone worksome/fullstack-case
   cd fullstack-case
   composer install
   npm install

2. Environment Configuration

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

3. Database Setup

   # The project uses SQLite by default
   touch database/database.sqlite
   php artisan migrate --seed

4. Build Assets

   # For development
   npm run dev
   
   # For production
   npm run build

5. Start the Application

   php artisan serve

6. Access the Application

   • Visit: http://localhost:8000
   • The app will display a table of trusted contacts with sample data

📋 Interview Case Requirements

Context

In Worksome, clients can add workers as "Trusted Contacts" to their Talent Pool for future hires. This application demonstrates the foundation for such a system and proposes a Notes feature for Trusted Contacts.

Current Implementation

• ✅ Trusted Contacts List: Displays freelancers with names, skills, and location
• ✅ Contact Details: Click on any contact to view their profile in a sidebar
• ✅ Clean Data Architecture: Proper Laravel models and relationships
• ✅ Modern Frontend: Vue.js with Tailwind CSS for responsive UI

Notes Feature Requirements

The Notes feature should allow client users to share internal information on workers in their Talent Pool:

Core Requirements:

• A note has a relation to the company and the Trusted Contact
• A Trusted Contact can have more than one note
• Company users should be able to create, read, update and delete notes
• The UI should be fully responsive without page reloads

🏗️ Current Architecture

Database Schema

-- Current Tables
companies (id, name, currency, market)
freelancers (id, name, email, currency, market, country, city)
company_freelancer (id, company_id, freelancer_id, skills)

Models & Relationships

• Company ↔ Freelancer (Many-to-Many via company_freelancer)
• Freelancer: Has avatar accessor for initials generation
• CompanyFreelancer: Pivot model with skills (JSON array)

Frontend Architecture

• Vue.js 3 with Composition API
• Tailwind CSS for styling
• Component Structure:
  • TrustedContacts.vue - Main table view
  • ContactSlider.vue - Profile sidebar

💭 Discussion Areas for Notes Feature

Please share your thoughts on the following areas for implementing the Notes feature:

1. Data Architecture

• Relations, database schema, types etc.

2. Backend Implementation

• Controllers, classes, models, API etc.

3. Frontend Implementation

• Components, styling, state management, validation, API etc.

4. Additional Topics

You're welcome to share thoughts about related topics in the context of this feature, such as:

• User permissions
• Performance
• Security
• Testing
• Notifications
• UX
• Additional functionality for the feature

🔧 Technology Stack

• Backend: Laravel 11, PHP 8.2+
• Frontend: Vue.js 3, Tailwind CSS
• Database: SQLite (development), MySQL/PostgreSQL (production)
• Build Tools: Vite
• Styling: Tailwind CSS v4

---

This application demonstrates modern Laravel development practices with clean architecture, proper relationships, and a responsive Vue.js frontend.