Academic — Exam Project 2
Holidaze Booking Platform
December 2024
A comprehensive accommodation booking platform built with React and TypeScript, featuring dual-role functionality for both customers seeking vacation rentals and venue managers wanting to list their properties. This project demonstrates advanced frontend development skills with modern technologies and best practices.
Holidaze main interface showcasing the modern booking experience with search filters and venue listings.
Technical Implementation
Frontend
- React 18 with modern hooks
- TypeScript for type safety
- Tailwind CSS for styling
- React Router 6 for navigation
Development Tools
- Vite for fast development
- Git & GitHub for version control
- GitHub Pages deployment
- Responsive design principles
API Integration
- Noroff API v2 integration
- JWT authentication
- CRUD operations
- Real-time data updates
Key Features
Advanced Search & Filtering
Comprehensive search functionality with filters for location, price, amenities, and availability dates.
Dual User Roles
Separate interfaces for customers (booking venues) and venue managers (listing properties).
Interactive Booking System
Calendar integration for date selection, availability checking, and booking confirmation.
Responsive Design
Mobile-first approach ensuring seamless experience across all devices and screen sizes.
Development Process
Planning & Design Phase
Started with comprehensive user story mapping and wireframing using Figma. Created detailed user personas for both customer and venue manager roles, which helped guide the dual-interface design decisions.
Key Improvement: Enhanced User Flow
Original approach: initially designed a single interface trying to accommodate both user types.
Improvement: after user feedback, redesigned with role-specific dashboards and navigation, resulting in better task completion rates.
Technical Implementation
Built with React and TypeScript, focusing on component reusability and type safety. Implemented custom hooks for API calls and state management, and used Context API for global state like authentication and favourites.
Key Improvement: Performance Optimisation
Challenge: initial version had slow loading times due to large image files and excessive API calls.
Solution: added image optimisation, lazy loading, and smart caching strategies, reducing load time significantly.
Post-Development Enhancements
After receiving instructor feedback, I implemented several key improvements to enhance both functionality and user experience.
Improvements Made
Accessibility: added proper ARIA labels, keyboard navigation, and high contrast mode support.
Error Handling: implemented comprehensive error boundaries and user-friendly error messages.
Loading States: added skeleton screens and loading indicators for better perceived performance.
Mobile Optimisation: enhanced touch interactions and improved mobile navigation patterns.
Challenges & Solutions
Complex State Management
Challenge: Managing complex state across multiple user roles and booking flows.
Solution: Implemented React Context for global state and custom hooks for component-specific logic, creating a clean separation of concerns.
API Integration Complexity
Challenge: Working with multiple endpoints and handling authentication across different user roles.
Solution: Created a centralised API service layer with automatic token refresh and error handling, improving reliability and maintainability.
Design Consistency
Challenge: Maintaining design consistency across different user interfaces while keeping them distinct.
Solution: Developed a comprehensive design system with reusable components and consistent styling patterns using Tailwind CSS.
Planned Enhancements
Real-time Notifications
Implement WebSocket connections for instant booking confirmations and venue updates.
Messaging System
Add direct communication between guests and hosts for better customer service.
Review System
Implement comprehensive rating and review functionality for venues and hosts.
Analytics Dashboard
Advanced analytics for venue managers to track performance and optimise listings.