Hafiz Anas Hashmani

NEXT-GENERATION PORTFOLIO

INITIALIZING SYSTEM

Hafiz Anas Hashmani

Crafting exceptional digital experiences with clean code and thoughtful design

Get To Know Me

About Me

Crafting digital experiences with passion, precision, and purpose

👋Hello, I'm Hafiz Anas Hashmani

A versatile Full Stack Developer and CMS Developer withdelivering scalable, intelligent solutions. Skilled in integrating AI to enhance digital platforms and create impactful user experiences.

I specialize in building scalable web and mobile applications using React, TypeScript, and modern development technologies, while exploring AI-powered solutions to enhance user experiences. I thrive on turning complex problems into elegant, intelligent solutions.

Beyond work, I love contributing to open-source projects, mentoring aspiring developers, and exploring emerging AI and software technologies. I believe in continuous learning and staying at the forefront of technological innovation.

Core Technologies

AI IntegrationReactNext.jsTypeScriptNode.jsPythonAWSORMSqlPHPNest.jsStripePaypalMongoDBDocker

Interpersonal Skills

CommunicationTeamworkProblem SolvingAdaptabilityLeadershipCritical ThinkingTime ManagementConflict ResolutionNegotiation SkillsEnglish (Professional)Urdu (Native)

Let's Connect

anashashmani2002@gmail.com
+92 300 3669272
anashafihashmani.me
Karachi, Pakistan

Achievements

Top Rated on Upwork
Expert in AI Integration
30+ Projects Delivered

Available for Hire

Open to New Opportunities
Open to Relocation
Remote & On-site Available
DotClick Logo

Full Stack Mern Developer

DotClick

2025 — Present

Successfully delivered projects across diverse industries, focusing on web application development, API engineering, and cloud integration solutions.

React • Node.js • Typescript • AI Integration
Askari Technologies Logo

Mern Stack Developer

Askari Techonolgies

2024 — 2025

Delivering high-quality projects across diverse domains, specializing in web applications, API development, and cloud integrations.

React • React Native • Typescript • Payemnt Integration
Pixels House Technologies Logo

CMS Developer

Pixels House Technologies

2024 — 2025

Leading digital transformation in content management, implementing and integrating CMS platforms, and training teams on modern CMS workflows.

WordPress • Shopify • PHP • MySQL
Tech Arsenal

Technology Stack

Technologies I use to bring ideas to life

Backend

Node.js

Expert
3 years exp

Python

Beginner
1 year exp

Express

Expert
3 years exp

Nest.js

Beginner
1 year exp

PHP

Intermediate
2 years exp

Socket.io

Intermediate
2 years exp

Frontend

React

Expert
3 years exp

Next.js

Expert
3 years exp

TypeScript

Intermediate
2 years exp

JavaScript

Expert
3 years exp

Tailwind CSS

Intermediate
2 years exp

Database

PostgreSQL

Intermediate
2 years exp

MongoDB

Expert
3 years exp

MySQL

Intermediate
2 years exp

Redis

Beginner
1 year exp

Drizzle

Intermediate
2 years exp

Supabase

Intermediate
2 years exp

Cloud & DevOps

AWS

Beginner
1 year exp

GCP

Intermediate
2 years exp

Firebase

Expert
3 years exp

Docker

Beginner
1 year exp

Git

Expert
4 years exp

AI & Integration

OpenAI

Expert
1 year exp

Vercel AI SDK

Expert
2 years exp

Stripe

Expert
2 years exp

Paypal

Beginner
1 year exp
Professional Journey

Experience

My professional journey and the impact I've made across different domains

DotClick logo
January 2025 — Present

Full-Stack Mern Developer

DotClick

Successfully delivered projects across diverse industries, focusing on web application development, API engineering, and cloud integration solutions.

Key Achievements

Currently leading a team of developers at Dotclick, managing development cycles, task allocation, and client communication.
Specialized in building and maintaining business-focused web applications including SaaS and CRM platforms for clients across multiple industries.
Contributed to full-stack development using React, Node.js, Express, and Apollo to deliver scalable and efficient solutions.
Worked closely with the design and product teams to convert business requirements into functional and visually appealing interfaces.

Technologies & Skills

TypeScriptNode.jsReact.jsNext.jsPsqlMongoDBFirebaseAWSGCPOpenAI API
Askari Technologies logo
Dec 2024 – Feb 2025

