This webapp was developed for a mySQL databases class at Oregon State University. It is meant to be a clean, admin-facing interface for managing data for a grocery-list and pantry-ingredient organizer. It was developed with React and Flask and hosted on heroku at https://quiet-brook-53041.herokuapp.com/.
The following gifs illustrate the features and usage. (Clickable for higher resolution.)
Adding users and grocery lists. Editing the username is reflected in the grocery list.
Added food groups become selectable in the dropdown when adding ingredients.
The interface for viewing/adding/deleting ingredients associated with users and grocery lists.
A simplified overview of the database is shown in the following entity relationship diagram (ERD).
The Flask code is in app.py and database/db_connector.py
The bulk of the React work is in front/src/components
The sql files for database table creation and the queries are in database/
The navigation is set up in front/src/App.js using Material-UI Simple Tabs.
2000+ contributors to Material-UI (July 2021) Material-UI (Version 4.11.4) [Source code] https://material-ui.com/components/tabs/
The tables are implemented using the material-table package:
Baran, M et al. (July 2021) material-table (Version 1.69.3) [Source code] https://material-table.com/
In several cases (e.g., in handleRowUpdate and handleRowDelete of Ingredients.js) the code for updating the state of a React component after a fetch is adapted from:
Effiong, C (July 2021) material-ui-table-crud-restapi [Source code] https://github.com/effiongcharles/material-ui-table-crud-restapi