Projects

A curated portfolio highlighting my work in design, development, and data science. Explore more on my GitHub.

Prototypes & Case Studies

6 projects

RunVenture - Fitness App

RepositoryDesign & Dev ProcessLive Demo

RunVenture is a lightweight, modern fitness tracking app inspired by MapMyRun.com. Built with React.js, it supports route planning, GPS run tracking, music playback, training plans, and social challenges, all powered by browser APIs, Google Maps, and Spotify.

Project highlights

  • Live Run Tracking: Real-time GPS, pace, distance, and calorie tracking with a visual route map.
  • Route Planning: Interactive map-based route builder with difficulty scores and preview.
  • Spotify Integration: In-app music player with playlist selection and URL loading.
  • Training Plans: Customizable weekly plans with editable fitness goals and progress graphs.
  • Social Challenges: Join, share, and track community running challenges with visual progress.
  • Post-Run Summaries: Stats overview, best-run recognition, and hydration tips after each session.
  • LocalStorage Authentication: Lightweight login system stores user data locally for testing purposes.
  • Responsive Design: Mobile-friendly interface tested on major desktop and mobile browsers.
Keywords: React.js Google Maps API Spotify API User-Centered Design

Datatropolis - Learning Platform (Framer Prototype)

RepositoryLive Demo

Datatropolis involved designing and developing a gamified learning platform prototype in Framer, using urban planning to teach data science concepts. Learners build their own city while progressing through modules, quizzes, and applied challenges.

Project highlights

  • Purpose of the Prototype:
    • Educational Modules: Structured lessons that guide users through key data science concepts.
    • Interactive Quizzes: Engaging quizzes to reinforce learning and assess user understanding.
    • Practical Challenges: Real-world tasks that allow users to apply their knowledge in practical settings.
  • Development Process:
    • Low-Fidelity Wireframes: Sketched initial wireframes to outline the basic structure and flow of the application.
    • High-Fidelity Prototyping with Framer: Transformed low-fidelity sketches into a detailed, high-fidelity prototype using Framer's advanced tools for interaction and animation.
    • User Testing and Usability Testing: Conducted user testing to validate the prototype, gathering valuable feedback and insights to enhance interactions and overall user experience.
Keywords: Wireframing Prototyping UX Design User Testing Framer

Apartment Rental Mobile App (Balsamiq Prototype)

Repository

This project involved designing and developing a collaborative Balsamiq prototype for Home Hunt, an apartment rental company mobile app.

Project highlights

  • Prototype Functionality:
    • Map Search for Apartments: Users search using an interactive map with pin-based navigation.
      • Task #1 (My Solo Task): Developed the map search feature with:
        • Search criteria (location, bedrooms, price range, etc.).
        • Interactive pins with previews of key details.
        • Switching between list and map views.
        • Modals with slideshows and contact information.
    • Apartment Details & 3D Walkthrough: Explore floor plans, galleries, and tours.
    • Report Issues & Maintenance Requests: Submit and track maintenance requests.
    • Roommate Support: Tools for shared living (chores, rent ledger, calendar).
  • Development Process:
    • Wireframe Sketches: Sketched key functionalities.
    • Base Layout: Established a unified mobile layout with global header and footer.
    • Interactive Elements: Added radio buttons, cards, and bottom navigation.
    • User Studies: Conducted usability tests for feedback.
    • Content-Fidelity Matrix: Balanced realism and feasibility.
    • Project Reflection: Identified strengths (intuitive flow) and improvements (color palette).
Keywords: Balsamiq Prototyping UX Design User Testing Collaborative

Themed Fashion E-Commerce (Slideware Prototype)

Repository

This project involved designing and developing a collaborative Halloween-themed fashion e-commerce prototype called Haunted Couture, built as a slideware prototype for rapid UX exploration.

