Bústaðurinn.is

Stafrænn arkitektúr fyrir sumarhúsið.

A premium SaaS platform for managing shared summer houses. Built with modern tech stack following Scandi-minimalist design principles.

📊 Project Status

Version: 1.2.0
Status: ✅ Production-Ready
Last Updated: 2026-01-01
Deployment: Live on Vercel Pro

Current State

• ✅ Full user authentication and onboarding
• ✅ Complete booking calendar with fairness rules
• ✅ Enhanced calendar UX (pull-to-refresh, date ranges in list view)
• ✅ Mobile-optimized budget interface with responsive layouts
• ✅ Task management system (Kanban board + list view)
• ✅ Shopping list functionality
• ✅ Internal logbook (owner communication)
• ✅ Finance tracking (Budget Planning + Ledger)
• ✅ Real-time weather integration (Open-Meteo)
• ✅ Guest access via magic links
• ✅ Super Admin dashboard with impersonation
• ✅ Mobile-first responsive design with touch-optimized interfaces
• ✅ House image upload and management
• ✅ GPS-based location search (HMS + Google Maps)

---

🏗️ Tech Stack

Frontend

• Framework: React 19.2.0 + Vite 7.2.4
• Language: TypeScript 5.9.3
• Styling: Custom CSS Design System (Scandi-minimalist)
• Icons: Lucide React 0.562.0
• State Management: Zustand 5.0.9
• Routing: React Router DOM 7.11.0

Backend & Services

• Database: Firebase Firestore
• Authentication: Firebase Auth
• Storage: Firebase Storage (house images)
• Email: Resend API
• Maps: Google Maps API + HMS Staðfangaskrá
• Weather: Open-Meteo API (free tier)

Deployment

• Hosting: Vercel Pro
• CI/CD: Automatic deployment from main branch
• Domain: bustadurinn.is

---

🎨 Design System

"Scandi-Minimalist" - Inspired by high-end architectural magazines

Colors

• Base: Off-White/Bone (#FDFCF8)
• Primary: Charcoal Black (#1a1a1a)
• Accent: Warm Amber/Gold (#e8b058)
• Grey Scale: Stone shades (100-900)

Typography

• Headings: Fraunces (Serif) - Elegant, architectural feel
• Body: Inter (Sans-serif) - Clean, readable
• Code/Admin: JetBrains Mono - Technical sections

Principles

• High whitespace for breathing room
• Split-screen layouts
• Sharp corners (minimal border-radius: 0.375rem = 6px)
• Subtle animations (200ms transitions)
• Mobile-first responsive design

---

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Firebase account (Blaze plan for Cloud Functions)
• Google Maps API key
• Resend API key (for emails)

Installation

1. Clone the repository

   git clone https://github.com/thorarinnhjalm/bustadurinn.git
   cd bustadurinn.is
   

2. Install dependencies

   npm install
   

3. Configure Environment Variables

   Create .env.local:

   VITE_FIREBASE_API_KEY=your_api_key
   VITE_FIREBASE_AUTH_DOMAIN=bustadurinn-599f2.firebaseapp.com
   VITE_FIREBASE_PROJECT_ID=bustadurinn-599f2
   VITE_FIREBASE_STORAGE_BUCKET=bustadurinn-599f2.appspot.com
   VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
   VITE_FIREBASE_APP_ID=your_app_id
   VITE_GOOGLE_MAPS_API_KEY=your_google_maps_key
   VITE_RESEND_API_KEY=re_xxxxxxxxx
   

4. Deploy Firestore Rules

   npx firebase deploy --only firestore:rules
   

5. Start development server

   npm run dev
   

6. Open browser Navigate to http://localhost:5173

---

📁 Project Structure

src/
├── components/          # Reusable UI components
│   ├── AdminLayout.tsx       # Super Admin page wrapper
│   ├── DataTable.tsx         # Admin data tables
│   ├── ImpersonationBanner.tsx  # God Mode indicator
│   ├── MobileNav.tsx         # Bottom navigation (mobile)
│   ├── ShoppingList.tsx      # Shopping list widget
│   ├── InternalLogbook.tsx   # Owner communication
│   └── tasks/               # Task management components
├── pages/              # Page components
│   ├── LandingPage.tsx      # Public homepage
│   ├── LoginPage.tsx        # Authentication
│   ├── OnboardingPage.tsx   # New user setup
│   ├── DashboardPage.tsx   # Main user dashboard
│   ├── CalendarPage.tsx    # Booking calendar
│   ├── TasksPage.tsx       # Task management
│   ├── SettingsPage.tsx    # House & user settings
│   ├── GuestPage.tsx       # Magic link guest access
│   ├── SuperAdminPage.tsx  # Admin dashboard
│   └── SandboxPage.tsx     # Public demo (/prufa)
├── lib/                # Core utilities
│   └── firebase.ts          # Firebase initialization
├── hooks/              # Custom React hooks
│   └── useEffectiveUser.ts  # Impersonation support
├── contexts/           # React contexts
│   └── ImpersonationContext.tsx  # God Mode state
├── store/              # Zustand state management
│   └── appStore.ts          # Global app state
├── types/              # TypeScript definitions
│   └── models.ts            # Data models
├── utils/              # Helper functions
│   ├── weather.ts           # Open-Meteo integration
│   ├── hmsSearch.ts         # Iceland address search
│   ├── icelandicHolidays.ts # Holiday calendar
│   └── analytics.ts         # Google Analytics
└── index.css           # Global styles and design system

functions/              # Firebase Cloud Functions
└── src/
    └── index.ts             # Email handlers, etc.

---

This is the beginning of the README. Read the rest at the original. Read the full README ↗