Yet another week. Does this opening get old? Probably. Oh well.
This week, we started the project in earnest. M started building the larger components for our web app, S started working with the database and cloud deployment, and I started the smaller components. One of the most important pieces, I think, is the card that will hold the information on the animals, what we have dubbed the PetCard. I’ve been working on this the most this week.
First, I had an interesting mental block this week concerning the architecture of our project. We had set up a front-end and a back-end directory for our project and were building various pieces in each one. This confused me for a bit as it felt like we had two servers running which didn’t make sense to me. After some back and forth with M, it finally clicked. We are using a microservice architecture (duh) which means we’ve separated the front-end server that will interact with the clients’ browsers and back-end server that will handle the database queries. The front-end will make calls to the back-end, which is basically just an API (possibly RESTful, but we haven’t settled yet). The back-end will interact with the database and send info to the front-end server, which will render it to the client.
With that cleared up, I then ran into the daunting task of trying to figure out how React works for real. As I suspected, React’s component system is very similar to Flutter’s Widget system. This made getting a basic component built fairly simple. However, we also decided to use Material UI’s React component APIs, which adds another layer of complexity for me. While these prebuilt components make some things convenient and help avoid messing with CSS, learning how the components work, as well as the formatting rules these components use. Currently, I’m struggling with getting the text to format within a CardContent component the way I want it. But, we’re getting through and I think it’ll be alright.
To help with learning React, I found this wonderful video that has made a lot of aspects simple to understand:
