https://github.com/gabrielmarcano/roaster-app
React Native mobile app for monitoring and controlling ESP32-based coffee roasting equipment. Real-time temperature/humidity charts, motor control, timer management, and roasting profile storage.
https://github.com/gabrielmarcano/roaster-app
esp32 react-native
Last synced: 4 months ago
JSON representation
React Native mobile app for monitoring and controlling ESP32-based coffee roasting equipment. Real-time temperature/humidity charts, motor control, timer management, and roasting profile storage.
- Host: GitHub
- URL: https://github.com/gabrielmarcano/roaster-app
- Owner: gabrielmarcano
- Created: 2024-11-13T16:23:14.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-03-03T19:52:09.000Z (4 months ago)
- Last Synced: 2026-03-03T22:20:24.928Z (4 months ago)
- Topics: esp32, react-native
- Language: TypeScript
- Homepage:
- Size: 4.63 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Roaster App
A real-time mobile companion for the pyroaster ESP32 IoT roasting controller.
---
## Overview
Roaster App connects to a [pyroaster](../pyroaster) device over Wi-Fi and provides live monitoring and control of a coffee or nut roasting session. It receives real-time sensor data via Server-Sent Events (SSE) and lets you manage the timer, motors, and roasting presets from your phone.
---
## Features
- **Live sensor dashboard** — real-time temperature and humidity charts updated every second via SSE
- **Circular timer** — HH:MM:SS countdown with +60 s / −60 s controls
- **Motor control** — toggle three independent motors (burner, fan, drum)
- **Roasting presets** — create, apply, and delete named configs (starting temperature + duration)
- **Offline preset creation** — presets created without a connection are queued locally and synced automatically on reconnect
- **Push notifications** — timer-finish alert plus optional 30 / 20 / 10 minute pre-notifications
- **Auto-reconnect** — exponential backoff (1 s → 30 s max) with a live connection indicator in the header
- **Bilingual UI** — English and Spanish, switchable at runtime
- **Dark Material Design 3** theme throughout
---
## Tech Stack
| Layer | Library |
|---|---|
| Framework | [Expo](https://expo.dev) SDK 55 / React Native 0.83 |
| Language | TypeScript 5.9 |
| Navigation | Expo Router v4 (file-based) |
| UI | [React Native Paper](https://reactnativepaper.com) (Material Design 3) |
| Server state | [TanStack Query](https://tanstack.com/query) v5 |
| HTTP | Axios |
| Real-time | `react-native-sse` (SSE) |
| Storage | `expo-secure-store` |
| Notifications | `expo-notifications` |
| Charts | `react-native-gifted-charts` |
| i18n | `i18n-js` v4 |
---
## Project Structure
```
roaster-app/
├── app/
│ ├── (tabs)/
│ │ ├── index.tsx # Dashboard — live sensor charts
│ │ ├── controllers.tsx # Motors + roasting presets
│ │ ├── timer.tsx # Circular countdown timer
│ │ └── settings.tsx # Language, notifications, device controls
│ ├── sign-in.tsx # Device IP entry / session setup
│ └── _layout.tsx # Root provider tree
├── api/
│ ├── api.ts # Axios request functions
│ ├── queries.ts # TanStack Query hooks
│ └── types.ts # Shared TypeScript types
├── components/
│ ├── CircularProgress.tsx # SVG ring timer display
│ ├── TemperatureChart.tsx
│ └── HumidityChart.tsx
├── contexts/
│ ├── sseContext.tsx # SSE connection + auto-reconnect
│ ├── sessionContext.tsx # Device IP / auth
│ ├── localConfigContext.tsx # Offline preset queue
│ ├── notificationsContext.tsx
│ └── localeContext.tsx
├── hooks/
│ ├── useNotificationScheduler.ts
│ └── useSyncPendingConfigs.ts
└── i18n/index.ts # English + Spanish translations
```
---
## Getting Started
### Prerequisites
- [Node.js](https://nodejs.org) ≥ 18
- A physical device or emulator running iOS or Android
- A [pyroaster](../pyroaster) device on the same Wi-Fi network (or its AP hotspot)
### Install
```bash
npm install
```
### Run (Expo Go / development)
```bash
npm start # opens Expo DevTools
npm run android # launch on Android
npm run ios # launch on iOS
```
> **Note:** Push notifications require a custom dev build, not Expo Go.
### Build (custom dev client via EAS)
```bash
npx eas build --profile development --platform android
```
---
## Connecting to the Device
On the sign-in screen, enter the IP address of your pyroaster device:
- **AP mode (direct):** `192.168.4.1` — the ESP32 acts as its own hotspot
- **STA mode (router):** the IP assigned by your router — check the device LCD or your router's DHCP table
The session is stored securely on-device so you only need to sign in once.
---
## Backend
This app is the companion to **[pyroaster](../pyroaster)**, a MicroPython server running on an ESP32. See its README for hardware setup, pin wiring, and firmware flashing instructions.
---
## License
Private project — all rights reserved.