[{"_1":2,"_105":-5,"_106":-5},"loaderData",{"_3":4,"_59":60},"root",{"_5":-7,"_6":7,"_57":58},"pocketbaseUrl","getGlobalInfoList",{"_8":9,"_55":56},"list",[10],{"_11":12,"_13":14,"_15":16,"_17":18,"_19":25,"_24":32,"_33":34,"_39":40,"_41":42,"_30":54},"collectionId","pbc_2834582692","collectionName","global_info","created","2026-01-08 05:31:18.135Z","expand",{"_19":20},"icon",{"_11":21,"_13":22,"_15":23,"_24":25,"_26":27,"_28":29,"_30":31},"pbc_3598190544","media","2026-01-12 06:39:10.626Z","id","udt22ypwp4u2mdw","img","varist_1_3cgxexhdl4.webp","title","profile_icon","updated","2026-02-02 09:10:46.797Z","1ybnvwr6ilw2dvy","legion",{"_35":36,"_37":38},"lon",100.601093,"lat",13.705413,"name","Varist Siriumpunkul","social",[43,48,51],{"_44":45,"_46":47},"socialName","GitHub","link","https://github.com/BrokenHead",{"_44":49,"_46":50},"LinkedIn","https://www.linkedin.com/in/varist-siri-a64b3a213",{"_44":52,"_46":53},"Email","mailto:varist.siri@gmail.com","2026-03-05 06:41:14.108Z","token","eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjb2xsZWN0aW9uSWQiOiJfcGJfdXNlcnNfYXV0aF8iLCJleHAiOjE3NzUxMzYzMDcsImlkIjoiN3AxeWsxeTQyODV3c3RmIiwidHlwZSI6ImZpbGUifQ.A6k4q_pekmyOsMkHNNC0U_acdWe45ozXNbN-fwlgYfI","tz","Asia/Bangkok","routes/work_",{"_5":61,"_62":63},"https://pb-db.varist-siri.com","getWorkList",{"_8":64,"_55":56},[65,83,94],{"_11":66,"_13":67,"_15":68,"_69":70,"_24":71,"_26":72,"_75":76,"_77":78,"_28":79,"_30":80,"_81":82},"pbc_1950551856","work","2026-02-04 06:08:03.554Z","forceDate","2025-02-04 12:00:00.000Z","mpumlrjfq7z803x",[73,74],"roastime_room_002_sfbw11unog.jpg","880_d3_aeb_7338_4_f45_b95_b_c7_c41_f6796_eb_1g5y41hhyl.jpg","overview","","richText","

Key Features

\r\n

Data Structure: Working with the Firmware team to design and implement a data stream for every component and sensor
Display and Command: Design how to control and display the roast chart of AiO, the data-driven coffee roaster, by cross-platform desktop apps, from UI (Vue.js) to send the command through the communication layer (Golang)
Integration: Make the new roaster able to collect the roast profile, automatically sync data to the cloud, use the roasting recipes, and exist on the company dashboard website Roast.World
Took a flight to the head office in Taiwan with the team to set up the showcase machine at the showroom

\r\n

Technologies Used

\r\n

Vue.js (Typescript): For simplifying code style and real-time user interaction
Golang: use for a performance module, use as a C wrapper, and be the main package parser for this project
Electron: wrapper for all services to run as cross-platform desktop apps
Websocket: the communication method for internal service, and RestAPI for the sync
Firebase: as the main source of truth for the sync system
Vitest/Playwright: the project included unit tests, some user testing cases, and hardware integration tests
Figma: designing the UI by following the company handbook, and creating UI for prototypes

\r\n

Challenges and Learnings

\r\n

This plan comes from the management team's decision after market analysis. No know this before, and we had a tight deadline, just about 6 months for the entire company, and my team had only 3.5 months left when the testing board was handed to us. At that time, we were trying to make our desktop apps as ready as possible before the testing board came. We opened the urgent call, where we tried to develop software 24 hours/ 5days among our global team. And we make a clean and simple document to share the development/test/pending to pass this

\r\n

Outcome

\r\n

We're able to ship the first batch of R1 in Q1 2025, with full functionality. We have made R2 able to roast with our program RoasTime, able to save roast profiles, using recipes, have our advanced logging, analysis, and gain access to the Roast.World online community and roasting history dashboard

"," Gain R2 and R2 Pro data-driven coffee roaster to access the Aillio Eco system","2026-03-06 10:06:54.433Z","viewProjectLink","https://roastime4.aillio.com/",{"_11":66,"_13":67,"_15":84,"_69":85,"_24":86,"_26":87,"_75":89,"_77":90,"_28":91,"_30":92,"_81":93},"2026-02-04 06:38:59.939Z","2024-10-01 12:00:00.000Z","4569tbzaa4nrefj",[88],"aio_top_banner_bi_m5_puv_pkykf8kmom.jpg","Integration futuristic coffee roaster to all company appication and service","

Key Features

\r\n

Data Structure: Working with the Firmware team to design and implement a data stream for every component and sensor
Display and Command: Design how to control and display the roast chart of AiO, the data-driven coffee roaster, by cross-platform desktop apps, from UI (Vue.js) to send the command through the communication layer (Golang)
Integration: Make the new roaster able to collect the roast profile, automatically sync data to the cloud, use the roasting recipes, and exist on the company dashboard website Roast.World
Took a flight to the head office in Taiwan with the team to set up the showcase machine at the showroom

\r\n

Technologies Used

\r\n

Vue.js (Typescript): For simplifying code style and real-time user interaction
Golang: use for a performance module, use as a C wrapper, and be the main package parser for this project
Electron: wrapper for all services to run as cross-platform desktop apps
Websocket: the communication method for internal service, and RestAPI for the sync
Firebase: as the main source of truth for the sync system
Vitest/Playwright: the project included unit tests, some user testing cases, and hardware integration tests
Figma: designing the UI by following the company handbook, and creating UI for prototypes

\r\n

Challenges and Learnings

\r\n

The key challenge was the machine using a new MCU (Microcontroller Unit), a custom controller board, a lot more sensors, and new firmware, which changed a lot of communication protocols and data exchange between the device and the application. Additionally, setting up effective collaboration workflows between software engineers, mechanical engineers, and firmware engineers using a basic Excel file with a good meeting to set the protocol greatly improved the process and development experience.

\r\n

Outcome

\r\n

The machine is now actively working with RoasTime (cross-platform desktop apps) in the Taiwan showroom and the Europe Branch in Copenhagen, Denmark. To show how it's working for our customers and everyone who visits our head office. Make a mechanical team able to work faster with the data and logging from the application. It has become a foundation for Bullet R2 and Bullet R2 Pro, which have similar features with a smaller size.

","Project lead: AiO Integration","2026-03-06 09:24:47.777Z","https://aillio.com/aio",{"_11":66,"_13":67,"_15":95,"_69":96,"_24":97,"_26":98,"_75":100,"_77":101,"_28":102,"_30":103,"_81":104},"2026-02-04 06:26:16.508Z","2024-04-04 12:00:00.000Z","95v8jjmca1y9jkp",[99],"posts_c52jufu_j0w_tvm_np_ll_jl9_cover_6l953n9qgb.jpg","coparate with website designer to renew whole UI and enhance UX","

Key Features

\r\n

Component Library: Built a set of modular, reusable UI components using React and styled-components in Remix, focusing on accessibility and responsiveness.
Theming and Customization: Integrated a theming system that allows easy switching and customization of color palettes, typography, and layout styles using CSS variables and Figma tokens.
Figma Integration: Collaborated closely with designers by setting up a shared design library in Figma. This library was synchronized with the codebase, ensuring design handoffs were seamless and that design tokens remained consistent across both platforms.

\r\n

Technologies Used

\r\n

Remix: The React framework, which includes server-side rendering (SSR)
Node.js + Express.js: Tech stack of API, which gets reshaped after the website's working flow and data redesign
Figma: For creating and managing design assets and prototypes.

\r\n

Challenges and Learnings

\r\n

It's normal to find the website working flows missing, some views missing, and undefined UI in some complicated path of rewriting the whole website in the Figma software design handbook. The solution resolves setting up effective collaboration with the designer team, and asking for feedback from the approver to make a good design with a good user experience.

\r\n

Outcome

\r\n

We managed to have a well-refined software design handbook, which we used many times when we wanted to develop something. Our software team managed to make the redesign without any fatal bugs and on the challenging deadline

","Redesign Roast.World Website UI/UX","2026-03-06 09:41:47.061Z","https://roast.world/feed/c52jufuJ0wTVmNpLlJL9","actionData","errors"]

Projects