Website
Gaarden Ejendomme
Drej bygningen, og se hvilke lejligheder der er ledige. Udlejeren retter ét felt, og modellen ved det fem minutter senere.
Besøg gaardenejendomme.dk- 931ms
- Til det største billede er tegnet på forsiden. Googles grænse for god er 2.500.
- 0,00
- Intet på siden hopper på plads undervejs. Bedst mulige score.
- 54
- Lejemål på fire ejendomme, holdt opdateret fra ét sted.
- 5min
- Fra en rettelse i systemet til den står på siden. Uden udvikler.
Opgaven
Gaarden Ejendomme er en familieejet udlejer i Horsens og omegn. Fire ejendomme, 54 lejemål: rækkehuse i Gedved, Rask Mølle og Østbirk, og en etageejendom på Rådhustorvet midt i Horsens.
En udlejers hjemmeside har to problemer, og de trækker hver sin vej. Den skal altid vise, hvad der rent faktisk er ledigt. Ellers ringer folk om en lejlighed, der blev udlejet i sidste uge. Og den skal kunne forklare, hvilken bolig der er hvilken, når nitten lejligheder ligger i den samme bygning og ser ens ud på et billede.
- Listen bliver forkert af sig selv
- Ledige boliger ændrer sig hele tiden. En side, der skal opdateres af den, der byggede den, er en side, der er forkert inden for en måned.
- Nitten lejligheder, samme facade
- På en etageejendom siger et billede ikke, hvilken lejlighed der er til leje, eller hvor i bygningen den ligger.
- Ét felt, mange steder
- Ledig eller udlejet skal stå på oversigten, på ejendommen, på boligens egen side og i tælleren. Skrevet fire steder bliver det fire forskellige svar.
- Udlejeren er ikke udvikler
- Den, der ved, at lejligheden blev lejet ud i går, skal kunne rette det selv, uden at åbne kode og uden at sende en mail.
Løsningen
Rådhustorvet 15 ligger på siden som en bygning, man kan dreje. Peg på en etage, og lejemålene på den træder frem. Klik på en lejlighed, og du står på dens side. Ved siden af modellen kører den samme liste som tekst, delt op efter sal, med en tæller foroven: tre ledige af nitten.
Under det hele er der ét felt. Status på et lejemål står ét sted i redigeringssystemet, og derfra farver den modellen, sætter mærket i listen, tæller ledige og afgør, om boligen overhovedet står på Ledige boliger. Udlejeren retter ét felt, og alle fire steder følger med.
- Bygningen som model, ikke som billede
- Klik rammer den lejlighed, musen faktisk peger på: markøren sendes som en stråle ind i 3D-scenen og finder den flade, den træffer. Ikke klikbare felter lagt oven på et billede, som skal tegnes om, hver gang modellen drejer.
- Rækkehusene tegnet op på luftfoto
- Hvor der ikke er etager at skille ad, ligger boligerne som optegnede polygoner oven på et luftfoto: hver bolig sit omrids, i koordinater der følger billedet, uanset hvor stor skærmen er.
- Fem minutter fra rettelse til side
- Siderne er bygget færdige på forhånd og fornyer sig selv hvert femte minut. Besøgende får en statisk side i fuld fart, og udlejeren venter aldrig på en udrulning.
- Redigeringen ligger på sitet
- Sanity Studio kører på selve domænet, så udlejeren retter sine boliger det samme sted, som de står. Søgemaskinerne er holdt ude af det med en linje i robots.txt.
- Modellen hentes én gang
- 3D-modellen ligger på Cloudflare R2 og bliver i browserens cache. Den koster ved første besøg og er gratis derefter.
- Låst ned som standard
- Siden må ikke lægges i en ramme på et fremmed domæne, filtyper må ikke gættes, og alt kører tvunget over HTTPS, også på underdomæner.
Bygget af
Valgt til den ene opgave: at en udlejer skal kunne passe sin egen side.
- Next.js og React
- Selve siden, bygget færdig på forhånd og fornyet hvert femte minut.
- Sanity
- Boliger, priser, billeder og status. Redigeringen ligger på domænet, og billederne leveres fra Sanitys eget billednetværk.
- Three.js
- 3D-bygningen, indlæst som model og gjort klikbar med en stråle fra markøren.
- Cloudflare R2
- Objektlager til 3D-modellen og de store luftfotos.
- Vercel
- Hosting og udrulning, serveret fra cachen tættest på den, der kigger.
- Struktureret opsætning
- Sitemap over alle 31 sider, styret robots-fil og delebilleder, så hver bolig kan findes og deles for sig.
Forløbet
Design, kode og drift lå samme sted. Det tunge i dette projekt var ikke 3D'en, men modelleringen af indholdet: at nå frem til, at status er ét felt og ikke fire, og at bygningen og listen skal læse fra det samme. Den beslutning er taget før første linje kode, og den er grunden til, at siden ikke er blevet forkert siden.
Arbejdet blev leveret løbende på et rigtigt link. Da systemet stod, blev det afleveret ved, at udlejeren selv rettede en bolig fra ledig til udlejet og så den skifte fire steder på fem minutter.
Hvad det betyder
- Siden bliver ikke forkert
- Den, der ved, at boligen er udlejet, er også den, der retter det. Der er ingen udvikler i vejen og derfor ingen grund til at lade være.
- Færre opkald om det samme
- Ledige boliger står med antal, størrelse og pris, og hvad der ikke er ledigt, kan man se med det samme. Telefonen ringer om de boliger, der rent faktisk kan lejes.
- En lejer kan se sin egen lejlighed
- I stedet for at gætte ud fra en facade kan man dreje bygningen, finde etagen og se præcis hvilken bolig, der er til leje, og hvad den koster.
- Hver bolig kan deles for sig
- Hvert lejemål har sin egen adresse med eget delebillede, så et opslag eller en mail lander på boligen og ikke på forsiden.
Tallene er målt på den kørende side den 2. september 2026 med et performance-spor i Chrome: 931 ms og 0,00 på forsiden, 1.165 ms på siden med 3D-modellen. De fem minutter er sidens egen fornyelsesperiode, læst i svaret fra serveren. Antal lejemål er talt på de fire ejendomssider.