Projects

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

Prototypes & Case Studies APIs & Applications Data Science & ML SVG & Animation

Prototypes & Case Studies

RunVenture - Fitness App Repository Design & Dev Process Live 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.

  • 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

Learning Platform (Framer Prototype) Repository Live 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.

  • 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.

  • 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.

  • 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.

  • 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) Repository Live 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).

  • 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 + 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

FancyAlt - Image Analysis API Repository API Docs Live Demo

FancyAlt is an AI-powered image analysis API that generates accessible alt-text, creative stories, and performs content moderation using uploaded images or public image URLs. It integrates Azure AI Vision and OpenAI, with a modern, mobile-friendly front-end and Swagger-powered documentation.

  • Image Analysis: Supports both binary file uploads and public image URLs for processing.
  • Alt-Text and Stories: Uses Azure Vision for short alt-text and OpenAI to generate 2–3 sentence stories.
  • Content Moderation: Filters adult, racy, and gory content before further processing.
  • Interactive API Docs: Built using Swagger UI with custom styling and theming.
  • Modern UI: Bootstrap 5 front-end with dark mode toggle and mobile responsiveness.
  • Security: Rate limiting, input sanitization, Helmet headers, CORS, and strict upload validation.
  • Error Handling: Centralized custom error handler with structured responses and standard HTTP codes.
  • Maintenance: Daily cron job cleans up uploads; modular middleware for validation and error handling.
Keywords: Web Application API Node.js Express Azure AI OpenAI Swagger

Fetch Me a Movie - Movie Search Repository Live Demo

Fetch Me a Movie is a responsive, accessible React app that allows users to search movies by title and view detailed information. The app is powered by the OMDb API.

  • OMDb Integration: Real-time movie search with debounced input, error handling, and fallback mock data.
  • Movie Details: Displays poster, director, cast, genre, runtime, plot, and an IMDb link.
  • Responsive: Optimized for use on mobile, tablet, and desktop.
  • Design and UX: Token-based brand theme and animated gradient borders.
  • Typography & Layout: Manrope font with larger base size for readability.
  • Accessibility: ARIA labels, keyboard-friendly results, and live feedback for screen readers.
Keywords: React.js OMDb API Accessibility Design System API Integration

South Carolina Fire Dashboard Repository Live Demo

A real-time fire monitoring app for South Carolina using satellite data from NASA FIRMS. Visualizes active fires on an interactive map with automated backend updates.

  • NASA FIRMS Integration: Fetches and processes fire detections via VIIRS instruments aboard the Suomi NPP and NOAA-20 satellites.
  • Interactive Mapping: Leaflet-based map with markers that show fire intensity (FRP), brightness, date/time, and coordinates for each detection.
  • Backend Automation: Express.js API refreshed daily by a cron job and prunes data older than ~72h.
  • Database: Supabase (PostgreSQL) stores a rolling 48-hour window of fire detections
  • Performance & Indexing: Leveraged Postgres indexing for fast time-range and geospatial queries.
  • Deployment: Hosted on Vercel (frontend + backend).
Keywords: React.js Node.js Express Leaflet.js Geospatial

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.

  • 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 Repository Live 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.

  • 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 Repository Live 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.

  • 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

Data Science & ML

Asteroid Data Analysis and Classification Repository Kaggle 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:

  • 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 Repository Kaggle 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:

  • 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

Animated SVG Christmas Tree Repository Live Demo

Spreading Christmas cheer all throughout the year!

  • SVG Graphics: Created a visually appealing Christmas tree using scalable vector graphics (SVG).
  • CSS Animations: Added animated Christmas lights using CSS keyframe animations for a dynamic effect.
  • Responsive Design: Ensured the SVG tree is responsive on different screen sizes and devices.
Keywords: SVG CSS Animation