Project highlights

  • Prototype Functionality:
    • Submit Pictures: Upload from device or take a webcam photo; navigate images via a gallery slider.
    • Search for Items: Keyword-based search (like "witch"), add items by size, update basket in real time.
    • Virtual Fitting Room: Apply basket items onto an uploaded image, toggle clothing on/off, save and name outfits.
    • Sharing & Social Media: Share styled looks with preview modals, enable ratings/comments, and generate sharable links for Email, X (Twitter), Instagram, and Meta.
      • Task #4 (My Solo Task): Developed the Sharing & Social Media Integration feature, which included:
        • Slideshow of saved outfits to select from (like "Hippie Look").
        • Customization via radio buttons to allow star ratings, comments, or both.
        • Previewing sharable pages in modal windows before publishing.
        • Generating a final sharable link with buttons for Email, X, Instagram, and Meta.
  • Development Process:
    • Storyboarding: Sketched task flows and concepts to shape navigation.
    • Slideware Prototype: Created clickable flows using presentation software.
    • Interactive Elements: Sliders, radio buttons, modals, action buttons, and comment/rating inputs.
    • User Studies: Conducted usability testing to identify pain points like unclear toggles and hidden navigation.
    • Content-Fidelity Matrix: Medium–high fidelity; cohesive branding, interactive flows, and realistic task scenarios.
    • Project Reflection: Strengths included social integration and progressive disclosure; improvements needed included moderation for comments, simpler toggles, and clearer action cues.
Keywords: Slideware Rapid Prototyping UX Design User Testing Collaborative

Themed Food Ordering (Slideware Prototype)

Repository

This project involved designing and developing a space-themed gourmet pizza ordering app called Cosmic Pizza, built as a slideware prototype for rapid UX exploration. The prototype reimagines food (pizza) ordering as a playful cosmic journey, while still maintaining clarity and usability.

Project highlights

  • Prototype Functionality:
    • Create Your Pizza: Customize size, crust, sauce, and toppings with a step-by-step builder.
    • Special Menu Items: Order limited-time themed pizzas, such as the Venus Veggie Delight.
    • Checkout & Confirmation: Review and adjust order details with pricing transparency.
    • Progress Indicator: Track order status with evolving mini pizza icons and refresh/exit options.
  • Development Process:
    • Sketching & Storyboarding: Created early sketches to define flows and theming.
    • Slideware Prototyping: Built interactive flows in presentation software (PowerPoint).
    • User Testing: Conducted tests with three participants to refine flow clarity and interactivity.
    • Iteration: Adjusted button sizing, added pricing and labels, and introduced a confirmation page.
    • Project Reflection: Identified improvements for clearer flows and stronger error handling.
Keywords: Slideware Rapid Prototyping UX Design User Testing

Compatibility App (Figma Prototype)

RepositoryLive Demo

This project involved designing and developing a collaborative compatibility app prototype called Celebrity Charm in Figma. The prototype explores matching, profile review, messaging (text & video), and playful compatibility activities (quizzes & games).

Project highlights

  • Prototype Functionality:
    • Basic Search: Enter preferences (age, hobbies, location) and view a list of potential matches.
    • Detail Review: Browse admirers, open profile pages, and choose to heart, discard, or save for later; view Mutual Sparks and suggested matches.
    • Communication: Messages hub with unread indicators; send text or video messages to matches.
    • Activities (Quizzes & Games): Explore compatibility through interactive quizzes and the Match Mosaic game; archive and revisit results.
      • Task #4 (My Solo Task): Built the Activities feature end-to-end:
        • Quizzes list with infinite scroll and a "Choose Quiz Randomly" floating action button.
        • Quiz flow for "Fitness Fanatic or Zen Seeker?" with results and compatible match slideshows.
        • Match Mosaic game with image selections (travel, food, hobby) and compatible match results.
        • Completed Activities archive to review past quizzes and games.
        • Design patterns used: generous borders, cards/collections, modals, bottom navigation, and escape hatches (back arrows).
  • Development Process:
    • Storyboarding & Wireframes: Sketched task flows to shape navigation and interactions.
    • High-Fidelity Prototyping: Built fully clickable flows in Figma with consistent branding and component reuse.
    • User Studies: In-person usability testing; insights led to clearer labels, better feedback cues, and consistent iconography.
    • Content-Fidelity Matrix: High interaction fidelity; very-high visual/editorial fidelity with cohesive theme and realistic content.
    • Project Reflection: Strengths included a cohesive theme, smooth task-linked animations, and engaging activities; improvements needed included clearer labels, consistent icon feedback, and richer notifications.
