Projects using Visual Studio Code in IslamabadProjects using Visual Studio Code in Islamabad✦ MILESTONE → My first plugin, Framemap, is now live on the official Framer Marketplace.
🔗 https://www.framer.com/marketplace/plugins/framemap/
WHAT FRAMEMAP DOES
You describe your project in two sentences. Claude generates a complete responsive wireframe set — mobile (390px), tablet (834px), and desktop (1440px) — and drops it on your Framer canvas as fully editable frames. What used to take an hour of blank-canvas friction now takes seconds.
WHAT'S INSIDE v1
→ 23 section types — hero, features, bento grid, pricing, testimonials, FAQ, CTA, team, blog, gallery, contact, and more
→ Multi-breakpoint output in a single click
→ 4 style presets — SaaS, Agency, E-comm, Minimal
→ Drag-to-reorder before committing to canvas
→ Convert any section to native, editable Framer frames
→ BYO Anthropic API key — keys stay local, generations cost fractions of a cent
🟢 FREE during v1 — v2 will be paid. Anyone reading this can install it today at no cost. That window closes when v2 ships.
WHY THIS MATTERS FOR CLIENTS HIRING ME
The same depth that goes into a marketplace-reviewed plugin goes into every Framer project I deliver. I don't just drag components — I understand the platform from the API up, including its limits. Marketplace approval is Framer's own quality stamp.
WHAT I'M OPEN TO RIGHT NOW
→ Framer site builds (landing pages, full marketing sites, portfolios)
→ Custom Framer plugins for your team or product
→ Product design for SaaS, agencies, and indie founders
→ Template & system work
Currently booking 2–3 slots for the rest of this month. If you've been sitting on a Framer project, this is a good month to start.
📩 khakan@vconekt.com
(mailto:khakan@vconekt.com)🌐 vconekt.com
(http://vconekt.com)🔗 https://www.framer.com/marketplace/plugins/framemap/ ShopVerse is a modern, high-performance iOS e-commerce application built using Swift (SwiftUI) and powered by Firebase as its backend infrastructure.
🏛️ System Architecture: MVVM Pattern
The application is structured around the Model-View-ViewModel (MVVM) architecture to guarantee clean separation of concerns, high maintainability, and testability across both customer and administrator workflows.
1. The Model Layer
The Model layer consists of lightweight, immutable data structures conforming to Swift's Codable and Identifiable protocols.
Product Model: Stores product details such as unique IDs, titles, descriptions, pricing, stock levels, rating summaries, and array paths for high-resolution images stored in the cloud.
Order Model: Captures transaction details including item snapshots, delivery addresses, customer identification, pricing breakdowns, and status states (Pending, Packed, Shipped, Delivered, or Cancelled).
User & Cart Models: Manage profile attributes, assigned roles (Customer or Admin), saved shipping addresses, and live active shopping cart items.
2. The View Layer
Built declaratively using SwiftUI, the View layer handles everything rendered on the screen.
Views remain strictly focused on layout rendering, animations, and capturing user interactions (e.g., button taps, pull-to-refresh gestures, and navigation transitions).
Views do not contain business logic or direct database call implementations; instead, they observe state changes exposed by their corresponding ViewModels.
3. The ViewModel Layer
ViewModels act as the reactive middleware between the data layer and UI screens.
Utilizing @MainActor and @Published properties, ViewModels manage screen-specific states (e.g., loading spinners, active product filters, and checkout step validations).
They process user input, execute asynchronous data operations via async/await, and automatically trigger UI redraws whenever data updates.
4. The Service Layer
Encapsulated as injected singletons or protocols, services manage external network interactions.
Handles low-level Firebase authentication triggers, Cloud Firestore read/write streams, image uploads to Firebase Storage, and payment gateway SDK integrations (e.g., Stripe or Apple Pay).
🔥 Firebase Backend Mechanics & Data Management
Firebase serves as the serverless engine driving ShopVerse, enabling real-time database syncing, secure authentication, and scalable media storage.
1. Authentication & Role-Based Access Control (RBAC)
Security and session management are handled through Firebase Authentication.
Multi-Provider Auth: Supports native Email/Password credentials alongside one-tap sign-ins via Apple ID and Google accounts.
Session Persistence: Authenticated tokens are stored securely in the iOS Keychain, allowing users to remain logged in across app restarts.
Role Verification: Upon successful authentication, the system queries the user's Firestore profile document to check their role attribute. If designated as admin, the app routes the user to the store management dashboard; otherwise, it presents the primary shopping portal.
2. Cloud Firestore Database Structure
Firestore operates as a real-time, NoSQL document-oriented database structured into clean top-level collections.
3. Offline Persistence & Caching
Firestore's local disk caching mechanism is enabled during app launch.
Uninterrupted Browsing: Product listings and cart states are cached locally on the device disk. If the device loses internet connection, users can still view products and manipulate their cart without app crashes or blank screens.
Background Sync: Any state changes made offline are queued locally and automatically committed to the cloud database once connectivity is restored.
4. Real-Time Data Synchronization via Snapshot Listeners
Instead of relying on traditional HTTP polling or manual screen pulls, ShopVerse utilizes Firestore addSnapshotListener connections.
Live Order Tracking: When an administrator updates an order status in the admin portal (e.g., changing an order from Processing to Shipped), a persistent WebSocket listener pushes the updated state directly to the customer's device in real time, updating the UI timeline instantly.
📱 Advanced SwiftUI Concepts & Interactive UX Patterns
To deliver a refined, native iOS user experience, ShopVerse incorporates several specialized SwiftUI and iOS framework capabilities.
1. Skeleton Loading Shimmer Effect
Rather than displaying a generic activity indicator (ProgressView), ShopVerse uses a custom shimmer modifier during initial data fetches.
Visual Continuity: Placeholder wireframe cards matching the dimensions of actual product cards are rendered instantly.
Linear Gradient Wave: An animated gradient mask sweeps horizontally across the placeholder shapes, signaling active loading while maintaining visual context.
2. Tactile Feedback & Haptic Engine Integration
To make digital interactions feel physical, ShopVerse leverages the device's Taptic Engine via UIImpactFeedbackGenerator.
Action Reinforcement: Tapping the Add to Cart button, toggling a wishlist heart icon, or confirming a checkout step triggers precise physical haptic ticks, increasing user confidence during interactions.
3. Query Debouncing using the Combine Framework
Unrestrained search fields can send dozens of unnecessary database queries while a user types, causing performance lag and inflated database read costs.
The Debounce Pattern: Utilizing Combine's .debounce(for: .milliseconds(300)) operator, search queries are held in a reactive pipeline.
Cost Optimization: Database search requests are only fired after the user pauses typing for at least 300 milliseconds, dropping all intermediate keystroke queries.
4. Administrative Data Visualization via Swift Charts
The integrated Admin Portal transforms raw Firestore sales data into actionable visual insights using Apple's native Charts framework.
Real-time Metrics: Aggregated sales figures, daily order totals, and revenue metrics are compiled into interactive bar charts and line graphs, allowing store managers to assess revenue trends dynamically. Build a custom 2D isometric game prototype featuring dynamic tilemap rendering, player movement mechanics, and object entity collision handling.
Key Highlights:
Isometric Rendering Engine: Built custom coordinate translation for smooth 2D isometric grid layout and depth sorting.
Player & State System: Implemented responsive character movement controllers, directional sprite animations, and object interaction routines.
Asset & Tile Architecture: Integrated modular environment tilesets,
tree generation logic, and asset loading pipelines.
Realm2D - Isometric 2D Game & RPG Prototype
Tech Stack: Java, LibGDX / Custom 2D Engine, Game Architecture, OOP, Tilemap Logic. CronShieldLabs.com (https://CronShieldLabs.com) - A SaaS Monitoring Platform
I designed and developed CronShieldLabs.com as a lightweight SaaS platform that helps developers, agencies and online businesses detect silent failures across their digital services.
The platform combines five monitoring functions within one secure dashboard: cron heartbeat monitoring, website uptime and response-time checks, SSL certificate tracking, domain-expiry monitoring and DNS-change detection. Users can create and manage monitors, review historical results and receive failure, recovery and expiry notifications.
I developed the application using PHP, MySQL/MariaDB, HTML and CSS, with scheduled server-side processes handling automated checks. The architecture includes secure authentication, account-based data isolation, CSRF protection, prepared database queries, rate limiting and private configuration stored outside the public website directory.
CronShieldLabs.com also includes Free, Pro and Business subscription plans, manual Binance Pay verification, an administrator dashboard, registered-user management and service limits based on each customer’s plan.
A major technical consideration was securing website checks against private-network access and unsafe redirects. The platform validates public destinations, blocks private and reserved addresses and rechecks redirect targets before connecting.
The project was designed as a cost-efficient shared-hosting MVP with a clear expansion path. Future opportunities include branded public status pages, API and keyword monitoring, Telegram and webhook alerts, team accounts, incident management, multi-location checks and automated subscription billing.
CronShieldLabs.com demonstrates my ability to design a complete SaaS product from public marketing pages and secure authentication to database architecture, background monitoring processes, payment workflows and future commercial planning.
Website: https://cronshieldlabs.com The Problem: Traditional chatbots are rigid and fail at answering complex, company-specific questions, frustrating users and escalating too many tickets to human agents.
The Solution: An intelligent chatbot integrated with Retrieval-Augmented Generation (RAG). It ingests the company’s FAQs, product manuals, and past support tickets to provide accurate, conversational answers, escalating to a human only when necessary.
Tech Stack: Python, LangChain, OpenAI API, Pinecone (Vector Database), React/Next.js for the frontend.
Key Features Highlight:
Dynamic context retrieval (reads PDFs and website data).
Sentiment analysis to detect frustrated customers.
Seamless human handoff protocol. 
