Introduction MabiDay is an exciting new project that showcases the power of modern web development technologies in creating a responsive and user-friendly interface for interacting with the recently released Mabinogi API. This technical blog post will delve into the architecture and key features of MabiDay, highlighting how it utilizes Next.js 14, shadcn UI components, Vercel hosting, and Bun as a runtime to deliver a seamless user experience. Tech Stack Overview Next.js 14: The latest version of the React framework, providing server-side rendering, routing, and API routes. shadcn UI: A collection of re-usable components built with Radix UI and Tailwind CSS. Vercel: A cloud platform for static and serverless deployment, offering seamless integration with Next.js. Bun: A fast all-in-one JavaScript runtime, used here as an alternative to Node.js. Key Features 1. Responsive Design MabiDay employs a mobile-first approach, ensuring that the application is fully functional and aesthetically pleasing on both desktop and mobile devices. This is achieved through: Tailwind CSS for responsive layouts Custom components that adapt to different screen sizes (e.g., sidebar for desktop, dropdown menu for mobile) 2. Real-time API Integration The application fetches data from the Mabinogi API in real-time, allowing users to search for items and view detailed information. Key aspects include: Asynchronous data fetching using fetch API State management with React hooks (useState, useEffect) Dynamic query parameter generation for API requests 3. Advanced Search and Filtering Users can search for items using various criteria: Text-based search for item names Category filtering