associazionesud.com
Guides, interactive tools and events for students at the University of Messina.
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
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
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
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
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
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
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
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
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
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
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.
Other projects:Sistema di Votazione per Unime's Got TalentGestore SUD Movie NightVoicePortal
Got a project in mind?
Automate a process, rebuild a site, build from scratch. Write me two lines, I’ll reply within 24 hours.