Setting Up the Frontend: Frameworks, Design, and Structure

After all the hustle and bustle of setting up the project, dealing with pipelines, and configuring self-hosted agents, I decided to treat myself to some light work—planning the website’s design.

Okay, maybe I exaggerated when I said it was light work. There was actually a lot to decide. Which frontend framework should I use? Which CSS framework should I pair it with? I’m by no means skilled at frontend development (yet), so I wanted something that wouldn’t take too long to get up and running. I was familiar with Angular, but I wanted to learn something new. After some research, I found that the internet’s unanimous verdict was that Vue.js is the most beginner-friendly frontend framework.

I wanted a good-looking website but also needed to start with the basic building blocks as quickly as possible. That meant I had to decide on a CSS framework too. It came down to a 50/50 choice between BootstrapVue and Vuetify. Since I’m not a fan of Material Design, the decision was made—Vue.js and BootstrapVue for my frontend—both of which I had zero experience with.

I started by prototyping the website design by hand. I find that ideas come to me more easily when I can visualize them on paper. I could have used a design tool like Figma, but I had a feeling my first design wouldn’t be final, so I just needed a rough structure. I sketched out a home page and how a post would look when opened. While this was nowhere close to the final version, it gave me a sense of direction. One thing I did differently was starting with mobile-first designs—this way, responsive design principles were already incorporated from the beginning.

With that done, I was ready for yet another tedious setup process: installing Vue.js and BootstrapVue on my system. First up—Node.js. Pretty straightforward installation. Next was Vue.js, which had very detailed instructions on its official website. I was finally ready to set up my project. Running npm create vue@latest kicked things off.

Then came quiz time:

• Would you like to add JSX support?
• Would you like to add Pinia?
• Would you like to add Vitest?

It felt like I was ordering at a food stand without knowing what I wanted. I found myself looking up every option before making a decision. That said, I do see the benefit of these prompts now—they help prevent future headaches. The most important one was adding Vue Router from the start. After making my choices, I was ready to run my UI.

Then I hit a problem—Vue 3 doesn’t have official support for either BootstrapVue or Vuetify. Back to research mode. This time, I landed on a new option: Tailwind CSS. I figured I might as well give it a go. Unlike BootstrapVue and Vuetify, Tailwind doesn’t provide pre-built components, but since styling was my main concern, I decided to roll with it. Setting up Tailwind was easy, but getting the IntelliSense plugin for VS Code to work was a nightmare. I kept getting linting errors, and autocomplete wasn’t working. The fix? Nuking node_modules and running npm i again. With that done, I was finally ready to start building components.

---

Setting up the project

I was super pumped to start seeing some visual progress, but before jumping into coding components, I wanted to structure my Vue.js project properly. The default scaffold included folders for Icons, Views, and Components. I kept that structure but added more nuanced naming conventions. Here’s how I structured my components:

• View: Represents a full page on the website (e.g., HomePageView for the home page, AboutPageView for the about page).
• Icons: Exactly what it sounds like—different icons used throughout the project.
• Component: A reusable piece of code, further broken down into:
  • ViewComponent: Only displays data (e.g., PostDetails, PostThumbnail).
  • ControlComponent: Composed of multiple ViewComponents (e.g., PostSummaryItem, which contains PostDetails and PostThumbnail).
  • ContainerComponent: Composed of multiple ControlComponents (e.g., PostListContainer, which contains a list of PostSummaryItem components).

I’ll admit, this structure might be overkill for a small project, but setting up a strict organization from the beginning makes it much easier to scale in the future.

This approach also helped me feel like I was making real progress. Starting with a small ViewComponent and seeing tangible results made the project feel more manageable.

Remember:

“

Small victories are still victories.

”