Although this was my first project for this course, it was not my first experience with HTML and CSS. I got my degree in computer science and therefore am very familiar with the languages. Despite this, this project was a little difficult for me because it has been so long since I have written plain, vanilla HTML and CSS. Everything I have built since junior year of my undergraduate studies has been with frameworks like React and Node.js paired with Tailwind for styling and Framer Motion for animation. Working on this project helped me refresh lots of fundamentals and better understand the building blocks behind the more complex frameworks I have been using. This project was also a real eye-opener for me as a designer. For the past few months, I have been focused on really understanding and utilizing Figma's auto-layout tool and have become a much better interface designer because of it. This was the first time since this shift that I was able to both create a design in Figma and work on it as a developer. It made me appreciate how much of the design process affects development and how much easier developers' lives become when you have a design system in place. Going forward, I hope to be able to not only continue to build on my skills as a developer, but also continue to grow my understanding of this connection between design and development as I think it will be one of the most valuable skills I can have in my professional career.
Surprisingly, I didn't really enjoy using wordpress. I have used some block editor website building tools before and honestly just prefer to write code. I am much more familiar with it and feel like I have a lot more freedom. Wordpress felt a little outdated and I didn't like the way it handled styling. I think it would be a great tool for someone who doesn't know how to code, but for me, I prefer to write my own code. Maybe with more practice and experience I will come to enjoy it more, but I feel that if I were to use a no-code tool in the future I would opt for tools like Framer Webflow which feel more intuitive and less confusing. For the commerce site in particular I obviously used the WooCommerce plugin. I chose the 2023 Wordpress theme. I liked how minimal the theme was and it matched the vibe I was going with for my store.
View Commerce SiteThe content site used a different wordpress theme - 2021. I really liked how simple the stock wordpress themes are. Simplicity and minimalism is usually the focal point of my designs and this theme was a perfect fit. This site was easy to setup but a little difficult to edit, which again goes back to my previous point about favoring code because of the flexibility.
View Content SiteThis project was a quite the experience to say the least. The idea was to create an application that took in an origin address, destination address, genre, and travel mode from the user and then generate a playlist of the selected genre the exact duration of the trip. Getting the API connected and setting up the general functionality honestly wasn't too bad, I have used both Spotify's and the Google Maps API here and there a few times so no real issues there, but I encountered a laundry list of of errors and issues when setting up the nginx server to handle authentication and authorization on the web. Working locally, it was fairly straight-forward handing callbacks and authentication, but the server proved real issues. Acquiring an SSL Certificate was where the project hit a stand-still. No matter what change I made, DNS redirects I added, or permissions I added to the server, it failed every time. Earlier this morning, I made the decision to simplify everything and instead of having the playlists added to each users' account, the program would simply spit out the time-bounded playlist in the browser. I was able to shift everything over to the client-side and ditch the server which made things a lot easier. The only downside to this is that only the accounts attached to the developer dashboard can utilize the site while I wait for approval from Spotify to move out of developer mode. Despite this, I am still very proud of what I was able to create in such a short timeframe. I was able to utilize the Shadcn/ui component library for the first time and I really enjoyed working with it. It made the frontend very easy. I also made use of Framer-motion and Tailwind-CSS to streamline animation and optimize the styling. Below are some images highlighting my successes (and roadblocks) as well as a glimpse at some of the codebase.
