tropvache

P // 0RTFO71O 2026

Modern Web Development Case Studies

I excel at integrating complex systems and delivering impactful solutions through the efficient use of diverse technologies. Here I present work to showcase my skills in user experience, frontend and backend development, data management, and design.

llamalo

Chat interface for local Ollama llms, on Github

react, vite, tailwindcss

chat application ready to type

This app enables users to interact with large language models (LLMs) through Ollama, an easy way to run models locally on your machine. Send prompts in organised conversations and receive responses, chosing which model to use per conversation or per prompt. Conversations are stored in the browser using local storage.

Features

  • Integration with Ollama API: Integration with the Ollama API facilitates communication between the application and selected models, enabling real-time interaction and data exchange without complex network configurations. The application acts as a user interface for selecting, loading, and interacting with pre-downloaded models available from Ollama.
  • Conversation History & Persistence: The application maintains a persistent history of conversations using localStorage, allowing users to return to previous conversations.
  • Simple, Prompt Input: The application provides a straightforward way to input prompts to send to a chosen model.
  • Model Selection: Select from models available through Ollama, customising their prompt parameters on a conversation or message level basis

Technical Approach

  • Consumes the chat api from Ollama, sending fetch requests to the locally running application and reading their responses into Markdown format.
  • Organised to render the standard in chat interfaces, the list of conversations you have and the conversation body. Built to showcase the power of flexbox in CSS.
  • Built simply using React, utilising useState, useEffect, and useRef to manage data display, storage operations, interfacing with Ollama APIs, and guiding users through their interactions with AI.
  • Styled with tailwindcss to benefit from a library with informed defaults and awesome color selection. Does not follow the standard html class approach to applying styles to markup, this developer finds this to be hard to read and so @apply was used in the style files to keep a classic method of organisation.
chat interface with messages

Scaffolded out very quickly using the default react app project settings with vite. Styled minimally using tailwind css for speed. My approach to conversational AI powered by local language model deployments, facilitated by Ollama's API and serving AI enthusiasts a simple application providing privacy in their conversations. A step beyond using Ollama in the terminal.

The Sensing Engine

Centralised library of consultant knowledge, projects, research, and resources.

node, salesforce, react, javascript

The Sensing Engine is a centralised digital archive of market and project data, an internal data library for adding a layer of connection to project data, industry trends, team insights, and market research. Available through multiple channels, we brought the power of the team data to everyone with Salesforce providing a single source of truth.

Created to foster the interconnection of knowledge for an internal consulting team that touched a variety of industries. With historical and current inputs available in a single search, the Sensing Engine was built to the be the first place to go for data on your next project.

The Sensing Engine features a custom Salesforce app that offers real-time feeds of document submissions, analytics, trending reports, and searchable content. It also includes Record Cards for detailed descriptions of supported content types.

React and Vue apps were also built to serve as interfaces within the consulting team's document directory, enabling efficient searches across various documents and external links. The project further expanded by creating spin-off applications, Insights and Signals, tailored to other teams' data requirements while maintaining a cohesive aggregation of sources.

Features

  • Custom applications built in Salesforce, handling records for submission content and its organisation through playlists and tagging.
  • Quip applications built in React for ingestion of the feed of project and market data, allowing users to filter and search, like and comment on posts for their peers.
  • Speedy and powerful search available in Salesforce and Quip applications.
  • Chrome Extensions for easily submitting labeled content found across the web.
  • Email Newsletter generated and customized to user preferences, sent out weekly or daily, to show the most popular and relevant submissions.

Technical Approach

  • Salesforce works as a source of truth of the submission data. Custom lightning applications were built using Typescript for newsfeed aggregations, record pages, tagging modals, and user conversations.
  • Quip documents were where most of users already were, so too was the Sensing Engine-embedded quip live apps were developed using React and LESS to replicate list and record views and functionality.
  • A Node monorepo handled the heart of the app ecosystem, built with Express, hosted on Heroku, and duplicating source data with Salesforce Connect, enabling powerful and fast searching of submission data.

This comprehensive system resulted in a 75% adoption rate among the team members, with significant growth attributed to user engagement and consistent marketing through all-team calls. The Sensing Engine also inspired several spinoff applications that catered to different departments' unique data needs while preserving a unified approach to information aggregation and analysis.

Enterprise Timesheets in Slack

Application embedded within Slack chat interface

node, salesforce, slack, json

Time Sheets is a Slack app for replacing a cumbersome application in Salesforce, adding a layer of usability and familiarity to an internal tool.

When our team was told to start recording their work into a time management application, internally developed with unintuitive interface and prone to error, our tech team was asked to build something on Slack since it was recently acquired by the company.

slack timesheet home screen

My team and I developed a streamlined and intuitive time tracking application for our internal team to improve efficiency and accuracy. Leveraging the power of the Slack Design System, the Slack API, and Salesforce SOAP API, we focused on creating a clean, intuitive interface for timesheets within the familiar Slack environment. This involved designing time entry forms and weekly summaries of time spent on projects. The app integrates a Salesforce application with Slack's API to allow users to edit and submit timesheets directly within their Slack workspace.

Slack was new to Salesforce, and new development was hot on the platform. While we were still restricted by the early level development updates Slack was performing on their end as they integrated with the company, we still pushed the design of the design language, and in turn inspired several other teams to strategise their own new applications on the new platform.

alternative slack timesheet home screen

The Slack Time Sheets application significantly improved time management within the team. Users reported a 20% increase in their overall productivity due to the app's streamlined workflow. The app minimized manual errors associated with traditional time tracking methods, leading to more accurate data collection.

Survey Application for Quip Documents

Collaborative survey building and answering, embedded within documents

react, ruby, rails, postgres

contents of a survey

The Survey Quip Live App is a custom application for building robust surveys inside of Quip Documents. The goal of the application was to gather qualitative data input from hundreds of stakeholders in a collaborative and structured way. Where a Google Form allows only one user to fill out a form, building such a form inside Quip documents allows for multiple users to be able to write out a single survey submission. We wanted to enable collaboration on data input and allow aggregation of structured data for qualitative review.

Our team identified that Quip documents' interactive nature could be leveraged to create a more dynamic, collaborative survey experience for our ~2k coworkers who regularly used the platform.

I created a Survey Quip Live App that embeds surveys inside documents, allowing multiple users to concurrently contribute to and review structured, qualitative data. Building from a library of react components from Quip, this app enables real-time contributions and reviews from multiple users, fostering collaboration and data-driven decision-making. I also built a supporting Ruby on Rails backend to handle the data and form validation of surveys. Additionally, extensive unit testing early in the development process resulted in a robust application capable of lasting for approximately two years beyond its initial release. This proactive approach ensured that the app met all functional requirements and provided an excellent user experience.

contents of a survey alternative slack timesheet home screen

The successful implementation of Survey Application Quip Live App allowed our company to gather qualitative data from multiple stakeholders in a collaborative, structured manner within Quip documents. By enabling users to contribute to surveys while maintaining the document's overall design and functionality, we improved teamwork efficiency and facilitated better analysis of survey results for decision-making purposes.

Sand

Glitches and looping digital abberations

python

Inspired by Gimp's image manipulation filters, I built tools and processes with python to automate the distortion of images, and the animation of the pixel displacement. Using pillow, I manipulated pixels based off of their position relation to other pixels, and dancing in digital became. Check out the github repository: sandco