Bygg X
Bygg X är en egenbyggd demo, inte ett kundcase. Den använder den gemensamma React 18 + TypeScript + Vite 5.4 (SWC) SPA-stacken med Tailwind CSS 3, shadcn/ui, React Router v6, TanStack Query, react-hook-form, zod och Vitest. Typografi är Inter via Google Fonts. Animation ligger kvar på CSS och Tailwind (ingen Framer Motion). Strukturerad data läggs som JSON-LD i index.html. Sidor: start, tjänster, offert, projekt, nyheter, om och kontakt. Produktionsoutput är statiska filer via Nginx i en multi-stage Docker-image.
TL;DR
En React + Vite-demo för byggföretag med Inter, JSON-LD i index.html och statisk leverans via Nginx i Docker. Resultat: En live-demo för bygg med tydliga arbetsområden, offertflöde och schema-redo HTML-standarder.
Konceptwebb
Utvecklingstid
Solo
Samarbete
Lyckat
Resultat
100%
Kundnöjdhet
Utmaningen
Byggföretag behöver en sajt som snabbt bygger förtroende och gör det lätt att be om offert, utan tung animationsstack eller egen backend.
Min lösning
Jag byggde en React SPA på Vite 5.4 med SWC, Tailwind och shadcn/ui, höll motion lätt med CSS och lade till JSON-LD för tydligare entity-signaler. Sajten levereras som statiska filer bakom Nginx i Docker.
Tekniska funktioner
Byggt med moderna tekniker och beprövade metoder för stabilitet och prestanda
Teknikstack
Moderna tekniker och ramverk för bra prestanda
Säkerhet och kvalitet
Byggt med säkerhetsrutiner och kvalitetssäkring
Ren arkitektur
Tydlig kodstruktur enligt branschpraxis
Prestanda
Optimerat för snabbhet, skalbarhet och användarupplevelse
Nyckel funktioner
Förtroendefokuserad layout för bygg och hantverk
Rutter för tjänster, offert, projekt och nyheter
JSON-LD strukturerad data i index.html
Inter-typografi via Google Fonts
Bara CSS- och Tailwind-motion (ingen Framer Motion)
Statisk build via Nginx i Docker
Projekt galleri
Utvalda skärmdumpar från projektet.
Tekniker
Relaterade artiklar
Projektets resultat
Bygg- och hantverksföretag kan granska en live-demo som visar tjänstestruktur, offertvägar och en underhållbar frontend-leverans innan de startar ett fullt projekt.