{"id":471,"date":"2022-09-01T02:56:18","date_gmt":"2022-09-01T02:56:18","guid":{"rendered":"https:\/\/mechied.com\/?post_type=portfolio&p=471"},"modified":"2023-01-02T18:02:22","modified_gmt":"2023-01-02T18:02:22","slug":"smart-scale","status":"publish","type":"portfolio","link":"https:\/\/mechied.com\/index.php\/portfolio\/smart-scale\/","title":{"rendered":"Smart Scale"},"content":{"rendered":"\n
\n
Live Demo<\/strong><\/a><\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
\"\"<\/figure>
\n

I got a little too snack happy during Recurse so I wanted to be more aware of what I was eating. I created Smart Scale to help me calculate the total nutritional information of a recipe as I cook by connecting my kitchen scale to a web interface.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n

I hacked a kitchen scale from Amazon to embed an ESP8266 IoT development board and programmed the board to send the weight reading via MQTT to a broker on my droplet server. Then I made a React page where you interactively search for foods in a database and select one to use as your current ingredient. The page automatically gets the scale weight data from MQTT (or fakes the data if you’re not logged in with the proper credentials). If you don’t find what you want, or want to edit the nutritional information, you can update the database, which is written in Python using Django. The page also calculates the total and average nutritional info for the recipe and you can divide the information by the number of servings.<\/p>\n\n\n\n

I also wanted to better understand authentication (after using JSON web tokens in my Fulcrum Focus<\/a> app) so I integrated Auth0<\/a> as an authentication provider. I created an authentication scheme for three different types of users: unauthenticated users who can only view the main food database, authenticated users who can view the main database and add user specific custom foods, and administrators, who can view and edit all foods. The backend API endpoints are protected with token authentication and Auth0 scopes are used to grant administrator privileges. The frontend queries the backend to determine the user’s access level and then tailors front end elements like disabling buttons and displaying tooltips. Implementing this efficiently required using advanced React concepts like async, hooks, routers, and context. The code is posted to my github here<\/a>.<\/p>\n\n\n\n

\n
\n
\n