Elkkana Corp: Interactive Crew Management Portal with Quality Assurance
Client
Elkkana Corp (Ship Crewing Agency)
My Role
Full-Stack Developer & QA Engineer
Duration
November 2023 - May 2024 & April - May 2025
Tech Stack
Vue.js & Appwrite
Testing Coverage
35+ tests (90%+ coverage)
Project Overview & Business Context
Elkkana Corp, a small ship crewing agency processing approximately 5-10 crew applications daily (around 50 monthly applicants), initially launched with a static company profile website built with Astro.js and Tailwind CSS to establish their online presence. As operational needs evolved, the manual processes for managing crew member data, application tracking, and maritime document handling became increasingly inefficient.
I transformed their static site into a dynamic, secure, and thoroughly tested crew management portal. This project showcases full-stack development capabilities with systematic testing implementation following industry best practices, demonstrating my commitment to delivering reliable, production-ready code.
🧪 Testing & Quality Assurance Implementation
Unit Testing
- • 16+ form validation rule tests
- • Edge cases (null, undefined, whitespace)
- • Factory pattern testing for dynamic rules
- • Business logic validation (email, password)
Component Testing
- • 20+ Vue component tests
- • User interaction simulation (file upload, clicks)
- • Props & events verification
- • Error state handling
Integration Testing
- • Complete form validation workflows
- • Service layer integration with mocking
- • Component lifecycle testing
- • End-to-end user scenarios
Self-Directed Learning: Implemented comprehensive testing using Vitest + Vue Test Utils, following Vue.js community best practices and industry-standard patterns to ensure code reliability.
My Role & Key Contributions
As the sole developer and QA engineer, I handled end-to-end development with a focus on production-ready quality through comprehensive testing. My contributions demonstrate professional-grade development practices:
Secure Authentication System
Built robust authentication with Appwrite including comprehensive testing for edge cases, error scenarios, and user interaction flows using advanced composable patterns.
Profile Management with Form Validation
Designed intuitive dashboard with factory-pattern form validation system, comprehensive error handling, and progress tracking tested across all user scenarios.
Advanced Document Management System
Implemented sophisticated file management supporting 15+ document types with size validation, format checking, and comprehensive upload testing scenarios.
Application Timeline & Status Tracking
Developed clear visual timeline with 8 status stages, real-time updates, and state management tested through complete user application workflows.
Error Handling & Boundary Management
Implemented comprehensive error handling system with user-friendly error boundaries, graceful fallbacks, and extensive error scenario testing.
Quality Assurance Implementation
Established comprehensive testing suite following industry standards with mock services, integration testing, and production-ready quality assurance practices.
Technology Stack & Testing Framework
Frontend & State Management
- • Vue 3 (Composition API)
- • Vue Router (SPA Navigation)
- • Pinia (Reactive State Management)
- • Tailwind CSS + DaisyUI
- • TypeScript (Type Safety)
- • Advanced Composables Pattern
Backend (BaaS) & Services
- • Appwrite Authentication
- • Appwrite Databases/Collections
- • Appwrite File Storage
- • Service Layer Architecture
- • Profile & Application Management
- • Document Configuration System
Testing & Quality Assurance
- • Vitest (Testing Framework)
- • Vue Test Utils (Component Testing)
- • Learning industry best practices
- • Mock Services & API Layer
- • Edge Case Coverage
- • AAA Pattern Implementation
Development Approach: Test-driven development with comprehensive coverage ensuring zero production bugs and maintainable codebase. Initial MVP was built with Astro.js and Tailwind CSS.
Advanced Features & Technical Implementation
Dynamic Form Validation Framework
Built custom composable-based validation system with factory pattern supporting email, password, minLength, maxLength rules with comprehensive testing for all scenarios.
Profile Completion Tracking
Implemented smart progress tracking system with percentage calculation, completion indicators, and guided user experience for profile optimization.
Sophisticated Document Management
15+ document types with categorization, size validation (5MB limit), format checking, preview system, and comprehensive upload/delete lifecycle management.
Real-time Status Management
8-stage application timeline with real-time updates, status synchronization, and seamless user experience across multiple sessions.
Business Impact & Real-World Results
Operational Efficiency
- Manual processing time reduced from hours to minutes for 5-10 daily applications
- Digital document management for 15+ maritime certificate types
- Real-time application status tracking with 8-stage timeline
Technical Quality & Reliability
- Zero production bugs through 35+ comprehensive tests
- Maintainable codebase with 90%+ test coverage
- Professional UX optimized for small-scale maritime operations
Project Outcome & Professional Achievement
The Elkkana Corp portal now efficiently manages their daily operations of 5-10 crew applications with a professional, tested, and maintainable codebase. This project demonstrates my ability to deliver production-ready solutions for small businesses while implementing industry-standard testing practices.
Key Learning Achievement: Successfully implemented comprehensive testing strategies with 35+ tests covering multiple layers, demonstrating self-directed learning and commitment to code quality that exceeds typical first-project expectations.
Key Technical Achievement: Successfully deployed a fully-tested Vue.js application with 35+ tests covering unit, component, and integration levels, showcasing both development and quality assurance skills that exceed typical junior-to-mid-level expectations.
Business Value: Transformed manual processes into streamlined digital workflows, enabling the agency to scale operations while maintaining data integrity and user experience quality through comprehensive testing coverage.