We'll take a little break from trying to refine my personal portfolio and move on to a real project I've actually agreed to create for a client - a website for a local heavy music festival for next summer. I've already bought the domain and hosting for the site but I'm nowhere near ready to deploy it. I've set myself a goal for the site to be ready before / at Christmas. I think that's a good goal, about half a year before the festival actually takes place.
The two major features of the website will be responsiveness and the site being multilingual - visitors will be able to choose between Estonian, Finnish and English. The site should have basic information about when and where the festival takes place, information about the lineup, some info about the festival itself (when was the first time it took place, etc), some info about the venue it takes place in, a list of sponsors, a little FAQ section and of course where to buy festival passes / tickets. Not in that exact order.
At first I thought I'd be able to build it all vanilla - that is, using basic HTML, CSS and JS, no frameworks, but with the localization feature I understood it might get a bit too difficult. Last month I took part in a Vue.js course that also touched a bit of Sass and I'm thinking this project is perfect for practicing those skills.
I actually started working on this project before the Vue course but didn't make it too far. I made a responsive navbar with a dropdown for changing languages (functionless) and a footer with some contact info and links to social media accounts + some placeholders inbetween.
It was all under a private repo and I last pushed commit to it 29 days ago. A few days ago I started a new repo and will abandon the old one. In the new repo I already created a new Vue CLI project and added the Vue-i18n plugin for localization.
Getting started
I decided to add the multilanguage functionality to the project right from the start so there would be less hassle later on. A little bit of research revealed the best way of implementing localization on a Vue project is the Vue-i18n plugin made by Kazuya Kawaguchi. The link I provided in the last sentence has all kinds of useful information about the plugin aswell as a guide for getting started, formatting, etc. Unfortunately I'm not that comfortable with Vue projects yet, so I failed to get things working with the official Getting Started guide.
I was on the edge of giving up until after Googling for a while I found what I'd call the best ''... for Dummies'' tutorial yet - ''The Ultimate Guide to Vue Localization with Vue-i18n'' by Mohammad Ashour on Phrase. It's a tutorial based on building a Vue SPA (Single Page Application) mock-up e-commerce storefront specialized in gourmet coffees from around the world. Well, that's not exactly what I'm building but it has some of the features I'm looking for - like a functioning navbar where visitors can choose their preferred language and card components for displaying information (that's how I'm going to display the festival lineup).
Why I really liked Mohammad's tutorial is because he shows people how to do things step by step and explains the purpose and functionality of different files, folders and functions in detail.
Yesterday I got as far as to the ''Basic Translation Messages'' section in the tutorial, meaning I've got the localization feature working, the language chooser in the navbar working and the site automatically being in the language based on the visitor's browser settings (if the visitor's browser is in Estonian, the site is in Estonian, if it's in Finnish, the site's in Finnish, if it's in English, it's in English... any other languages should also fallback to the site being in English).
(Pardon me if the Finnish is wrong, I don't really speak Finnish. Probably going to use the help of Google Translate, Finnish-speaking people on Discord and the client I'm making the site for to provide the right Finnish translations after on).
I've also created a Cards component that has Card components looped in it using the v-for directive. The cards get information from a .json file which is an array of objects with the values of (band) name, genre, country (which I'll actually remove because this year they're all local) and imgUrl (which I'll provide later on).
As for the CSS (later probably changing to SCSS), I ''copied'' (typed along, not copy-pasted) all the styling he has in his tutorial for starters so things are far from how they'll look like in the end.