Projects using React in Sheikh Zayed CityProjects using React in Sheikh Zayed CityAlhamdulillah 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) Here's a polished project description for your Contra profile:
Project Title:
Baed Connect — AI-Powered Career Platform for People with Disabilities
Short tagline (shown under title):
Education for employment is accessible.
Full description:
Baed
Connect is an educational and job-matching platform designed to help
people with disabilities build real careers in content marketing — and
help employers build truly inclusive teams.
The
platform was initially prototyped using Lovable, then taken into full
source code ownership and extended with custom features, real AI
integration, and a production-grade codebase built in React +
TypeScript.
The core feature is the AI Career Match
— powered by Google Gemini. Candidates describe their background,
disability type, and accessibility needs. The AI analyzes their profile
against real job listings and courses on the platform and returns a
fully personalized career report including a job match with explanation,
recommended learning path, their strongest selling point as a
candidate, tailored resume tips, and interview preparation specific to
their background and matched role.
What the platform includes:
AI Career Match powered by Google Gemini AI
Learning Hub with 6 accessible content marketing courses
Job Matching board with remote-friendly, inclusive employer listings
Mentorship program for one-on-one career guidance
Employer-facing resources on disability inclusion and accessible content
Accessibility Resources covering visual, audio, motor, and cognitive needs
Built with: React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Google Gemini API, Vercel
Impact:
Baed Connect bridges the gap between talent and opportunity for people
with disabilities in the Arab region — creating pathways to meaningful,
remote-friendly employment in digital content and marketing. This isn't
charity. This is smart, inclusive business. Professional Frontend Developer Portfolio & Showroom
I designed and developed my personal portfolio website from scratch to serve as a live testament to my skills as a Frontend Developer. The core mission of this project was to merge modern aesthetic design with absolute technical excellence and peak web performance.
Key Technical Highlights:
Pixel-Perfect Performance: Meticulously optimized the codebase to achieve near-perfect scores (99-100%) on Google Lighthouse for Performance, SEO, Best Practices, and Accessibility.
Flawless UI/UX: Built a modern, sleek, and highly responsive user interface that adapts flawlessly across all device screens (Mobile, Tablet, and Desktop).
Clean Architecture: Implemented advanced JavaScript standards to ensure clean, maintainable, and scalable code.
Interactive Showcase: Features a dynamic section displaying live production-ready applications, proving my capability to deliver high-performance digital solutions. 
