Alhamdulillah for showcasing the deployment of my Bachelor Project at the German University in Cairo: an Adaptive Computational Thinking Education Platform powered by Machine Learning.
The core objective was to engineer a platform that doesn't just serve educational content, but adapts to how a student learns and performs in real-time. To achieve this, I bridged ML with a containerized full-stack architecture.
Here is a technical breakdown of the system:
Core ML Capabilities
* Dynamic Learning Style Adaptation: Engineered Bayesian Networks utilizing pgmpy to continuously infer and update a student's preference between verbal and visual learning.
* Adaptive Exercise Difficulty: Implemented a Bayesian model that dynamically serves easy, medium, or hard exercises based on real-time solving time taken.
* Struggling Detection: Integrated an LSTM model that monitors coding attempts to provide a guide when a student is supposedly detected to be struggling.
System Architecture
* Node.js Orchestrator: Serves as the central hub for business logic, database operations, secure user authentication.
* Python FastAPI Server: Dedicated to hosting the ML services and managing secure, isolated code execution environments.
* React Client: Provides a clean, interactive UI for lectures and active coding exercises.
Cloud & DevOps Infrastructure
* Azure Container Registry (ACR): Acts as the centralized hub for the deployment pipeline, securely managing the Docker images for both backend services.
* Azure Container Apps: Hosts the Node.js orchestrator as a dedicated single instance.
* DigitalOcean Droplets: Hosts the FastAPI server, specifically utilizing a Docker-out-of-Docker architecture to safely spawn and isolate containers strictly for executing user-submitted code.
#SoftwareEngineering (https://www.linkedin.com/search/results/all/?keywords=%23softwareengineering&origin=HASH_TAG_FROM_FEED) #MachineLearning (https://www.linkedin.com/search/results/all/?keywords=%23machinelearning&origin=HASH_TAG_FROM_FEED) #FullStack (https://www.linkedin.com/search/results/all/?keywords=%23fullstack&origin=HASH_TAG_FROM_FEED) #DevOps (https://www.linkedin.com/search/results/all/?keywords=%23devops&origin=HASH_TAG_FROM_FEED) #React (https://www.linkedin.com/search/results/all/?keywords=%23react&origin=HASH_TAG_FROM_FEED) #Nodejs (https://www.linkedin.com/search/results/all/?keywords=%23nodejs&origin=HASH_TAG_FROM_FEED) #Python (https://www.linkedin.com/search/results/all/?keywords=%23python&origin=HASH_TAG_FROM_FEED) #FastAPI
(https://www.linkedin.com/search/results/all/?keywords=%23fastapi&origin=HASH_TAG_FROM_FEED)#SystemArchitecture (https://www.linkedin.com/search/results/all/?keywords=%23systemarchitecture&origin=HASH_TAG_FROM_FEED) #GermanUniversityInCairo
(https://www.linkedin.com/search/results/all/?keywords=%23germanuniversityincairo&origin=HASH_TAG_FROM_FEED)#GUC (https://www.linkedin.com/search/results/all/?keywords=%23guc&origin=HASH_TAG_FROM_FEED)
0
5
Pizza Delivery Co.
React Router (Data API): Implemented the createBrowserRouter using Loaders and Actions. This shifts data fetching to the routing layer, eliminating fetch-on-render waterfalls and layout jank.
Redux: Managed Global UI state and persistent data using Redux, ensuring a single source of truth and predictable state transitions.
Clean Architecture: Combined the power of Router Loaders for initial data fetching with Redux for long-term state management, creating a seamless and snappy user experience.
1
73
Taking Next.js to the Edge: Deploying "The Wild Oasis" on Cloudflare
A booking application built with Next.js 15, and deployed entirely on Cloudflare Pages.
Moving away from traditional Node.js environments to the Cloudflare Edge presented some fascinating architectural challenges that pushed my engineering skills to the next level:
Edge Runtime Optimization: Leveraging nodejs_compat to run heavy server-side logic on V8 isolates for near-zero latency.
Advanced UX: Implementing useTransition hook along an optimistic update to make an instant, fluid user experience.
0
76
• Engineered an end-to-end Explainable AI (XAI) application for retinal scan classification utilizing transfer learning on a fine-tuned ResNet50 architecture.
• Implemented Score-CAM techniques to generate visual heatmaps, ensuring AI diagnostic predictions were interpretable and transparent for medical use cases.
• Developed a server using Python and Flask to serve machine learning inference, supported by a PostgreSQL database for reliable data management.
• Built a responsive, type-safe user interface utilizing React, TypeScript, and React Query for highly efficient server-state management
0
112
• Developed a feature-rich, data-intensive Single Page Application (SPA) to solidify advanced React component architecture and modern state management techniques. • Engineered a highly responsive frontend by leveraging React Query to handle complex data fetching, caching, and synchronization, effectively separating server state from UI state. • Implemented advanced React patterns, including Higher-Order Components (HOCs) and Render Props, to build highly modular, reusable, and maintainable UI components. • Built a sophisticated user interface featuring dynamic table pagination, a fully functional dark mode toggle, and responsive layouts.
0
122
• Engineered a containerized (Docker) Next.js/Node.js media showcasing application enforcing strict single-session-per-device authentication using JWTs and a Redis cache.
• Resolved complex client-side race conditions during rapid user interactions by implementing a custom mutex lock for predictable state updates and seamless Optimistic UI rendering.
• Engineered thread-safe, idempotent API routes to eliminate backend check-then-act race conditions, utilizing atomic Mongoose operators ($addToSet, $pull) to maintain strict database integrity under high-frequency traffic.
• Streamlined backend data fetching and API response times by aggressively leveraging Mongoose's .lean() function to strip instantiation overhead from MongoDB documents. Plus, using atomic operations to prevent database inconsistency.