Since my last post I have integrated all of the admin pages to our MongoDB database system. That is, the admin dashboard can now retrieve a list of animals associated with a given admin account and dynamically display them in table on the admin dashboard. On that table, each row has an edit button that will reroute the user to a page pre-populated with row data to edit and submit changes. There is also a delete button on each row of the table that will allow users to delete the row from the DB. Finally, there is a create new animal button on the side that allows for the user to make an entirely new animal entry into the db. We used a node back-end server to host our react app and also support a series of endpoints that allow for basic CRUD operations to be called from the front end. Integrating all this functionality went rather smoothly, but there was one tricky part and that was how to handle image uploads and actually displaying them in our account avatars/tiles.
We spoke as a team about this and reviewed some of the options available to us, e.g. firestore, storing file paths in our db to the location of a given image, storing them directly in the db with something like gridFS. Since our use case will not be supporting a large number of images (note our hosting options are rather limited without spending money) and they will, for the most part, be small files, our team decided on using the less conventional approach of just storing the images in the database for this project. Without using another service there is no way to directly store them in a Mongo collection however (e.g. direct jpg upload), so we decided to base-64 encode all image uploads and store the byte data in an image field in our database. When I was building out the front-end support for this, I’ll admit that I was a little confused on how to handle these strings so I could use them with my existing components and not have to redo a bunch of stuff. But it turns out that react and furthermore the HTML img tag just know what to do with it when the raw base-64 data is fed in. The end result looked like this.
How fun! We have one last major hump to get over as a team now, and that’s user authentication, I’ll let you know how that goes next week!
-AD
