# Muhammad Hassan Ali - Portfolio & Knowledge Base URL: https://mhasali.com Email: mhasali@proton.me GitHub: https://github.com/mhasali LinkedIn: https://www.linkedin.com/in/mhasali ## Summary Senior Full Stack & WebGL Game Developer based in Lahore, Pakistan. --- ## Corporate Highlights * Built and successfully launched 10+ complete web applications for global clients from scratch. * Created a real-time system that lets multiple users interact instantly while cutting web data usage by 40%. * Sped up website loading times significantly by making 3D graphics files 60% smaller. * Cleaned up large codebases to reduce code duplication by 35%, making it much easier for teams to maintain. --- ## Personal Statement ### Background My programming journey began in 2014 during my ICS studies when I built a simple Snake game in C++. That early spark of curiosity completely changed my path and turned a fun hobby into a deep passion for software engineering. Over the past 4+ years of professional experience, I have focused on building reliable applications for international clients and corporate software firms. ### Objective I am deeply passionate about building the foundations of impactful products. --- ## Technical Stack & Skills * **Languages:** TypeScript, JavaScript * **Frontend:** React, Next, Vue, Nuxt * **Backend:** Node, Express, Fastify, NestJS * **Multiplayer:** Colyseus, Photon * **3D & 2D WebGL Engines:** Three, PlayCanvas, Cocos Creator, Phaser, WebGL * **Databases:** MongoDB, Firebase, PostgreSQL, Supabase ### Core Skill Links * JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript * TypeScript: https://www.typescriptlang.org/ * Node: https://nodejs.org/ * Next: https://nextjs.org/ * React: https://react.dev/ * Vue: https://vuejs.org/ * PlayCanvas: https://playcanvas.com/ * Three: https://threejs.org/ * Cocos Creator: https://www.cocos.com/ * Phaser: https://phaser.io/ * MongoDB: https://www.mongodb.com/ * Firebase: https://firebase.google.com/ * Colyseus: https://colyseus.io/ * Photon: https://www.photonengine.com/ --- ## Professional Experience ### Independent Freelancer | Senior Full Stack & 3D WebGL Developer *From May 2025 | Lahore, Pakistan* * Built 3D product tools (windows, lights, rings) and added them smoothly into web pages. * Integrate 3D configurators into existing websites and web applications. * Developed backend services and REST APIs. ### ThreeDee | Lead Software Developer *June 2024 - May 2025 | Remote (Lahore)* * **Languages & Tools:** JavaScript, TypeScript, React, Next, Node, Three, Phaser * Lead the design and development of core game, configurator and applications. * Managed a shared codebase that powered Telegram games, web dashboards, and backend services. * Programmed pipelines and optimized performance. ### Virtual Days | Senior Software Developer *Dec 2022 - May 2024 | Remote (Sweden)* * **Languages & Tools:** JavaScript, TypeScript, React, PlayCanvas, Colyseus * Lead developement of new 3D features and interactive tools for the platform. * Integrate 3D enviourment in the offical site. * Build new featues and maintain existing features for the frontend of a virtual event platform used by global clients. ### Geniteam Solutions | undefined *May 2021 - Nov 2022 | Lahore, Pakistan* * **Languages & Tools:** JavaScript, TypeScript, PlayCanvas, Phaser, Cocos Creator, WebGL, React, Next, Node, Express, Colyseus, Photon * Build and maintained 2D and 3D games. * Designed full stack admin dashboards and data tools. * Added new features and optimized existing games and sites. * Built real time multiplayer for 2D and 3D games. * Created product configurators for multiple products. ### Independent Freelancer | Freelance Software Developer *Sep 2019 - Aug 2020 | Lahore, Pakistan* * Delivered full stack web applications for clients. * Maintained websites for clients. * Fixed bugs and added new features to existing websites. ### Fauji Fertilizer Company | Web Developer Intern *Jul 2019 - Aug 2019 | Sadiqabad, Pakistan* * **Languages & Tools:** JavaScript, React, Vue * Built frontend with React and Vue. * Integrated APIs and backend services to display data on the web. --- ## Featured Projects ### interactive 2D/3D Product Configurator A web-based 3D product configurator that allows users to customize windows, rings, and lighting setups in real-time with hardware-accelerated WebGL rendering. Built for enterprise clients to showcase their products interactively. * **Languages:** TypeScript, JavaScript * **Tools:** Engine: Three.js, WebGL, Frontend: React.js, Next.js, Backend: Node.js, Express.js, 3D Assets: Blender, GLTF Pipeline * Real-time 3D rendering with smooth 60 FPS performance * Customizable product options with live price updates * Responsive design optimized for desktop and mobile devices * Asset streaming optimization reduced load times by 60% ### Corporate Training Simulation Platform A comprehensive business training platform featuring multiple interactive games designed to develop team collaboration, strategic thinking, and decision-making skills for corporate leadership programs. * **Languages:** TypeScript, JavaScript * **Tools:** Engine: PlayCanvas, Phaser, Cocos Creator, Frontend: React.js, Next.js, Backend: Node.js, Express.js, Database: Firebase, MongoDB, Networking: Colyseus, Photon * Multiplayer game environments with real-time synchronization * Live administrative dashboards for monitoring team performance * Comprehensive analytics and reporting for management * Scalable architecture supporting 100+ concurrent users ### 3D Virtual Museum Experience An immersive 3D virtual museum built for a major corporate client, featuring interactive exhibits, custom avatars, and real-time multiplayer navigation. Designed to showcase cultural heritage in an engaging digital format. * **Languages:** JavaScript, TypeScript * **Tools:** Engine: PlayCanvas, Three.js, Frontend: React.js, Backend: Node.js, Networking: Colyseus * Fully navigable 3D environment with interactive exhibits * Custom avatar system with expression controls * Real-time multiplayer with voice chat support * Optimized asset loading for smooth performance ### Enterprise Admin Dashboard Suite A collection of 10+ administrative dashboards built for multinational corporations to monitor employee performance, training progress, and generate detailed analytical reports across multiple departments. * **Languages:** TypeScript, JavaScript * **Tools:** Frontend: React.js, Next.js, Chart.js, D3.js, Backend: Node.js, Express.js, Next.js API Routes, Database: MongoDB, Firebase, PostgreSQL, Real-time: Socket.io, WebSockets * Real-time data visualization with interactive charts * Role-based access control and permissions * Export functionality for PDF and Excel reports * Responsive design for cross-device compatibility ### Telegram Mini-Game Framework A lightweight game framework designed for Telegram mini-games, featuring fast loading, minimal bundle size, and seamless integration with Telegram's gaming platform. * **Languages:** JavaScript, TypeScript * **Tools:** Engine: Phaser, PixiJS, Frontend: React.js, HTML5 Canvas, Backend: Node.js, Cloud Functions * Ultra-lightweight games under 2MB bundle size * Fast loading optimized for mobile networks * Telegram Web App API integration * Score tracking and leaderboard systems --- ## Project Categories ### interactive 2D/3D Product Configurator A web-based 3D product configurator that allows users to customize windows, rings, and lighting setups in real-time with hardware-accelerated WebGL rendering. Built for enterprise clients to showcase their products interactively. * **Tools:** Engine: Three.js, WebGL, Frontend: React.js, Next.js, Backend: Node.js, Express.js, 3D Assets: Blender, GLTF Pipeline * Real-time 3D rendering with smooth 60 FPS performance * Customizable product options with live price updates * Responsive design optimized for desktop and mobile devices * Asset streaming optimization reduced load times by 60% ### Corporate Training Simulation Platform A comprehensive business training platform featuring multiple interactive games designed to develop team collaboration, strategic thinking, and decision-making skills for corporate leadership programs. * **Tools:** Engine: PlayCanvas, Phaser, Cocos Creator, Frontend: React.js, Next.js, Backend: Node.js, Express.js, Database: Firebase, MongoDB, Networking: Colyseus, Photon * Multiplayer game environments with real-time synchronization * Live administrative dashboards for monitoring team performance * Comprehensive analytics and reporting for management * Scalable architecture supporting 100+ concurrent users ### 3D Virtual Museum Experience An immersive 3D virtual museum built for a major corporate client, featuring interactive exhibits, custom avatars, and real-time multiplayer navigation. Designed to showcase cultural heritage in an engaging digital format. * **Tools:** Engine: PlayCanvas, Three.js, Frontend: React.js, Backend: Node.js, Networking: Colyseus * Fully navigable 3D environment with interactive exhibits * Custom avatar system with expression controls * Real-time multiplayer with voice chat support * Optimized asset loading for smooth performance ### Enterprise Admin Dashboard Suite A collection of 10+ administrative dashboards built for multinational corporations to monitor employee performance, training progress, and generate detailed analytical reports across multiple departments. * **Tools:** Frontend: React.js, Next.js, Chart.js, D3.js, Backend: Node.js, Express.js, Next.js API Routes, Database: MongoDB, Firebase, PostgreSQL, Real-time: Socket.io, WebSockets * Real-time data visualization with interactive charts * Role-based access control and permissions * Export functionality for PDF and Excel reports * Responsive design for cross-device compatibility ### Telegram Mini-Game Framework A lightweight game framework designed for Telegram mini-games, featuring fast loading, minimal bundle size, and seamless integration with Telegram's gaming platform. * **Tools:** Engine: Phaser, PixiJS, Frontend: React.js, HTML5 Canvas, Backend: Node.js, Cloud Functions * Ultra-lightweight games under 2MB bundle size * Fast loading optimized for mobile networks * Telegram Web App API integration * Score tracking and leaderboard systems --- ## Education ### Bachelor of Science (Computer Science) *National University of Computer and Emerging Sciences (FAST NUCES)* *2016 - 2020* ### Intermediate in Computer Science *Cadet College Choa Saiden Shah Chakwal (CCCSS)* *2014 - 2016* ### Matric (Computer Science) *Sheikh Zayed Higher Secondary School* *2012 - 2014* --- ## FAQ & Knowledge Base ### Who is Muhammad Hassan Ali? Muhammad Hassan Ali is a Senior Software Developer from Lahore, Pakistan, with 4+ years of experience specializing in full stack and webgl development. ### Where is Muhammad Hassan Ali based? Hassan works remotely from Lahore, Pakistan. I have also collaborated with teams in Europe and United States across global time zones. ### What unique edge does he bring to web development? He is a full stack developer with expertise in 2D and 3D graphics using Phaser, Three, and PlayCanvas. ### Is Muhammad Hassan Ali available for remote work? Yes, he is available for long term remote roles. He has experience of remote work across US and European time zones.