Full-Stack MERN Developer

Askari Technologies

Delivering high-quality projects across diverse domains, specializing in web applications, API development, and cloud integrations.

Key Achievements

Improved frontend performance by 25% via optimized React state management and reusable components.
Implemented JWT authentication & Stripe (payments + subscriptions), securing online transactions.

Technologies & Skills

React.jsReact NativePayment IntegrationTypeScript
Pixel House Technologies Pvt Ltd logo
Jun 2023 – May 2024

WordPress Developer

Pixel House Technologies Pvt Ltd

Leading digital transformation in content management, implementing and integrating CMS platforms, and training teams on modern CMS workflows.

Key Achievements

Developed and optimized e-commerce websites to enhance performance, user experience, and search engine rankings
Designed and implemented branding websites with visually appealing layouts and consistent brand identity.
Created engaging and responsive blog websites tailored to client requirements.

Technologies & Skills

WordPressPHPPluginTheme Development
3+
Years Experience
30+
Projects Completed
91%
Success Rate
Portfolio Showcase

Featured Projects

Explore my latest office projects showcasing expertise in web development, AI integration, and digital innovation.

Rental Platform
Live

EasyRent.es

Full-Scale Rental Management Platform — Bilingual Public Site, Booking Funnel & Admin Back Office for Valencia, Spain

A production-grade Next.js 16 application (~61,000 lines of TypeScript) serving three audiences from one codebase: a bilingual public site (ES/EN) with property listings and lead capture, a self-service booking funnel with prorated cost breakdowns and Stripe payments, and a comprehensive admin back office with SEPA recurring billing, CMS, SEO overrides, and automated operations.

Key Features

  • Bilingual public site (Spanish root + English under /en) with proxy-based i18n routing and SEO-preserving WordPress slug redirects
  • Three-Vía booking funnel: tenant self-service (manual-capture hold), admin-generated links (immediate capture), with idempotent confirmation
  • Pure proration engine (Rules A–E) — single source of truth for entry/exit month rent, utilities, 10%+21% IVA commission, and late check-in fees
  • SEPA Direct Debit recurring billing: mandate capture, pricing snapshot at activation, auto-generated payment schedules, and 5-business-day settlement tracking
  • 4-stage failure escalation state machine (Day+1/+3/+5/+10) with surcharge application and formal contract resolution
  • Postgres-backed job queue drained every 15 min by Vercel Cron for WhatsApp/email lifecycle automation
  • Check-in modality classifier (office vs KeyNest) based on Europe/Madrid time and Valencia public holiday calendar
  • Full CMS (site_content keyed by page/section/key), per-page SEO override layer with JSON-LD builders, dynamic sitemap, and admin-managed redirects
  • 69 API routes, 22 public pages, 23 admin pages, 28 database tables, ~170 components
  • PDF generation for reservation summaries and conditions attached to confirmation emails

Deliverables

  • Bilingual proxy-based i18n routing layer (ES root + EN under /en) with SEO-preserving WordPress slug redirects built from 16 months of Search Console data
  • 28-table Drizzle ORM schema with 15 numbered SQL migrations, barrel-exported across 22 schema modules
  • 801-line Stripe webhook handler routing payment_intent.succeeded, SEPA mandate lifecycle, and failure events
  • Full CMS, per-page SEO override layer with JSON-LD builders for properties, articles and LocalBusiness
  • Automated operations layer: cron-driven job queue with WhatsApp (Twilio Content Templates) and Resend email at lifecycle milestones
  • PDF generation (pdf-lib) for reservation summaries plus Supabase Storage with 5 typed buckets

Technology Stack

Next.js 16React 19TypeScriptPostgreSQLDrizzle ORMSupabaseStripeSEPA Direct DebitTwilio WhatsAppResendTanStack QueryTailwind CSS v4shadcn/uiZod v4Vercel
Tournament Platform
Live

WITBaseball.com

Full-Stack Youth Baseball Tournament Platform — Registration, PayPal Payments, Live Scoring & Admin Operations for Nassau, Bahamas

A complete tournament-operations platform for Winter in the Tropics youth baseball (8U, 10U, 12U divisions, 8 teams max each). Covers the full lifecycle: public marketing site, 5-step coach registration wizard with PayPal checkout, insurance-verification gate, admin back office (registrations, payments, schedule, brackets, announcements, media, CMS), and read-only portals for coaches and parents with real-time live score updates via Supabase Realtime.

Key Features

  • 5-step coach registration wizard: Team Info → Player Roster (1–25 players) → Contact/Account → Insurance → Review + PayPal Payment
  • PayPal Orders v2 checkout with GUEST_CHECKOUT, idempotent capture, webhook recovery for tab-close scenarios, and signature verification
  • Insurance verification gate: upload proof → admin approve/reject → blocks effectiveStatus until cleared, with rejection resubmit flow
  • Local Bahamas team fee waiver: honour-system residency declaration, inline confirmation, Waived payment method with full audit trail
  • Real-time live score updates via Supabase Realtime (Postgres logical replication on matches table with REPLICA IDENTITY FULL)
  • Bracket generation engine: auto-scaffolds Quarterfinal/Semifinal/Final rounds based on registered team count per division
  • Standings system with SQL-side upserts: wins×3 + ties×1 scoring, run differential tracking, updated atomically on score entry
  • Parent portal with Player ID verification (PLR-NNNNN), child-team linking, schedule/results/insurance viewing
  • Role-based access (admin/coach/parent) with Supabase Auth, ownership guards, and roster-lock once matches go Live
  • Announcement system with audience-targeted email broadcast (All Teams, Coaches, Parents, specific divisions) via Resend
  • Full CMS: content pages, FAQs, rules, hotels, travel tips, sponsors (Title/Gold/Silver/Bronze tiers), media gallery
  • 124 API endpoints across 24 NestJS controllers with Swagger docs at /docs

Deliverables

  • NestJS 11 backend (~11.2K LOC, 163 TS files): 23 modules, 24 controllers, 124 endpoints with global auth guard, validation pipe, and standardized response envelope
  • TanStack Start frontend (~30.2K LOC, 170 files): 51 file-routes, 46 shadcn/ui primitives, SSR with Nitro server, gzip + brotli precompression
  • 24-table PostgreSQL schema with 13 enums and 12 SQL migrations, including DB triggers for player code generation and roster limit enforcement
  • PayPal Orders v2 integration with webhook signature verification, idempotent confirmation cascade, and abandoned-checkout recovery
  • Supabase Auth integration with custom password reset flow, Supabase Storage for media/insurance uploads, and Realtime for live match updates
  • Transactional email system via Resend with branded HTML templates for registration, payment confirmation, insurance rejection, and announcements

Technology Stack

NestJS 11TanStack StartTanStack RouterReact 19TypeScriptPostgreSQLDrizzle ORMSupabasePayPal Orders v2ResendZustandTanStack QueryTailwind CSS v4shadcn/uiZodVite 7
Music Marketplace
Live

BoloboWorldMusic.com

Direct-to-Fan Music Streaming & Marketplace — Tri-Role Platform (Fan, Artist & Admin) with Automated Net Revenue Splits & Fan Economy

