Skip to content

associazionesud.com

Guides, interactive tools and events for students at the University of Messina.

2026Design & development

The official site of Associazione SUD, designed and built from scratch. It is both a guide for first-year students at the University of Messina, with 25 step-by-step guides and 15 tools that run in the browser without sending data anywhere, and the system the association’s members use to manage events, sign-ups, applications and communication without ever touching code.

  • HTML
  • Tailwind CSS
  • JavaScript
  • Supabase
  • PostgreSQL
  • 25

    step-by-step guides

  • 15

    tools in the browser

  • IT/EN

    site translation into English in one click

In detail

Guides for first-year students

4 points1 / 10

  • 25 step-by-step guides in plain language

    Entrance test and OFA, enrolment and renewal, study plan and exams on Esse3, tuition, income-based fees, scholarships and exemptions, 150-hour jobs, Erasmus, ERSU canteen, ATM pass, eduroam Wi-Fi, Microsoft account, DSA support, counselling service, libraries and seat booking.

  • A page for every degree course

    Length, admission, where it is taught and what comes after graduation, with a large search bar and button filters.

  • Pages for every university campus

    With directions on how to get there, plus a first-year dictionary with topic filters and ready-to-send email templates.

  • A guide to representative bodies

    It explains how they work and how voting goes, with the About and Representatives pages.

15 tools that run in the browser

6 points2 / 10

  • Tuition calculator and grade simulator

    Tuition calculator, grade and graduation-mark simulator and grade converter.

  • Tools to organise your studies

    First-year checklist, exam-session planner, study timer, exam countdown and academic countdown with the official deadlines.

  • ERSU scholarship requirements

    A dedicated tool for the scholarship requirements.

  • Campus map with ATM buses

    An interactive map of the campuses with bus lines and timetables, plus the “How to get there” page.

  • Calculations stay on your device

    No personal data is sent to a server.

  • Tools page with search and category filters

Translation system

5 points3 / 10

  • IT/EN button always within reach

    Also in the phone menu, to read the whole site in English.

  • Translation without reloading the page

    It switches on with a click, with no flicker and no page change.

  • The translation service loads only on request

    Anyone who doesn’t use it is not tracked by external services.

  • Names protected from translation

    The association’s name and the representatives’ names are never translated.

  • No unwanted translation

    The phone’s language never triggers it on its own and the service banner is hidden.

Events management

4 points4 / 10

  • An Events page with one card per event

    Each card has the department badge, a default date and a specific date.

  • The nearest event is always first

    When a date expires, the event goes back to its default date.

  • Booking method chosen for each event

    With an internal form on the site or with an external link.

  • The SUD Movie Night film club updates itself

    It follows the date and description of the next screening.

Admin panel for the association’s members

6 points5 / 10

  • Protected members’ area

    Members manage the whole site from here, no technical skills needed.

  • Events

    Create, edit and delete in a few clicks.

  • Applications

    Every request received from the Join Us page, in one place.

  • Forms

    Building forms and reading the responses.

  • Database

    A usage bar, consumption per topic and a pie chart.

  • Visit statistics

Forms built straight from the site

6 points6 / 10

  • A no-code editor to build a form

    Questions, required fields and a seat limit.

  • Forms linked to events

    The “Book” button shows up on the event’s card by itself.

  • Responses to browse like in Google Forms

    A summary with one card per question (pie, bars or columns), a per-question view, single response with arrows and a table list.

  • Filters, sorting and charts

    Filters, sorting by surname and a department chart; responses can be exported to PDF, generated right in the browser.

  • Film-club form with scheduled screenings

    All fields are required and there is a dedicated link with a social preview.

  • Never more sign-ups than available seats

    If a form has a limited number of seats, sign-ups are recorded one at a time: even if many people submit at the very same moment, the limit is never exceeded.

The “Join Us” page

5 points7 / 10

  • An application to join the team

    With engaging copy and a clear confirmation after sending.

  • Always visible

    A coloured button in the menu and footer, a band on the home page and links on the Representatives, Events and Bodies pages.

  • Applicants choose how to be contacted

    On Instagram or on WhatsApp.

  • It keeps receiving contacts

    Every application lands in the admin area, saved with date and time.

  • Consent is recorded

    Consent to data processing is saved with the date and version of the privacy notice, and the database rejects submissions without consent.

Legal compliance

5 points8 / 10

  • Full Privacy and Cookie Policy

    Updated for every new tool, third-party service and feature that handles data.

  • A cookie notice on the first visit

    On every page, with a link to the policy.

  • Limited data retention

    Notice and deletion of form responses after 6 months.

  • A reminder for administrators

    It recalls which data it is lawful to ask for in forms.

  • Legal notes and declared sources

    On pages with official content.

Cybersecurity

8 points9 / 10

  • Permissions enforced in the database (Row Level Security)

    Every table has the bare minimum and only the administrator can write.

  • A limit on login attempts per IP address

    It protects against brute-force attacks.

  • Spam protection without external services

    A small one-time proof-of-work challenge issued by the database, with a minimum wait before sending.

  • A per-minute request limit

    With a clear message for the user.

  • Data checks in the database too

    Format, length and type; validated links and colours; CSV exports protected against formula injection.

  • Security headers and pinned libraries

    CSP, HSTS and nosniff, a security.txt file, pinned library versions with integrity checks.

  • Fonts, icons and map served by the site itself

    No dependence on external services for these elements.

  • Regular security audits

    With fixes applied every time.

Fast and accessible

3 points10 / 10

  • Fast even on a phone

    Compiled Tailwind, local fonts and optimised images.

  • Careful accessibility

    “Skip to content” link, clearly visible focus, respect for “reduce motion” and a correct heading hierarchy.

  • Careful SEO

    Sitemap, canonical URLs and social previews for every page.