Ok, so here’s the deal. I always overshoot with my vision for projects, I want to do so much and have a lot of ideas––and get very excited to try and do them all. This is especially true for developing front end stuff as it’s easy to see a design motif in use in the wild, on the web for example, and say, hey I want to do that in my project. In reality, something that looks simple enough to implement, can actually be quite involved in the long run, especially for a CS newbie like me. Now that my CICD workflow from last week was in place and running I was able to spend most of the time since then working on the front end designs I was tasked with completing. Here’s a little bit more about what I did.

We laid out our site so that 2 pairs of pages (Admin/User Dashboards and Pet Profile Page and Admin Create/Edit pages) would each share a basic template that we design, so that the difference between the two in a pair is plugging in different components on top of the template to fit the needs of each page. Overall, this reduces the complexity of the site and allows us to have consistent design choices throughout most of it which is great. I had to come up with the Template used between the Admin and User Dashboards and also finalize the Admin Dashboard. As a team we discussed what the general layout should be for the template and came up with something like this

Looking at this initial sketch I was like pssshht this looks easy enough I can finish this in couple of hours and be able to create a stylized set of containers to put components in to give it a polished look. Yeah… So that didn’t happen haha. I am completely new to the idea of responsive design and haven’t used any CSS generating frameworks before. I’ve really only written CSS manually, and while you can do a decent amount of layout and styling stuff that way, it really isn’t ideal for making modern day web apps. I had to spend a decent amount of time learning about MUI’s layout APIs (eg grid, stack, box, container). After figuring that out, I was able to make the template above using a nested stack/grid combination, so my teammate making the other page can just put their components inside the grid to make changes to their page based on my template I added in the components that made sense for our admin dashboard, so an overview of the pets they manage with create, edit, and delete buttons so changes can quickly be made to their menagerie of animals.

The page is displaying mock data only right now, I’m starting to integrate it with the back-end data base that was just recently finished. I plan on getting all the admin functionality done before my next post, so I hope next time we speak I have some good stuff to show you. Until then, I’m stuck in integration land!