Keywords: Figma Prototyping UX Design User Testing Collaborative

APIs & Applications

8 projects

FancyAlt - AI Image Description API

Repository API Docs Live Demo

FancyAlt is an accessibility-focused web application and API that uses OpenAI to turn uploaded images and public image URLs into clear, structured results. Users can request concise alt text, detailed descriptions, social media descriptions, creative stories, visible-text extraction, or image moderation.

Project highlights

  • Mode-Specific Analysis: Generates only the result selected by the user, reducing unnecessary API processing and cost.
  • Multiple Result Types: Supports concise alt text, detailed visual descriptions, social media descriptions, short creative stories, and moderation-only checks.
  • Flexible Image Input: Accepts JPEG, PNG, and WEBP uploads up to 5 MB, as well as publicly accessible HTTP and HTTPS image URLs.
  • Visible-Text Extraction: Can return meaningful readable text from signs, labels, screenshots, and similar image content when requested.
  • Content Moderation: Checks every image with OpenAI Moderation before returning generated content.
  • Interactive API Documentation: Includes OpenAPI 3.0 documentation presented through a custom-styled Swagger UI.
  • Accessible Front End: Provides semantic HTML, keyboard-friendly controls, responsive layouts, visible focus states, and light and dark themes.
  • Security and Reliability: Uses Helmet, CORS, rate limiting, input sanitization, request validation, in-memory uploads, request IDs, and centralized error handling.
Keywords: Web Application REST API Node.js Express OpenAI Swagger OpenAPI

Into the Void - Missing Data Explorer

Repository Live Demo

Into the Void is an accessible, space-themed data-quality web application that analyzes missing values in CSV files. Users can upload a dataset to measure data completeness, identify incomplete columns, inspect column-level details, and visualize where gaps appear throughout the data.

Project highlights

  • CSV Analysis: Processes CSV files up to 10 MB and calculates missing-value totals, percentages, and overall dataset completeness.
  • Void Depth: Assigns a plain-language dataset status based on the overall percentage of missing values.
  • Event Horizon: Ranks columns by missing-value percentage so users can quickly identify the most incomplete fields.
  • Column Autopsy: Displays each column's data type, missing and present values, first missing row, and longest consecutive gap.
  • Missing Data Map: Provides a compact visual sample showing where missing values appear across rows and columns.
  • Accessible Interface: Includes semantic structure, keyboard-accessible controls, visible focus states, screen-reader descriptions, high-contrast styling, and reduced-motion support.
  • Privacy-Conscious Processing: Analyzes uploaded files in memory without requiring an account or intentionally saving the dataset.
  • Full-Stack Architecture: Uses React, TypeScript, and Vite for the frontend with a FastAPI and pandas backend.
Keywords: React TypeScript FastAPI Python pandas Data Quality Accessibility
Repository Live Demo

Fetch Me a Movie is a responsive and accessible React application for searching, exploring, saving, and choosing movies. It uses the OMDb API to retrieve movie data and stores saved selections locally, so no account is required.

Project highlights

  • Movie Search: Supports title search, exact-year filtering, paginated results, and shareable search URLs.
  • Movie Details: Displays posters, plot, cast, director, runtime, ratings, awards, box-office information, and IMDb links.
  • Movie Jar: Lets users save movies and randomly choose what to watch while avoiding repeat selections until every saved movie has had a turn.
  • Curated Suggestions: Offers themed recommendations such as comfort watches, romantic comedies, Disney movies, darker films, and recent favorites.
  • Reliability: Handles failed requests, invalid movie IDs, missing posters, unavailable API data, loading states, and page-not-found routes.
  • Accessibility: Uses semantic HTML, keyboard-accessible controls, visible focus states, screen-reader status messages, descriptive alt text, and reduced-motion support.
  • Responsive Design: Adapts search results, movie details, suggestions, and saved movies for desktop, tablet, and mobile screens.
