Harry Potter: The Wizarding World Encyclopedia
My role. FrontEnd Developer
Hogwarts Explorer is a dynamic, interactive web application designed for fans of the Wizarding World. The project is an API-driven encyclopedia that allows users to discover characters, filter them by houses, search for favorites, and view detailed information. It demonstrates a professional approach to building multi-page applications using modern JavaScript, modular SCSS, and efficient data handling.
Project Overview & Tech Stack
The Task
The goal was to create an engaging, fast, and visually appealing character database that feels like a part of the Harry Potter universe. The challenge was to handle a large dataset from an external API while maintaining high performance and clean code.
Key requirements included:
- Implementing a robust search and filtering system (by House).
- Creating a multi-page structure with dynamic routing for character details.
- Achieving a high level of UI/UX polish using advanced SCSS techniques.
Interface Preview
A look at the main screens and key UI flows across the product.
User Interface & Key Features
The Result
I developed a high-quality FrontEnd application with a focus on performance and maintainability:
- Dynamic Data Rendering: Developed a custom engine in Vanilla JavaScript to fetch data from the HP-API and dynamically generate content, reducing initial load time.
- Scalable Styling: Used SCSS with a modular structure, which allowed for easy management and consistent UI components across all pages.
- Advanced Interactivity: Implemented criteria filtering, providing users with an instant response without reloading the page.
- Adaptive Layout: Developed a mobile-first responsive design that looks magical on any screen size, from small smartphones to large monitors.
See it live
Open the deployed project and explore the full experience.