A modern, responsive real estate platform built with React and Vite, featuring property listings, agent profiles, user authentication, and advanced search functionality. This project demonstrates proficiency in modern front-end development, API integration, and professional Danish real estate market practices.

Din Mægler (Your Real Estate Agent) is a comprehensive real estate web application that connects property buyers with real estate agents. The platform offers an intuitive interface for browsing properties, searching by location, viewing detailed property information, and connecting with professional agents.

• 🏠 Property Listings: Browse and search through available properties
• 🔍 Advanced Search: Real-time search with filtering by location and property details
• 👥 Agent Profiles: View detailed information about real estate agents
• 🔐 User Authentication: Login and registration system with form validation
• 📱 Responsive Design: Mobile-first approach with modern UI/UX
• 📧 Newsletter Subscription: Keep users updated with market news
• 📄 Sales Process Guide: Educational content about the buying process
• 🏢 Company Information: About us and contact pages

• React 19.2.3 - Modern React with latest features
• Vite 6.0.5 - Fast build tool with HMR
• React Router DOM 7.1.5 - Client-side routing with file-based routing
• SCSS/Sass 1.83.4 - Advanced styling with variables and mixins

• React Hook Form 7.54.2 - Performant form handling
• Yup 1.6.1 - Schema-based validation
• @hookform/resolvers 5.2.2 - Form validation integration

• React Icons 5.5.0 - Comprehensive icon library
• Google Fonts (Roboto) - Professional typography

• ESLint 9.17.0 - Code linting with React-specific rules
• Vite Plugin Pages 0.33.2 - File-based routing system
• Vite Plugin ESLint - Real-time linting during development

src/
├── components/           # Reusable UI components
│   ├── home/            # Homepage components
│   ├── boliger/         # Property listing components
│   ├── details/         # Detail page components
│   ├── maeglere/        # Agent components
│   ├── login/           # Authentication components
│   ├── register/        # Registration components
│   └── kontakt/         # Contact components
├── pages/               # Route components (file-based routing)
├── hooks/               # Custom React hooks
├── utils/               # Utility functions (API calls)
├── style/               # SCSS stylesheets (modular structure)
└── App.jsx              # Main application component

• Node.js (v18+ recommended)
• npm or yarn package manager

1. Clone the repository

   git clone https://github.com/GR0UD/DinMaegler.git
   cd DinMaegler

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open in browser

   • Navigate to http://localhost:5173

The application integrates with a REST API hosted at https://dinmaegler.onrender.com for:

• Property listings and details
• Agent information
• User authentication
• Search functionality

API Architecture:

• Centralized API utility in src/utils/API.js
• Error handling and response validation
• Async/await pattern with proper error boundaries

• Typography: Roboto font family with responsive sizing
• Layout: CSS Grid and Flexbox for responsive layouts
• Components: Modular SCSS architecture
• Responsive: Mobile-first design principles

• Professional real estate industry styling
• Danish market-focused design language
• Accessible color contrast ratios

• Hero section with property search
• About company section
• Featured apartments
• Newsletter subscription
• Agent showcase
• Sales process explanation

• Property listing grid
• Search and filter functionality
• Property cards with key information

• Agent profile listings
• Individual agent detail pages
• Contact information

• Login (/login) - User authentication with validation
• Register (/register) - New user registration
• Form validation with Yup schemas

• Contact form with validation
• Company information

• ESLint Configuration: React-specific rules and best practices
• Error Boundaries: Graceful error handling throughout the app
• File-based Routing: Automatic route generation with Vite Pages
• Modern JavaScript: ES6+ features and React best practices

• Vite Build Tool: Fast development and optimized production builds
• Code Splitting: Automatic route-based code splitting
• Suspense Boundaries: Loading states for better UX
• Asset Optimization: Optimized images and fonts

• Hot Module Replacement: Instant updates during development
• Path Aliases: Clean imports with @styles alias
• TypeScript Ready: Configured for TypeScript migration
• Modern Tooling: Latest versions of all dependencies

• Danish Language: Fully localized for the Danish market
• Cultural Adaptation: Danish real estate terminology and practices
• Market-Specific Features: Tailored to Danish property market needs

• 13+ React Components: Modular and reusable architecture
• 7 Main Pages: Complete user journey coverage
• 20+ SCSS Modules: Organized styling architecture
• Modern Tech Stack: Latest stable versions of all dependencies
• Production Ready: Configured for deployment

• ✅ React Development: Functional components, hooks, context
• ✅ Modern JavaScript: ES6+, async/await, modules
• ✅ Responsive Design: Mobile-first, CSS Grid, Flexbox
• ✅ Form Management: React Hook Form, validation, UX

• ✅ Component Architecture: Modular, reusable components
• ✅ Code Organization: Clear folder structure and naming
• ✅ API Integration: RESTful services, error handling
• ✅ Build Tools: Modern development workflow

• ✅ Project Planning: Feature-complete real estate platform
• ✅ UI/UX Design: User-centered design principles
• ✅ Market Understanding: Danish real estate industry knowledge
• ✅ Quality Assurance: Linting, validation, error handling

The application is production-ready and can be deployed to:

• Vercel (Recommended for Vite projects)
• Netlify
• GitHub Pages
• AWS S3/CloudFront

Build command: npm run build
Output directory: dist/

This project showcases expertise in modern frontend development with a focus on:

• Clean, maintainable code architecture
• User experience and responsive design
• Professional development practices
• Real-world application development

Perfect for roles in: Frontend Development, React Development, Full-stack Development, UI/UX Development

Live Demo: View Project
Developer: Available for frontend development opportunities