Keywords: React OMDb API JavaScript

New York State Fires - Geospatial Data Dashboard

Repository Live Demo

A full-stack geospatial data project that ingests, filters, stores, and visualizes recent NASA FIRMS satellite thermal detections across New York State, excluding the five New York City boroughs.

Project highlights

  • Multi-Source Data Ingestion: Retrieves near-real-time VIIRS detection data from NASA FIRMS products associated with the Suomi NPP, NOAA-20, and NOAA-21 satellites.
  • ETL Pipeline: Parses and combines incoming satellite records, standardizes acquisition timestamps, applies Fire Radiative Power thresholds, and prepares the data for storage and analysis.
  • Geospatial Analysis: Uses Turf.js and GeoJSON boundaries to perform point-in-polygon analysis, retain detections within New York State, and exclude detections within New York City.
  • PostgreSQL Data Management: Stores processed detections in Supabase PostgreSQL and supports efficient time-range retrieval for a rolling 48-hour window.
  • Feature-Rich Detection Records: Preserves attributes including Fire Radiative Power, brightness, confidence, satellite, acquisition time, coordinates, and day or night status.
  • Visualization: Presents detection totals, recency, severity categories, and spatial patterns through an interactive Leaflet map and summary metrics.
  • Data Interpretation: Clearly distinguishes satellite-observed thermal anomalies from confirmed wildfires and communicates limitations such as cloud cover, duplicate observations, and non-wildfire heat sources.
Keywords: Geospatial REST API React Node.js PostgreSQL ETL

Real-time Chat - WebSockets

Repository

A basic real-time chat app built with Node.js, Express.js, and Socket.IO. Features include nicknames, typing indicators, join/leave messages, and a live user list. Ideal for learning WebSockets or extending into a full-featured chat platform.

Project highlights

  • Real-Time Messaging: Instant updates for all connected users via WebSockets.
  • User Experience: Join with nickname, view typing status, and see active users.
  • Responsive UI: Lightweight and adaptable to all device sizes.
  • Learning Tool: Foundation for adding private messaging, authentication, or chatrooms.
Keywords: Node.js Express Socket.IO WebSockets Real-Time

Celestial Gatherings - Event Management

RepositoryLive Demo

A space-themed events management platform built with Node.js, Express, EJS, and MongoDB Atlas. It follows the MVC pattern: Models (Mongoose) handle data and rules, Controllers manage request/response logic, and EJS Views render the UI.

Project highlights

  • Core Features:
    • Event Management (CRUD): Create, edit, view, and delete events with title, category, dates, location, description, and image.
    • RSVPs: Logged-in users can RSVP Yes/No/Maybe; hosts can’t RSVP to their own events.
  • Front-end:
    • Responsive UI: Role-aware header/nav; looks great on desktop, tablet, and mobile.
    • Design System: Shared CSS tokens (color/type/radius/shadows) + matching "pill" active states.
    • Accessibility (WCAG AA): Visible focus rings, skip link, reduced-motion support, solid contrast.
    • Feedback & Errors: Flash messages and friendly 400/401/404/500 views.
  • Back-end:
    • Session-based Auth & Profiles: Express sessions (Mongo store), profile with hosted events + RSVPs.
    • Validation & Security: express-validator, Helmet, rate limiting, bcrypt-hashed passwords.
    • Image Uploads: Multer → Cloudinary with a placeholder fallback.
    • Performance & Logs: HTTP compression and request logging (morgan).
Keywords: Node.js Express MongoDB MVC Session Auth Accessibility

Some Inspirational Quotes - Quote Generator

RepositoryLive Demo

A lightweight, interactive web app that displays random inspirational quotes on beautiful background images. Users can cycle quotes, copy them, or share them directly.

