Jun 9, 2021
Melacast Week 2: 6/2–6/9
This week I dove head first into creating the frontend end pages and transitioning my Vuetify practice templates and previous Melacast backend repositories all into a new one that will be meant for production.
I combed through my backend repository and made sure to include any sensitive information in my settings.py (which I made at the very start and hardcoded all the keys and passwords) in a .env file instead.
Once that was done I copied over the Django files and the Vue pages into the new repo. On the Vue side, I deleted pretty much all the old pages and components since they were a hopeless mess of loose HTML meant to just showcase that the Javascript logic was functional. I’d recreate the frontend more efficiently with Vuetify and copy over the JS for each page as I go. At this point things were looking pretty good, so I went ahead and chose the public ‘Listings’ page as my starting point. It would mostly consist of a single grid and a filter search bar.
Pretty straightforward to implement after playing with grids for a week before. It took some tweaking to make sure that the text on the listing image would be responsive. The main issue I ran into was realizing that I’d made a mistake when using dummy data to set up the for loop that populates the grid. When I plugged in my actual API data, instead of creating one grid with 6 squares, 6 grids with 1 square each were created — all on different rows.
To fix this, I ended up consolidating my 3,4, and 5 col grid designs into just one component, and slotted out the section that controlled how many squares to create in one row for the parent page to handle.
It was going pretty good up until this point, when all of a sudden the terminal tab running my backend decides to go haywire and refuse to allow any API calls to be made. A very stressful hour later, I get everything back under control and realized that I’d deleted the login/registration pages when transferring files over so Auth tokens weren’t present. I’m not exactly sure how I was serving up data before this happened, but Authentication was something I dealt with nearly a year ago so my understanding is pretty shaky as of right now. It was the one part I hoped would hold up. Oh well.
Adding the login page back and using it to login luckily made everything work again.
Next up were the public ‘Community’ page and the resulting profile view for that person. The frontpage was pretty much the same as the Listings grid, with the exception of each square being taller in height.
