News banner
News author avatar
Kasperi Pohtinen | WWW/IT representive3/28/2024, 7:11 PM

A new era of Luuppi's website - April Fool's joke that turned out to be true

Content updated: 3/28/2024, 7:11 PM

"The new website is coming soon" - a statement that has surely left even the most optimistic Luuppi members disappointed over the years. However, we have finally reached some sort of culmination point, and the new webpage is now available for everyone to tinker with in public alpha testing. In perfect spirit, the release was made in the form of a little April Fools' joke, as it would have been a great injustice to let this fine moment pass without celebration! Although the development of the new website is well underway, we can't quite pull the old webpage off life support just yet; it will still need to hang in there for a while longer.

jekutus.png
In the picture, you can see a glimpse of the webpage that fooled Luuppi members on April Fools' Day, April 1st, 2024, during the release of the new website.

Mandatory disclaimer

The alpha version of the website is INCOMPLETE, and there are likely to be bugs! For example, the new event registration system is still entirely unfinished. The rationale behind the early release is to establish a faster feedback loop, enabling us to improve the website as quickly as possible. Therefore, please report any issues you encounter with the new site. Instructions for reporting bugs can be found at the end of the article!

What new

The new design

It goes without saying that when the entire website was overhauled, some sort of facelift was in order. The centerpiece of the new website has been improved mobile support, as using the old website on a phone was at best subpar. This is particularly evident in the event calendar, which features a mobile calendar layout that is entirely different from the desktop view. Stylistically, the new website aims to be relatively simple, making it easy for users to find the information they need.

Company collaboration & LuuppiSanomat

With the new website launch, the old company collaboration pages and LuuppiSanomat will be integrated into the online environment, no longer remaining separate entities. This will hopefully make them easier to find and thereby enhance their visibility! LuuppiSanomat will now be published a few times a year as an online magazine, accessible on the website once the first issue is released, and physical copies will also be printed. The more familiar "blog format" akin to the old LuuppiSanomat will still exist alongside the new LuuppiSanomat, referred to as "news" in the new online environment.

Open-source

Up to this point, the WWW/IT team has primarily been responsible for the development of Luuppi's website. With the new website, the responsibility still mainly rests with the web team, but now the website's source code is publicly available. This means that anyone can view the code and propose changes to it. The goal is to share the responsibility away from the web team and give everyone the opportunity to contribute to the development of the website - after all, we are all "coders" in some way. In the future, you may not necessarily need to approach the web team if you want to make improvement suggestions for the website.

Furthermore, error tracking for the website will also move to a public platform, and GitHub's "Issues" tab will be utilized for this purpose. On this forum, anyone can create an "Issue" for a bug or a new feature request, and we will review and implement them to the best of our ability.

Content management system

Updating content on the old website has been somewhat challenging, and there is a lot of outdated information that nobody has bothered to update. Especially when switching the language of the site to English, some pages may reveal legacy content straight from the early 2000s.

This was one particularly significant issue that we wanted to address in the implementation of the new website. Behind the new website is an open-source content management system called Strapi, through which almost all of the website's content can be updated easily and quickly. Strapi also supports multiple languages quite well, making the maintenance of English content much smoother!

New user management

The new webpage's user management goes through Microsoft's Entra ID. However, this change doesn't require a Microsoft account; all users are local. So, you can still use your own email address to create an account. With the new webpage, anyone can register, meaning you no longer need to be a member of Luuppi to create a user. This enables easier registration for events like 'kaverisitsit' in the future.

Note that existing users from the old webpage won't work on the new one. If you want to log in to the new webpage, you'll need to register a new user. Later on, there will be an option to link your old Luuppi account to the new one through a separate migration process, connecting your existing Luuppi membership.

During the Alpha phase of the new webpage, logging in is unnecessary as event registration, among other things, still goes through the old website. The membership registry also relies entirely on the old webpage for now. These will gradually be migrated to the new webpage, and we'll keep everyone updated on the changes."

A brief peek under the hood

The new website is built on Next.js, which I consider to be a fairly mature meta-framework for React. With Next.js, you can conveniently handle both server-side and frontend logic in the same package, eliminating the need for a separate backend. Next.js also provides excellent support for server-side rendering (SSR), helping to avoid excessively large JS bundles.

For styling the UI, we've used the somewhat controversial Tailwind CSS, supplemented partly by DaisyUI, which offers 'components' built on top of Tailwind.

Luuppi utilizes Azure's public cloud, leading to the decision to use Entra ID for user management. After some minor battles, Entra turned out to be a reasonably good solution, saving us the trouble of maintaining our own user management system.

This article won't delve further into the technical choices. For more information, feel free to check out the project's public GitHub repository if you're interested.

weba.png
In the picture, there's a small snippet of the architecture for the new website :D

Mitä seuraavaksi?

Kuten yllä jo osittain sivuttiin, on uusi weba taustajärjestelmien osalta aika raakile. Seuraavat isot askeleet projektissa on toteuttaa uusi tapahtumailmoittautuminen, sekä saada vanhojen Luuppi-käyttäjien migraatiovaihe toimimaan, niin että jäsenrekisterin osalta siirtyminen uuteen webaan olisi myös mahdollista.

So, the old website remains as Luuppi's "main page," under the luuppi.fi domain, until the new one reaches a point where it can replace the old website's key functionalities, primarily addressing the aforementioned shortcomings. Hopefully, these will be addressed at some point in the future.

If you 🤠🫵 happen to be proficient in Next.js or would like to learn it, we invite you to contribute to the development of this new open-source webpage. Every helping hand is more than welcome!

github-repositorio.png

GitHub-reposity

GitHub-organization

Something to ask?

Something to ask about newwebstie? You can drop a question directly to me via Telegram at @KasperiP, or send an email to the whole web team at webmaster@luuppi.fi. If it's a feature request or an issue, feel free to open it directly in the GitHub repository.

Partners