Project highlights

  • Quotes & Backgrounds: Non-repeating shuffle ensures variety, with smooth preloading of images.
  • Interactivity: New quote button, copy to clipboard, Web Share API, and "N" keyboard shortcut.
  • UI/UX: Glassmorphic quote card, responsive layout, and consistent visual hierarchy.
  • Accessibility: ARIA labels, skip link, focus styles, reduced-motion support, and semantic structure.
  • SEO: Meta tags, social cards, and structured data for better discoverability.
Keywords: Web Application JavaScript HTML CSS Accessibility SEO

Pine Companion - Maine Travel App

Repository Live Demo

A responsive calm travel web app that helps solo travelers find quiet, cozy, and low-pressure destinations throughout Maine.

Project highlights

  • Calm Destination Discovery: Browse real parks, coastlines, bookshops, gardens, and scenic stops suited to slower travel.
  • Search and Filters: Find places by name, region, activity, atmosphere, or parking access.
  • Interactive Map: Explore destination locations using Leaflet and OpenStreetMap.
  • Saved Places: Store favorite destinations locally using browser localStorage.
  • Live Weather: View current Portland, Maine weather through the Open-Meteo API.
  • Responsive Design: Accessible, mobile-friendly interface inspired by Maine’s coast and forests.
Keywords: JavaScript Leaflet OpenStreetMap Open-Meteo API Responsive Design Accessibility

Data Science & ML

2 projects

Asteroid Data Analysis and Classification

RepositoryKaggle Notebook

A comprehensive analysis and classification of asteroid data using machine learning techniques. The dataset was sourced from the NASA JPL Small-Body Database. Key aspects of the project include:

Project highlights

  • Data Preprocessing: Handling missing values, encoding categorical variables, and feature selection for model training.
  • Exploratory Data Analysis: Visualizations including bar charts, scatter plots, and word clouds to understand data distribution and relationships.
  • Feature Engineering: Identified key features, such as perihelion distance (q), Earth Minimum Orbit Intersection Distance (moid_ld), and diameter, to predict Near-Earth Object (NEO) status.
  • Machine Learning Models: Implemented Random Forest for feature importance and a neural network using PyTorch for classification.
  • Model Evaluation: Achieved an accuracy of 99.95% on test data using neural network model with batch normalization and dropout for regularization.
  • Visualization Techniques: Used Seaborn and Matplotlib for creating informative visualizations that highlight key insights from the data.
  • Deployment and Sharing: The Jupyter Notebook and results are shared on Kaggle for reproducibility and further exploration by the data science community.
Keywords: Data Science Machine Learning Data Visualization Python PyTorch

Predicting the Purpose of a Satellite

RepositoryKaggle Notebook

Analysis of a comprehensive dataset of satellites currently orbiting Earth. The data includes details on country of origin, purpose, and operational specifics. Key aspects of the project include:

Project highlights

  • Data Cleaning and Preprocessing: Performed extensive data cleaning, including handling missing values, encoding categorical variables, and standardizing numerical features.
  • Feature Engineering: Identified key features such as 'Users', 'Class of Orbit', 'Type of Orbit', and 'Power (watts)' for predicting the purpose of satellites.
  • Machine Learning Models: Implemented RandomForest and LightGBM classifiers to predict satellite purposes with high accuracy, achieving a 97.62% accuracy rate on the test set.
  • Visualization and Analysis: Created visualizations to showcase feature importance and the distribution of satellite purposes, providing insights into the operational characteristics of satellites.
  • Model Deployment: Saved and deployed the trained models and preprocessing pipelines for future predictions and analysis.
Keywords: Data Science Machine Learning Data Visualization Python LightGBM

SVG & Animation

1 project

Tree Studio: SVG Library

Repository Live Demo

A responsive library of animated themed SVG trees created to spread holiday cheer all throughout the year.

Project highlights

  • 22 SVG Designs: Includes holiday, seasonal, cultural, and playful tree themes with unique decorations, colors, toppers, and animations.
  • Portable SVG Code: Lets users preview, inspect, and copy self-contained SVG markup for use in their own websites.
  • Responsive and Accessible: Supports different screen sizes, descriptive SVG labels, keyboard-friendly controls, and reduced-motion preferences.
Keywords: SVG JavaScript CSS Animation Accessibility Responsive Design