This project is a digital mock-up of The Leaky Cauldron, the iconic pub and inn from the Harry Potter universe, designed to emulate a restaurant website where users can explore an interactive menu featuring traditional British food items, view breakfast, lunch, and dinner options, and discover various beverage offerings. Built with Vue.js, Bootstrap, SCSS, and TypeScript, it demonstrates a responsive, immersive restaurant layout. The main goal was to practice building a fully functional restaurant-style site using Vue.js, with Bootstrap for rapid layout, SCSS for modular styling, and TypeScript for type safety and improved code reliability.
Experience the features of this project directly in the browser by visiting the live demo here
- Vue.js: To structure the application and handle component-based interactivity.
- Bootstrap: For the responsive layout and pre-designed UI components.
- SCSS: For custom, modular styling on top of Bootstrap.
- TypeScript: To add type checking and ensure more robust code.