Built a fully functional Model Context Protocol (MCP) server to demonstrate readiness for Durable’s AI infrastructure requirements.

• Core Tech: Implemented the official @modelcontextprotocol/sdk to expose real-time weather data as executable tools for LLM agents (Claude/Cursor).

• Type Safety: Enforced strict input/output validation using Zod and TypeScript, ensuring reliable tool-calling behavior for stochastic AI models.

• Architecture: Designed as a scalable CLI executable (bin entry) following the standardized MCP client-host architecture.

A comprehensive full-stack platform engineered with Next.js 15 and React 19. Unlike static portfolios, this application features a custom-built Admin CMS protected by NextAuth.js and bcrypt, allowing for secure, real-time content management.

I designed and engineered this full-stack platform entirely from scratch, bypassing templates to build a custom, high-performance solution.

Data is managed via Prisma ORM with a PostgreSQL database, ensuring full type safety from the database to the client. The UI is styled with the latest Tailwind CSS v4, utilizing the Typography plugin to render dynamic markdown content seamlessly.

It features a secure, self-built Admin CMS that allows for real-time management of projects and experience data without code changes. The system is architected with strict type safety and modern security standards.

Core Technologies:

• Framework: Next.js 15 (App Router) & React 19

• Language: TypeScript

• Styling: Tailwind CSS v4 & Typography

• Data Layer: Prisma ORM & PostgreSQL

• Security: NextAuth.js & Bcrypt

A robust MERN Stack assessment platform developed as a technical prototype for the British Columbia Institute of Technology (BCIT).

• Secure Authentication: Engineered a custom auth system using JWT (JSON Web Tokens) and bcrypt for password hashing, utilizing HTTP-only cookies for secure session management.

• Role-Based Access Control (RBAC): Implemented middleware to differentiate between 'Student' and 'Instructor' (Admin) roles, protecting sensitive routes and API endpoints.

• State Management: Integrated Redux Toolkit for centralized global state management, handling asynchronous user sessions and data fetching logic efficiently.

The Tech Stack

• Core Stack: MERN (MongoDB, Express.js, React 18, Node.js)

• State Management: Redux Toolkit & React-Redux

• Authentication: JWT (JSON Web Tokens) & HTTP-Only Cookies

• UI Framework: React Bootstrap

• DevOps: Docker & Concurrently

Features

• Role-Based Security: Admin accounts have exclusive access to grading dashboards, while students are restricted to submission views.

• Redux State Management: Uses slices and thunks to manage complex client-side data flows (unlike the Context API used in smaller projects).

• Secure Backend API: Express.js REST API with custom middleware for error handling and token verification.

• Containerization: Project is configured with Docker to ensure environment consistency across development and production.

A full-stack real estate marketplace application built with React and Firebase v9.

• Leveraged Firebase Authentication for secure user, OAuth (Google) sign-ins and profile management.

• Implemented Firestore for real-time data storage and Firebase Storage for handling property image uploads.

• Integrated Leaflet API to render interactive maps and geocode property addresses automatically.

• Utilized React Router 6 for protected routes, ensuring only authenticated users can edit or delete their listings.

Tech Stack

• Core: React 17

• Backend & Auth: Firebase v9 (Auth, Firestore Database, Storage)

• Mapping: Leaflet & React-Leaflet

• Routing: React Router 6

• UI Components: Swiper.js (for image sliders), React-Toastify (for alerts)

• SEO: React Helmet

A pixel-perfect replication of the Parallel Domain career page developed as a technical assessment.

• API Integration: Fetched live job data directly from the company's proprietary API to dynamically render available positions.

• Component Library: Utilized Material UI (MUI v5) to rapidly build a polished, accessible, and responsive interface that matched the provided design mockups.

• Dynamic Routing: Implemented React Router v6 to handle navigation and external redirection to the official Lever application forms.

The Tech Stack

• Core: React 17

• UI Library: Material UI (MUI) v5

• Data Fetching: Axios

• Routing: React Router v6

Features

• Live Data Fetching: Renders job lists dynamically from an external API endpoint.

• Material UI Design: Implements professional-grade UI components for a clean, consistent look.

• External Redirection: "Apply" buttons intelligently route users to the specific job application page on Lever.

• Responsive Layout: Adapts perfectly to mobile and desktop screens using MUI's grid system.

A responsive feedback collection interface built with React that prioritizes smooth user interactions.

• Dynamic Interactivity: Integrated Framer Motion to create fluid enter/exit animations for feedback items, enhancing the user experience.

• Global State Management: Utilized the React Context API to centrally manage application state, allowing for seamless adding, editing, and deleting of feedback across components.

• Real-time UX: Features instant rating updates and form validation without page reloads, demonstrating efficient client-side state manipulation.

The Tech Stack

• Core Framework: React 17

• Routing: React Router v6

• Animation: Framer Motion

• State Management: Context API

• Icons: React Icons

Features

• Smooth Animations: Feedback items fade in and out elegantly using Framer Motion.

• CRUD Operations: Users can add, edit, and delete reviews in real-time (client-side session).

• Live Statistics: Automatically calculates and displays the average rating and total review count.

• Form Validation: Prevents submission of incomplete reviews to ensure data quality.

A React-based application that interfaces with the GitHub REST API to search users and visualize their profiles.

• Implemented Context API and useReducer for global state management to handle search results, loading states, and alerts.

• Utilized Axios for asynchronous data fetching, handling dynamic routing to display individual user repositories and bios.

• Designed a responsive UI using Tailwind CSS and DaisyUI components.

Core Tech Stack

• React 17
• Tailwind CSS 3 & DaisyUI
• Axios & GitHub REST API
• React Router v6
• Context API & useReducer (Standard for this specific tutorial/project type)

A responsive movie database application built with React 18 that serves as a dynamic interface for the OMDB API.

• Data Architecture: Utilized Axios to handle asynchronous GET requests, enabling users to search for films by title or specific IMDb IDs.

• Modern Routing: Implemented React Router v6 to create a seamless, multi-page experience where each movie result links to a dedicated details view.

• Academic Initiative: Developed as a coursework project to demonstrate proficiency in consuming third-party REST APIs and managing complex JSON data structures.

Tech Stack

• Core Framework: React 18

• Data Fetching: Axios

• API Integration: OMDB API (Open Movie Database)

• Routing: React Router v6

• Styling: CSS3 / Responsive Design

Features

• Dual-Search Logic: Logic to handle queries for both loose text matches (Titles) and exact matches (IDs).

• REST API Consumption: Efficiently handles external data requests and parses JSON responses.

• Dynamic Routing: Programmatic navigation from search results to individual movie detail pages.

An interactive browser-based game built with JavaScript and jQuery to demonstrate core programming logic.

• Game Logic: Implements random number generation and conditional logic to provide real-time user feedback ('Too High/Low').

• DOM Manipulation: Utilizes jQuery to dynamically update the UI, track guess history, and reset the game state without page reloads.

• Visual Design: Features a custom-styled interface using pure CSS3, focusing on layout and user accessibility.

Tech Stack

• Core: HTML5 & CSS3

• Scripting: JavaScript (ES6+)

• Library: jQuery

• Concepts: DOM Manipulation & Game Logic

Features

• Input Validation: Checks if the user input is a valid number within the 1-100 range.

• Conditional Logic: Compares user input against a randomly generated integer to determine the game state.

• Dynamic UI: Uses jQuery selectors to inject HTML elements (previous guesses) onto the screen instantly.

• Event Handling: Manages click and keypress events to trigger game rounds.