Kollabify is a premium, state-of-the-art web application engineered to bridge the gap between clients and freelancers. It serves as a unified workspace combining a talent marketplace and an agile project management platform.
By blending the hiring phase seamlessly with project execution, Kollabify removes the friction usually associated with cross-platform coordination. From discovering freelancer portfolios and making ratings to working together on visual Kanban boards with real-time group chat and automated event logging, Kollabify is a complete production-grade solution.
The system is constructed as a decoupled Client-Server Architecture.
graph TD
%% Frontend Components
subgraph Frontend [React + Vite Client]
UI[User Interface / Pages] --> Auth[Auth & Session Layer]
UI --> Mkt[Marketplace & Portfolios]
UI --> KB[Kanban Board Workspace]
UI --> Chat[WebSocket Group Chat]
UI --> Admin[Admin Dashboard]
end
%% Backend Services & Orchestration
subgraph Backend [Spring Boot API Server]
Controller[REST & WebSocket Controllers] --> Services[Domain Services]
%% Design Patterns Orchestration
subgraph DesignPatterns [Software Design Patterns Layer]
State[State Pattern: Project Transitions]
Observer[Observer Pattern: Event Dispatch]
Strategy[Strategy Pattern: Swappable Search]
Decorator[Decorator Pattern: Input Validation]
Adapter[Adapter Pattern: Media Upload Port]
Factories[Factories: Abstract Notification Engine]
Template[Template Method: Admin Operations]
end
Services --> DesignPatterns
Services --> DB[(PostgreSQL Database)]
Adapter --> Cloudinary[Cloudinary Cloud Storage]
end
%% Communications
UI <-->|HTTP REST / JSON| Controller
Chat <-->|STOMP WebSockets| Controller
- Dynamic Portfolio Discovery: Browse a comprehensive directory of freelancers with responsive filter systems.
- Custom Portfolio Showcases: In-depth portfolios showcasing freelancer skills, work history, past project details, and overall client ratings.
- Strategic Search Engine: Instantly switch between Basic and Advanced search algorithms depending on search query complexity.
- Interactive Task Board: Create, update, and manage project items within dynamic columns.
- State-Enforced Lifecycle: Project stages (Open, In-Progress, Closed, Completed, Removed) are strictly governed by state transition rules to ensure data consistency.
- Milestones & Ratings: Facilitates the direct closure of projects, prompting clients to submit feedback and persist permanent ratings for their freelancers.
- WebSocket Group Chat: Enjoy collaborative team messaging powered by WebSockets for zero latency.
- Decorator-Enforced Validation: Messages flow through a modular validation pipeline that automatically runs length checks and filters profanities.
- Dynamic Notification Engine: Delivers instantaneous notifications for project actions, task assignments, and direct communications.
- Centralized Control Room: A comprehensive Admin Panel featuring operational logs, system diagnostics, and analytical reports.
- User Action Templating: Standardized pipeline for blocking, suspending, or deleting platform accounts securely.
- Thread-Safe Session Tracking: Uses a single-JVM manager utilizing double-checked locking to enforce secure session tokens.
Kollabify is engineered with a strict adherence to clean code and robust software design principles. Rather than relying on ad-hoc logic, key operations are governed by industry-standard design patterns to maximize extensibility.
To ensure perfect rendering compatibility across all markdown viewers, the architectural integration of these patterns is outlined below:
- Singleton Pattern (
AdminSessionManager)- Application: Maintains a single, thread-safe, JVM-wide token store (using
ConcurrentHashMap) protected by double-checked locking. - Architectural Benefit: Guarantees a single source of truth for active administrator sessions across the entire JVM.
- Application: Maintains a single, thread-safe, JVM-wide token store (using
- Factory Method Pattern (
NotificationFactory)- Application: Defines an abstract
createNotification()method implemented by specialized concrete factories (TaskNotificationFactory,MessageNotificationFactory,SystemNotificationFactory). - Architectural Benefit: Decouples the notification service from concrete subclasses, allowing new notification types to be introduced without modifying existing services.
- Application: Defines an abstract
- Abstract Factory Pattern (
NotificationFactoryProvider)- Application: Serves as a "factory of factories" (
getFactory(String type)) to retrieve the correct notification factory by type string. - Architectural Benefit: Centralizes notification creation logic behind a single, clean unified interface.
- Application: Serves as a "factory of factories" (
- Builder Pattern (
ProjectBuilder& Lombok@Builder)- Application: Enforces fluent construction APIs with validation checks in the
.build()step. - Architectural Benefit: Used by
ProjectServicefor complex entity validation, as well as DTOs (AdminAnalyticsDTO,SearchQuery) to ensure immutability and valid construction.
- Application: Enforces fluent construction APIs with validation checks in the
- Adapter Pattern (
CloudinaryStorageAdapter)- Application: Implements the common
FileStoragePortinterface to wrap the third-party Cloudinary SDK. - Architectural Benefit: Decouples REST controllers from the specific Cloudinary SDK. Swapping storage providers in the future requires only writing a new adapter without changing business logic.
- Application: Implements the common
- Decorator Pattern (
LengthValidatorDecorator,ProfanityValidatorDecorator)- Application: Dynamically wraps the
BaseMessageValidatorwith length and profanity filter decorators. - Architectural Benefit: Composes a modular, highly extensible, and pluggable validation chain for user messages before database persistence.
- Application: Dynamically wraps the
-
Observer Pattern (
ProjectEventManager)-
Application: Registers and dispatches project lifecycle events (e.g.,
PROJECT_FINALIZED,PROJECT_CLOSED,PROJECT_DELETED) to multiple observers likeActivityLogObserverandNotificationObserver. - Architectural Benefit: Promotes loose coupling. The core project service is unaware of downstream side effects like logging or user notifications.
-
Application: Registers and dispatches project lifecycle events (e.g.,
-
Strategy Pattern (
SearchStrategy)-
Application: Swaps search algorithms (
BasicSearchStrategyvsAdvancedSearchStrategy) inside a dynamicSearchContextbased on the query type. - Architectural Benefit: Keeps the search service open for extension (adding new search algorithms like elasticsearch) but closed for modification.
-
Application: Swaps search algorithms (
-
Template Method Pattern (
AdminUserActionTemplate)-
Application: Prescribes an invariant execution skeleton (Fetch User
$\rightarrow$ Apply Change$\rightarrow$ Persist$\rightarrow$ Audit Log) in the base class, delegating variable steps to subclasses (BlockUserAction,DeleteUserAction,SuspendUserAction). - Architectural Benefit: Eliminates code duplication and guarantees that security, auditing, and persistence are consistently executed for all administrative actions.
-
Application: Prescribes an invariant execution skeleton (Fetch User
-
State Pattern (
ProjectStateContext)-
Application: Encapsulates state-specific behaviors inside dedicated classes (
OpenState,InProgressState,ClosedState,CompletedState,RemovedState). -
Architectural Benefit: Eliminates sprawling conditional statements (
if/else) inside project services and strictly enforces valid lifecycle transitions at the model level.
-
Application: Encapsulates state-specific behaviors inside dedicated classes (
- Language & Framework: Java 17, Spring Boot 3.x
- Database Integration: Spring Data JPA / Hibernate
- Real-time Communication: Spring WebSocket & STOMP Messaging
- Media Handling: Cloudinary Cloud SDK Integration
- Build Tool: Apache Maven
- Framework & Bundler: React 18, Vite
- Styling: Modern Tailwind CSS
- Routing: React Router DOM
- Data Visualization: Recharts
- State & Networking: Axios API layer with integrated Event Buses
Follow these step-by-step instructions to get Kollabify running locally on your machine.
- Java Development Kit (JDK) 17 or higher.
- Node.js (LTS version) & npm (Node Package Manager).
- PostgreSQL Database Server (Running on default port
5432).
Before starting the applications, set up the PostgreSQL database by running the following commands in your database shell or query tool:
CREATE DATABASE collabify_db;
CREATE USER collabify_user WITH PASSWORD 'collabify123';
GRANT ALL PRIVILEGES ON DATABASE collabify_db TO collabify_user;Note
Ensure your local PostgreSQL service is running and accessible on port 5432 with these credentials. The backend is configured to automatically initialize standard tables and seed foundational mock data upon its first run.
- Navigate into the backend directory:
cd backend - Compile and build the project dependencies:
./mvnw clean compile
- Launch the Spring Boot development server:
./mvnw spring-boot:run
Tip
Once fully loaded, the backend API server will be live and listening for queries at http://localhost:8080.
- Open a new terminal window and navigate to the frontend directory:
cd frontend-react - Install the required client packages:
npm install
- Build static production assets (Optional):
npm run build
- Launch the Vite hot-reloading development server:
npm run dev
Tip
The frontend application server will startup and serve the pages locally at http://localhost:5173.
- Ensure both the backend server (
localhost:8080) and frontend client (localhost:5173) are actively running. - Open your preferred web browser and head to: 👉 http://localhost:5173
- Log in as an existing user, register a new account, or explore the administrative control panel to manage platform assets!
- Feature Completeness: All defined Use Cases (UCs) and communication subsystems are fully implemented end-to-end.
- Stability: There are no known system bugs or functional blockers in this release.