> [Live demo](https://monitor-teal.vercel.app/) | [Github](https://github.com/philipmuller/monitor)

## Introduction

Pulseflow is an application that allows engineers and technicians to create reports and monitor factory equipment and machines using natural language. It was developed  as part of an Aalto University course assignment on chat-like and command-line systems. The app currently features a list of machines that users can generate reports on and enquire about , leveraging AI, function calling and custom widgets to streamline the reporting process.

## Process

* Set up the project using a tech stack of **Next.js**, **Supabase**, **Tailwind**, and **React**

* Developed the core functionality of the app, focusing on allowing users to create and view reports on different machines using language. The AI has to interpret when the message warrants showing specific widgets and UI elements.

* Implemented a sign-in and account creation system using **Supabase** for authentication

* Experimented with **OpenAI**’s function calling capabilities to interweave interactive widgets into the conversation stream

* Explored how AI can convert plain text descriptions into structured reports, inferring data like severity levels from user input

* Implemented interactive elements within the chat interface to enhance user engagement and data collection accuracy

## Reflection and Future Improvements

Working on Pulseflow was an insightful experience, particularly in experimenting with the **OpenAI** API's function-calling capabilities. It highlighted how good LLMs are at turning plain text into structured data efficiently, which makes reporting a great use case. The project also let me experiment with **Supabase** for authentication.

While Pulseflow is not a project I plan to continue developing, it served as a significant source of inspiration. The experience reinforced my belief that AI could play a transformative role in reporting tools, potentially allowing users to complete reports simply by talking into their phones and responding to prompts, rather than typing into forms.

Pulseflow

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXNkqyzeXMbdMk49OGAlZ5ojbXNf2%2Fcardybee%2F2dabb603-ad8f-4f5a-9723-78f63583170b.mp4?alt=media&token=e8a32451-e83e-474c-837c-3858d34ffabc","id":"2dabb603-ad8f-4f5a-9723-78f63583170b","width":1440,"height":1080,"filename":"cardybee reel.mp4","type":"video/mp4","caption":"","border":false}]}
```

> [Live demo](https://cardybee.vercel.app/) | [Github](https://github.com/philipmuller/cardify)

## Introduction

Cardybee is a web app that uses AI to make flashcards from text or files you upload. It's designed to help students and teachers create study materials quickly. There's also a live mode that can make cards while you're talking - pretty handy for lectures.

The app is responsive and supports multiple inputs like trackpads and keyboards. There is no need to sign up, but you can if you want to save or share your cards.

## Process

I first played with the idea of AI flashcards with a very simple SwiftUI prototype right after the release of ChatGPT, in December 2022. Due to intense coursework, I had to postpone the project several times, but it eventually came to life with two amazing teammates in the Design of WWW Services course at Aalto University. I was involved in nearly all activities, mostly focusing on frontend development and visual design.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXNkqyzeXMbdMk49OGAlZ5ojbXNf2%2Fcardybee%2Fbc871fc0-86a0-417f-a8cf-749cbf19a559.mp4?alt=media&token=22f16998-c47c-4184-ad2a-88813fa05145","id":"bc871fc0-86a0-417f-a8cf-749cbf19a559","width":3584,"height":2240,"filename":"cardybeeEarly.mp4","type":"video/mp4","caption":"An early prototype of Cardybee loading in Spline","border":false}]}
```

### Activities

Concept development & User Research:

* Conducted and analysed 9 interviews with flashcard users

* Validated findings using a broader **Typeform** survey

Technology validation:

* Built a demonstrator using **NextJS**, **React**, **Tailwind**, and the **OpenAI** **API**

Design phase:

* Collaborated in Figma to design screens and components

* Collaborated on a design document analyzing potential user groups

Development phase:

* Used **Git** & **GitHub** for collaboration and continuous deployment on **Vercel**

* Employed **Linear** for project management

* Implemented authentication and database in **Supabase**

## Reflection and Future Improvements

Developing Cardybee has been a rewarding experience and I learned a lot, especially in the technical department. Still, some parts of Cardybee need more work. For example, while the minimalist, monochrome aesthetic was intentional, it became clear that we need an accessibility revision to make the app more inclusive. Additionally, the features for logged-in users were developed quickly and could benefit from further refinement.

Cardybee - Minimalist AI Flashcards

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXNkqyzeXMbdMk49OGAlZ5ojbXNf2%2Fcleanr%2Fa8974fb4-0e3f-4efb-a5f9-ecf266401551.mp4?alt=media&token=290d970b-f686-45c2-9613-c039fd0af37a","id":"a8974fb4-0e3f-4efb-a5f9-ecf266401551","width":1440,"height":1080,"filename":"cleanr walkthrough.mp4","type":"video/mp4","caption":"","border":false}]}
```

## Introduction

Cleanr is a bloat-free app prototype designed to manage and control your washing machine. It offers a simple and clean home interface that shows the current status of your machine. Users can pause, resume, or stop a wash and view the remaining time if a wash is in progress. Cleanr also lets users start a new wash, but it offers a different, more situational use case for that feature. Finally, Cleanr helps users monitor their water and electricity consumption.

## Process

Cleanr was designed during a Web Design course at the IUAV University of Venice. Many IoT apps simply aim to give users full control over the target device from a phone, replicating the device’s functionality with a different medium. Cleanr explicitly tries to reject this principle: It aims to showcase restraint and conceptual minimalism, offering companion functionality instead. For instance, Cleanr assumes that starting a wash should nearly always occur using the washing machine itself, especially since physical proximity is necessary. Consequently, Cleanr offers a "start washing" experience that is tied to specific scenarios, like when the right settings are unclear and guidance is preferred.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXNkqyzeXMbdMk49OGAlZ5ojbXNf2%2Fcleanr%2F6ce5209d-161d-429f-93ee-fddf8a1368db.png?alt=media&token=128e6bcb-3c2e-4604-bffc-231d31c453b1","id":"6ce5209d-161d-429f-93ee-fddf8a1368db","width":3538,"height":2212,"filename":"Screenshot 2024-08-29 at 04.12.02.png","type":"image/png","caption":"","border":false}]}
```

### Activities

**Concept Development:**

* Emphasized a minimalist approach, both graphically and conceptually, to avoid inducing decision fatigue

* Designed the interface to prioritize observable factors of the laundry (e.g., type of clothes, dirt level, preferred time) rather than technical settings

* Conducted user research in the form of interviews to understand use cases

**Design & Prototyping:**

* Designed the user interface using **Adobe XD**

* Utilized **Affinity Designer** for creating detailed vector illustrations, such as the washing machine on the home screen

## Reflection and Future Improvements

Cleanr exemplifies my belief that design should be about more than just visual simplicity. The balance between simplicity and functionality is crucial and can be challenging to achieve. Working on Cleanr reinforced my belief that restraint is a core principle of good design.

Cleanr

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXNkqyzeXMbdMk49OGAlZ5ojbXNf2%2Fbixi%2F1e2fcb3d-e41b-4625-a2ee-9b97512751bb.mp4?alt=media&token=f735b491-1d76-439c-8824-e24534346b15","id":"1e2fcb3d-e41b-4625-a2ee-9b97512751bb","width":1920,"height":1080,"filename":"Bixi-demo-compressed.mp4","type":"video/mp4","caption":"","border":false}]}
```

> [Github](https://github.com/philipmuller/tok) | [Twitter](https://x.com/footnotestorams/status/1644436571171504128)

## Introduction

Bixi is a physical button that lets tinkerers talk to an Arduino and electronic circuits in natural language. By narrating intent and the state of the circuit, users can define their circuit's behavior, making it more accessible for those who may not have programming experience. Additionally, users can quickly iterate by following-up on previously described intentions.

## Process

Bixi was developed as part of the Mastering Tinkering course at the University of Twente, undertaken by a team of five. I was responsible for the design, as well as the software and hardware development of the device.

### Activities

**Concept Development & Initial Prototyping:**

* Defined the goal of allowing natural language interaction with **Arduino** circuits without a traditional programming setup

* Developed initial prototypes using **Python** scripts on a regular computer, connected to an **Arduino**

* Implemented voice transcription and code generation by integrating with the **OpenAI** API

**Hardware & Software Development:**

* Transitioned from a computer-based prototype to a **Linux SBC** for a more compact and integrated solution

* Developed a first prototype using a small **3D printed** box with a tiny screen, which was functional but lacked the desired sense of magic

* Collaborated using **Git** and **GitHub** for version control and team communication

**Design Challenges:**

* Initial prototypes felt like using a tiny computer, which did not evoke the magical feeling we aimed for

* The design process focused on creating a device that felt intuitive and mysterious, leading to the insight that less visibility into system status increased the sense of wonder, which counters established design principles in other domains

* Redesigned the device with a central button interface and LED ring to improve user experience and achieve a more magical feel

* Modeled the final case design in **Rhinoceros** and **3D printed** it for the final version

## Reflection and Future Improvements

Bixi was one of the most rewarding and magical projects I have worked on, blending complex engineering with thoughtful design to create a unique user experience. The main takeaway was the importance of designing for emotional impact, not just functionality. By intentionally restricting visibility into the system's status, we were able to enhance the sense of magic and wonder surrounding the device.

Looking forward, there are opportunities to refine Bixi further. Improving the accuracy and speed of voice recognition and integrating more complex natural language processing capabilities could enhance the experience significantly. Additionally, exploring more hardware designs could make Bixi even more appealing to a wider audience, like integrating it directly with a breadboard. The experience with Bixi reinforced the idea that the best technology feels natural and almost invisible, allowing users to focus on creativity and interaction.

Bixi - Natural Language Tinkering

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXNkqyzeXMbdMk49OGAlZ5ojbXNf2%2Fscarpetta%2Fd73b59c1-294c-4bdb-9450-dbbf5f00f192.png?alt=media&token=9fba0e6d-f2ac-4bf1-a405-13fb8cd8db83","id":"d73b59c1-294c-4bdb-9450-dbbf5f00f192","width":1440,"height":1080,"filename":"scarpetta cover.png","type":"image/png","caption":"","border":false}]}
```

[Live demo](https://philipmuller.github.io/Scarpetta/) | [Github](https://github.com/philipmuller/Scarpetta)

## Introduction

Scarpetta is a simple, cross-platform recipe app created as part of a university course on device-agnostic design. Named after the Italian term for mopping up leftover sauce with bread, Scarpetta allows users to view, search, create and favourite recipes. The app significantly exceeded the core requirements of the course in both design and development.

## Process

Scarpetta was developed as a solo project with the primary goal of exploring cross-platform **Flutter** development. The development was done in one continuous process, though it involved a lot of experimentation with different features and approaches.

### **Development Challenges**

* Implementing responsive navigation with NavigationBar, NavigationRail, and NavigationDrawer

* Managing the root scaffold for all views, adapting to different navigation states

* Handling a document-based database like **Firestore**, which lacks support for joining tables

* Dealing with GoRouter complexities, leading to a complete app rewrite

* Managing state and a paginated UI, while ensuring smooth local updates

### **Learnings**

* Gained experience with normalization in **Firestore**

* Implemented theming using **Material3** for a consistent look and feel

* Learned to integrate and use the built-in search functionality in **Flutter**, syncing it with **Firestore** via streaming

* Developed techniques to enhance user experience by overlaying local state updates with remotely fetched data in paginated scenarios

## Reflection and Future Improvements

Developing Scarpetta taught me a lot, particularly in understanding Flutter responsive design and propagating local state changes. From a management perspective, I found myself refining elements like a custom search bar, only to discard them later, which was a valuable lesson.

The app's layout still needs polish and better use of space, and features such as user-uploaded photos are still missing. Additionally, I'd like to incorporate some AI-driven features.

Scarpetta - Beautiful Recipes

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXNkqyzeXMbdMk49OGAlZ5ojbXNf2%2Forganon%2F050f6300-674f-4a8b-a4a6-e51a0b6352d2.mov?alt=media&token=fe10db63-f900-4ead-b528-9598d8c945fd","id":"050f6300-674f-4a8b-a4a6-e51a0b6352d2","width":1350,"height":1080,"filename":"Test.mov","type":"video/quicktime","caption":"","border":false}]}
```

[Github](https://github.com/philipmuller/Organon)

## Introduction

Organon is an iOS app that uses logic to help users create valid arguments. It's designed to make learning logic easier by breaking down complex ideas into simple, interactive lessons. Users can also apply their knowledge in a special editor that ensures the validity of their arguments.

The app features a Library section for learning about logic with interactive widgets, exercises, and quizzes. Each chapter is self-contained, making it useful both as a step-by-step course and as a reference tool. Users can create and edit arguments in the Arguments section, where a unique editor visualizes logic in both plain text and symbolic tree structures.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXNkqyzeXMbdMk49OGAlZ5ojbXNf2%2Forganon%2Febe75fd6-5f44-4fa1-9952-449fe1b57b1d.png?alt=media&token=7bd4c23b-eac3-4f08-9fa7-41d1ecef553b","id":"ebe75fd6-5f44-4fa1-9952-449fe1b57b1d","width":3584,"height":2240,"filename":"Screenshot 2024-08-27 at 00.48.14.png","type":"image/png","caption":"","border":false}]}
```

## Process

The idea for Organon started as my Bachelor's thesis project at IUAV University of Venice, aiming to create a "Duolingo for logic". At the time, I was deeply immersed in learning about philosophy, logic, and argumentation, which formed the basis for Organon. The project required extensive exploration of  logic notation and visualisation, and learning strategies. Organon was a solo project: I handled both the design and technical development, focusing on creating a less intimidating interface for learning and applying logical reasoning.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FXNkqyzeXMbdMk49OGAlZ5ojbXNf2%2Forganon%2Faa041d0a-f2d0-4d52-b891-c050620184bb.png?alt=media&token=837dc6da-d2e3-4ef8-a9d6-ff7a310b589d","id":"aa041d0a-f2d0-4d52-b891-c050620184bb","width":476,"height":287,"filename":"capture-11.png","type":"image/png","caption":"An argument written using formal symbolic logic","border":false}]}
```

### Activities

**Concept development & Design Challenges:**

* Explored existing material on formal logic and assessed its strengths and weaknesses

* Addressed the notation and design challenge of representing logical expressions in natural language using refreshed symbols and tree-like structures for relationships

* Designed a range of concepts using **Affinity Designer** and **Figma**

**Development phase:**

* Developed an automatic, real time, tree-like visualization for propositions

* Created an as-you-type editor using markdown-like syntax for adding logical operators

* Implemented automatic inferences in code, ensuring argument validity

* Implemented inline editing of generated tree-like proposition structures using the keyboard and a function bar

**Technology stack:**

* Built using **Swift** and **SwiftUI** for the iOS platform

* Used **Git** and **GitHub** for version control

## Reflection and Future Improvements

Working on Organon was a very valuable learning experience, since it presented significant design and development challenges. However, Organon still suffers from some limitations. The project lacked any user research, which could have provided insights like feedback on the UI. Future improvements could include user testing to refine the editor's design and more learning material in the app. Unfortunately, the target demographic for Organon was and still is quite small.