A large-scale direct-to-fan music ecosystem (~70,700 lines of TypeScript across 297 files, 138 SQL migrations, 26 Deno Edge Functions) empowering independent artists to sell tracks and albums directly to fans while keeping 100% master ownership. Unifies three role-isolated applications in one codebase: fan discovery, streaming and purchases (/app/*), gated artist catalog management and Stripe Connect payouts (/artist/*), and 14-section admin operations (/admin/*). Features automated 60/40 net revenue splits, presigned Cloudflare R2 audio/video delivery, a 3-tier fan loyalty economy (points, tiers, badges, sweepstakes), and 5-language internationalization with dynamic RTL support.

Key Features

  • Three role-isolated portals in one SPA: Fan Discovery & Library (/app/*), Artist Catalog & Earnings (/artist/*), and 14-section Permission-Gated Admin Console (/admin/*)
  • Automated 60/40 net revenue split engine: deducts Stripe processing fees, allocates net 60% to artist and 40% to platform atomically upon checkout completion
  • Stripe Connect Express payouts: automated KYC onboarding for approved artists, DB trigger-enforced balance sufficiency, FIFO earnings deductions, and transfer execution
  • Content-protected audio/video streaming via Cloudflare R2: presigned PUT uploads (50MB audio/video) and presigned 1-hour GET URLs with track/album purchase verification
  • Smart playback security: 1-hour presigned full playback for purchased items, preview-only streaming fallback for unowned tracks, and 55-minute client-side URL caching
  • Triple-tier Fan Economy: append-only points ledger (fan_points_ledger), platform fan tiers (Bronze/Silver/Gold/Platinum), and per-artist supporter badges derived from spend
  • Season launch sweepstakes engine: 10 points = 1 entry ticket (SWP-2026-XXXXXXXX) with OFAC sanction compliance checks and automatic refund invalidation
  • Gated artist application wizard: 4-step submission, 5-year exclusive agreement with 100% master ownership retained, contract traceability (BLB-REC-2026-XXXXXXXX), and human review
  • Social feed & community circles: short-form video viewer, threaded discussions, scheduled AMAs with attendance rewards, concert booking requests, and ticket click tracking
  • Multilingual internationalization: 5 languages (English, French, Spanish, Hindi, Arabic) with RTL layout switching and locale normalization across 8 namespaces

Deliverables

  • Full-stack monorepo (~70.7K LOC TS/TSX, 297 files): 67 pages, 165 components, 49 Radix/shadcn primitives, and 29 custom hooks across 3 user roles
  • PostgreSQL data layer: 138 SQL migrations (~7,250 LOC) across 64 tables with RLS on every table, ~70 RPCs, and recursion-safe role resolution
  • 26 Supabase Deno Edge Functions (~3,450 LOC) powering payment intents, Stripe webhooks, Connect payouts, presigned R2 URLs, and auth email flows
  • Idempotent checkout pipeline: duplicate-click guards, 15-minute pending PaymentIntent reuse, client-side confirmation cascade, and webhook reconciliation
  • Brevo transactional email integration: 9 non-blocking email triggers for signups, purchases, tier upgrades, artist approvals, and concert announcements
  • Playwright end-to-end test suite (6 specs) verifying core financial and approval closures with automatic video recording and staging safety assertions

Technology Stack

React 18TypeScriptVite 5SupabasePostgreSQLDeno Edge FunctionsStripe ConnectCloudflare R2Tailwind CSSshadcn/uiTanStack QueryZustandBrevoi18nextPlaywrightVitest
SaaS Platform
Live

YouCalendy.app

Multi-Tenant Appointment & Salon Management SaaS — Tri-Cookie Auth, Availability Engine, Metered Messaging & Google Translation Subsystem

A full-scale multi-tenant SaaS appointment-booking and business-operations platform (~98,200 LOC across React 19 and Node.js/Express) built for salons, barbershops, and appointment-driven service teams. Comprises two independently deployed codebases: a high-throughput REST API on Railway (23 Mongoose models, 22 controllers, 216 live endpoints across 17 routers) and an 85-page React 19 SPA on Vercel (Mantine 7, Tailwind 4, TanStack Query). Features a sophisticated three-cookie auth architecture, per-tenant client scoping with phone-normalized record merging, triple-layer no-show blocking, automated discount stacking (weekly promotions vs flash sales), credit-metered SMS/email campaigns, and an in-DOM Google Cloud Translation engine.

Key Features

  • Multi-tenant architecture across 3 distinct personas: Barber business owners, Clients (scoped strictly per business), and Platform Admins/Sub-admins
  • Three-cookie httpOnly authentication: userToken, adminToken, and clientToken with client-side x-user-context header disambiguation and path-based fallback
  • Smart availability & scheduling engine: computes slots stepping by service duration, honours staff working shifts, nested breaks, and same-day booking buffers
  • Phone-first client deduplication: canonical E.164 normalization and indexed 10-digit phoneComparable matching, merging walk-in histories upon self-registration
  • Triple-layer hardened no-show defense: route middleware, controller guard, and availability filter with broad OR-matching on ID, email, and phone to prevent evasion
  • Dual promotional discount engine: evaluates recurring weekly Happy Hours promotions vs absolute date-range flash sales with automated stacking rules
  • Credit-metered SMS & email messaging: integer credit wallets on businesses, pre-flight 402 middleware gates, Stripe checkout top-ups, and bulk campaign delivery
  • Automated background cron scheduler: UTC node-cron jobs running every 5 min for scheduled campaigns and every 15 min for automated appointment reminder SMS
  • Runtime translation subsystem (~7.4K LOC): static i18next catalogue augmented by live DOM string extraction and batch Google Cloud Translation v3 with MongoDB caching
  • Admin logical backup & restore: Cloudinary-backed exports across 16 database collections with real-time phase, percentage, and collection-level progress reporting
  • Barber onboarding wizard: multi-step setup draft persisted in Redux Toolkit, generating public booking share tokens (BarberLink) with access tracking

Deliverables

  • Express 4 backend (~30.4K LOC, 17 routers, 22 controllers, 216 live endpoints) with Winston logging, Swagger OpenAPI docs, and GA4 telemetry
  • React 19 SPA (~67.8K LOC, 85 pages, 30 hooks, 20 API services) powered by Vite 6, Mantine 7, Tailwind CSS v4, and TanStack Query 5
  • 23-model MongoDB schema: Business tenant root, embedded and standalone services, staff schedule matrices, haircuts gallery, and audit trails
  • Stripe integration: 14-day lazy-expiry business trials, tier subscriptions via Stripe Billing, one-off credit bundle checkouts, and raw-body webhooks
  • Omnichannel communication pipeline: Twilio SMS, Brevo/Nodemailer transactional emails, and Firebase Cloud Messaging (FCM HTTP v1) push alerts
  • Administrative operations suite: user stats, revenue projections, audit logging with mandatory reason tracking, and client moderation queues

Technology Stack

React 19Vite 6Node.jsExpress 4MongoDBMongoose 6StripeTwilioBrevoCloudinaryGoogle Cloud TranslateFirebase Auth & FCMMantine 7Tailwind CSS v4TanStack Query 5Redux ToolkitApexCharts
FinTech SaaS
Live

FinanceManagement.com

SaaS Personal Finance & Team Treasury Suite (Imagitive) — Authoritative Wallet Engine, Zero-Based Budgeting, Stripe Billing & AI Copilot

Imagitive is a full-stack personal finance and team treasury management platform (~35,000+ LOC across React 19 and Node.js/Express) enabling individuals and small teams to track real-time income/expenses, configure category budgets, save toward milestone goals, model zero-based budgets, and consult an AI financial copilot. Backed by an authoritative MongoDB wallet architecture, a dual-token team permission layer (ownerToken swapping for delegated financial management), multi-tier Stripe subscription billing with 31-day trials and seat-capped lifetime plans, and multi-format reporting with PDF, XLSX, and CSV exports.

Key Features

  • Authoritative Wallet engine: centralized real-time balance ledger acting as single source of truth across transactions, savings goals, and scheduled expenses
  • Zero-based budgeting workbench: composites wallet balances, recent ledger lines, scheduled debits, monthly fixed costs, and savings trends into a net-zero allocation view
  • Dual-token team treasury delegation: ownerToken minting and client-side swapping for sub-users with granular permissions (manageGoal, manageCategory, manageSchedule)
  • Multi-tier Stripe subscription engine: 31-day trial with SetupIntent (confirmSetup) handling, recurring monthly/yearly tiers, and seat-capped lifetime subscriptions
  • AI Financial Assistant: conversational GPT-4 copilot integrated into global dashboard layout with full conversation persistence in MongoDB and history controls
  • Dynamic savings goals & analytics: automated goal status recomputation against live balances, tracking deadline urgency and percentage progress
  • Scheduled & recurring transaction pipeline: forward-dated transactions with node-cron processing and automated monthly fixed expense rollover
  • Visual financial analytics & data exports: 12-month income/expense trendlines, weekly debit matrices (ApexCharts), and multi-format exports (PDF, XLSX, CSV)
  • Server-synchronized dark mode: user theme preference persisted in MongoDB via debounced PATCH syncing, applied to custom #1d1e30 dark theme palettes
  • White-label admin operations: runtime favicon and logo management via Cloudinary, site settings configuration, user moderation, and support ticket desk

Deliverables

  • Express 4 REST backend: 15 modular feature routers, 22 domain controllers, Winston file/console logging, and OpenAPI Swagger documentation
  • React 19 Single Page App: powered by Vite 6, Mantine 7 UI kit, Tailwind CSS v4, React Router 7, and 25 domain-specific TanStack Query hooks
  • MongoDB Mongoose data model: 11 domain schemas spanning Wallets, Polymorphic Transactions (Category vs Plaid), Goals, Plans, and Billings
  • Stripe webhook infrastructure: raw-body Express parsing mounted prior to JSON body parsers, verifying signatures for subscription and invoice lifecycles
  • Dual-provider transactional email: Brevo integration for 6-digit signup OTP verification and SendGrid for password-reset tokens with EJS templates
  • Banking & cloud integration: Plaid API SDK integration for institutional accounts, and Cloudinary media pipeline for profile and brand assets

Technology Stack

React 19Vite 6Node.jsExpress 4MongoDBMongoose 6StripeOpenAI GPT-4Plaid APITailwind CSS v4Mantine 7TanStack Query 5ApexChartsCloudinaryBrevoSendGridjsPDF
Food & Beverage SaaS
Live

TheMonk.ae

Enterprise Multi-Branch Restaurant Operations & Ordering Ecosystem (Dubai/UAE) — 4-Channel Ordering, WebUSB Thermal Printing & Live Dispatch

A high-throughput enterprise restaurant management ecosystem (~65,400 LOC TypeScript across 435 files, 40 PostgreSQL tables) powering multi-branch operations for The Monk across Dubai and the UAE. Unifies four distinct ordering channels — Customer Web Storefront (order.themonk.ae), Mobile App (FCM push), WhatsApp Conversational Bot with Stripe payment links (WATI), and in-store POS. Backed by a transactional Drizzle ORM PostgreSQL backend, real-time Socket.IO kitchen dispatch with direct WebUSB ESC/POS thermal slip printing, automated 1-minute order lifecycle crons, rider dispatch with photo delivery proofs, and 3-tier gzip database backups.

Key Features

  • 4-Channel Unified Ordering: Web Storefront (order.themonk.ae), Mobile App, in-store POS, and WhatsApp Conversational Bot with Stripe payment links via WATI
  • Single-Transaction Order Pipeline: atomic checkout processing inserting orders, price-snapshotted line items & addons, loyalty earnings/redemptions, and cart clearing
  • Real-Time Thermal Receipt Printing: Socket.IO order:slip:print broadcast driving direct WebUSB ESC/POS byte sequence generation for kitchen receipt printers
  • Automated Order Lifecycle Cron: 1-minute interval background runner auto-promoting unattended pending orders to preparing status after 5 minutes
  • Multi-Branch Scoped Management: branch manager isolation filtering live orders boards, operational schedules, delivery radiuses, and branch-specific VAT configurations
  • Dynamic Loyalty & Promotion Engine: automated points accrual (orderTotal × earningRate), configurable redemption caps, promo codes, and immutable ledger transactions
  • Rider Dispatch & Logistics Tracking: branch rider assignment queues, active delivery progression, proof-of-delivery photo uploads, and weekly tips/hours analytics
  • 3-Tier Automated Backup Engine: UTC cron-driven full SQL database dumps of 40 tables, gzip compression (85-95% reduction), Cloudinary storage, and manifest indexing
  • Bilingual Arabic/English Localization: full RTL layout direction mirroring with dual-language menu descriptions (name_arabic, description_arabic) and i18next engine
  • Resilient Multi-Channel Messaging: non-blocking notification service fanning out across SendGrid transactional email, WATI WhatsApp, Twilio SMS, and Firebase Cloud Messaging

Deliverables

  • Express 4 + Socket.IO REST & Real-time Backend (~26.2K LOC TS, 28 controllers, 40 DB tables) built with Drizzle ORM on PostgreSQL (Neon)
  • Vite 6 + React 19 Admin & Manager Dashboard (~39.2K LOC TS, 51 pages, 154 components, 102 data hooks) built with Chakra UI v3 and Tailwind CSS v4
  • 40 Drizzle ORM database tables with 27 relation mappings, CUID2 keys, and Zod insert/update validation schemas
  • Better Auth session infrastructure: role-based access control (Admin, Manager, Rider, Customer) with a 40-action granular permission catalog
  • Stripe UAE Payment Engine: AED checkout sessions, payment intents, and raw-body webhook signature verification at /webhook
  • Interactive Documentation & Telemetry: Swagger UI at /api/docs, health check monitoring 4 dependencies in parallel, and audit activity logging

Technology Stack

React 19TypeScriptVite 6Node.jsExpress 4PostgreSQLDrizzle ORMSocket.IOBetter AuthStripeWATI APITwilioSendGridCloudinaryChakra UI v3Tailwind CSS v4TanStack QueryZustandFirebase FCM
Corporate CMS
Live

SustainPublicHealth.com

Public Health Consulting Platform & In-Context CMS — 212-Point Live Inline Editor, Applicant Funnel & Admin Back Office

A production full-stack corporate presence and content management system for Sustain Public Health (sustainpublichealth.com). Combines an interactive public web portal, an in-context click-to-edit CMS overlay enabling authenticated administrators to modify 212 distinct headlines, paragraphs, and images directly on the live page, and a 9-screen NextUI management back office. Powered by a clean 4-tier Express 4 architecture with 56 API endpoints, server-side token allowlist authentication with IP tracking, in-memory Cloudinary media streaming (images & PDF résumés), and Resend transactional email automation.

Key Features

  • Live-page inline content editor: 212 pencil-icon triggers across 5 namespaces (Home, Solutions, Careers, About, Services) for in-situ text and image updates
  • Instant paint caching: dual-tier content hydration combining default data constants, localStorage.cachedContent, and singleton MongoDB Content documents
  • Admin back-office dashboard: 9 management modules (Services, Contact Enquiries, Testimonials, Job Postings, Candidate Applications, Team, Partners, Newsletters, General Settings)
  • Server-side token allowlist auth: JWT authentication paired with MongoDB Token records and TTL indexes, featuring IP tracking and 24h / 60-day 'Remember Me' sessions
  • Career recruitment portal: dynamic job vacancy listings, skill tag filtering, and candidate application funnel with 5 MB PDF résumé uploads
  • In-memory Cloudinary media pipeline: memory-buffered Multer uploads with automatic previous-asset deletion on update/removal for images and PDF documents
  • Transactional email integration: Resend API dispatching responsive HTML templates for contact inquiries and newsletter subscriptions, with Gmail fallback for password resets
  • Structured entity catalog: unpaginated public directory feeds paired with searchable, sortable, client-sliced NextUI data tables in the administrative dashboard
  • Rich text content authoring: Draft.js and react-draft-wysiwyg editors embedded within management drawers for HTML formatted service and career descriptions
  • Custom responsive design system: Tailwind CSS 3.4 extended with 11 custom viewport breakpoints (370px se to 2780px xxlxx) and public health brand palette (#0C2A3D navy, #16CA9F teal, #BAFF66 lime)

Deliverables

  • Express 4.21 REST API (sustain-be): 56 endpoints across 12 feature routers following a strict 4-layer architecture (routes → controllers → services → models)
  • React 18.3 SPA (sustain-app-fe): powered by Vite 6, NextUI v2 component library, Tailwind CSS 3.4, React Router 7, and Redux + Thunk state management
  • 13 Mongoose database schemas: User, Token (TTL-indexed), Service, Testimonial, Team, Powered, Contact, Job, ApplyJob, Newsletter, Setting, Image, and Content singleton
  • Modal-driven inline CMS engine: unified ModalContext and ContentModal walking dot-path keys into Redux state with atomic singleton persistence
  • Client application suite: full drawer-based CRUD workflows, SweetAlert2 deletion confirmation gates, and toast notifications via react-toastify
  • Automated documentation: Swagger UI integration at /api-docs generated via swagger-autogen

Technology Stack

React 18Vite 6Node.jsExpress 4MongoDBMongoose 8NextUI v2ReduxRedux ThunkTailwind CSSCloudinaryResendDraft.jsFramer MotionSwiperSwagger
Construction Tech SaaS
Live

Planflo.io

Construction Project & Schedule Management Platform — 3-Step Wizard, Gantt Engine, Daily POD Field Reports & Multi-Role Operations

An enterprise-scale construction project management and field operations platform (~86,100 LOC across React 19 and Express 5, 35 PostgreSQL tables) built for general contractors, project managers, foremen, and trade subcontractors. Unifies 3-step transactional schedule planning (work days, tasks, manpower grids, material/equipment requirements), interactive Gantt charts (Kibo Gantt with drag-and-drop task reordering), daily field reporting (Plan of the Day - POD with PDFKit generation and production tracking), cost-code budget hour ledgers, issue tracking, real-time Socket.IO collaboration, and Stripe multi-tier subscription billing.

Key Features

  • 3-step transactional schedule builder: constructs schedules, task breakdowns, weekly manpower allocations, and daily equipment matrices in a single ACID transaction with template & draft recovery
  • Interactive Gantt scheduling engine: Kibo Gantt chart integration with @dnd-kit drag-and-drop task ordering, date resizing confirmations, and delay tracking
  • Plan of the Day (POD) field reporting: 5-section daily jobsite logs (crew size, work scope, tools, trade coordination, delay constraints) with repeatable production tracking tables
  • Automated PDFKit document generation: server-side rendering of comprehensive POD field reports with production metrics and dynamic pagination
  • Cost-code budget & hour ledger: tracks budget, change order, used, and remaining labor hours per cost code with approval workflow rollups (additional_info)
  • Multi-tenant role-based access control: 5 distinct roles (Platform Admin, Company Admin, Project Manager, Field Personnel, Subcontractor) with 14-resource permission matrices
  • Real-time collaboration & notifications: Socket.IO per-user rooms delivering live activity-driven notifications across 26 enumerated alert types
  • Enterprise identity & 2FA: Better-Auth suite with TOTP authenticator, Brevo SMS/email OTP verification, backup code recovery, and admin impersonation
  • Overall schedule document center: Cloudinary-backed ingestion for master Primavera/MS Project schedules (PDF, XLSX, CSV) with FortuneSheet in-browser previews
  • AI construction copilot: GPT-4o assistant supporting multi-turn conversational project workspaces, image inspections, and automated schedule generation directives

Deliverables

  • Express 5.1 REST & Real-time Backend (plan-flow-be): ~21.7K LOC TypeScript, 100 modular controllers, 22 route groups, and OpenAPI Swagger documentation at /api/docs
  • React 19 SPA (plan-flow-fe): ~64.4K LOC TypeScript, 37 pages, 187 components, 95 data hooks, and 6 Zustand stores built on Vite 6 and Tailwind CSS v4
  • 35 Drizzle ORM PostgreSQL database tables: relations, drizzle-zod validation schemas, CUID2 keys, and Postgres-backed rate limiting (rate-limiter-flexible)
  • Stripe subscription infrastructure: tiered seat-based pricing, monthly/yearly billing cycles, checkout redirects, customer portal, and raw-body webhook verification
  • Brevo omnichannel communication pipeline: transactional email dispatch (signups, team invitations, schedule approvals) and SMS OTP delivery
  • Cloudinary media pipeline: authenticated file storage for company branding, project media, issue photos, and multi-format master schedule archives

Technology Stack

React 19TypeScriptVite 6Express 5PostgreSQLDrizzle ORMSocket.IOBetter AuthStripeOpenAI GPT-4oTailwind CSS v4Radix UITanStack Query 5ZustandPDFKitBrevoCloudinary
Client Stories

Testimonials Wall

Real feedback from real clients who trusted me with their projects

Featured Review
Anas is great! He is very skillful and fast learner, just what you need in a developer.
5.0
MS
javier and ezagui
CEO at You Calendy

Client Testimonials

Honest feedback from clients I've had the pleasure to work with

5.0
"Anas produced some really amazing work on the backend. He demonstrated his proficiency and efficiency by using Node.js and Javascript to successfully import a very large dataset into a MySQL database."
AB
Carlos Startups
CEO
Finance Management
5.0
"It's been great to work with him! Fast, active and hardworking! Anas architected checkersvip.com from ground up with great attention to detail and great design. He is a great team player and a great developer."
MR
Nick Bov
CEO
Sustain Public Health
5.0
"We had a fantastic experience working with him on a recent project. He consistently delivered high-quality work, showed exceptional attention to detail, and communicated effectively throughout the process."
ED
Freeland
CEO
Plan Flo
Professional Credentials

Certifications

Professional certifications and credentials that validate my expertise in modern technologies and development practices.

ned logo
Verified

Mern Stack Developer

Provider:SMIT
Platform:SMIT
Issued:January 2024

Skills Validated

React / React NativeNode.jsMongoDBSql
ned logo
Verified

Sofware Engineer

Provider:NED Academy
Platform:NED Academy
Issued:January 2023

Skills Validated

PythonDatabaseOOpsPHPDSA
ned logo
Verified

Full Stack Developer

Provider:AL-Fateem Academy®
Platform:AL-Fateem Academy®
Issued:January 2021

Skills Validated

PHP Laravel PSD to WordpressFull-Stack Development
3 Professional Certifications
Verified by Industry Leaders
Contact

Let's Work Together

Ready to bring your ideas to life? I'm always excited to work on interesting projects and collaborate with amazing people. Let's create something extraordinary together.

Or reach out directly: