MabiDay: Leveraging Next.js 14 and Modern Web Technologies for Mabinogi API Integration - Technical

Home

a shaneful place

Blog

Technical

Food Recipes

Summaries

About

Technical

MabiDay: Leveraging Next.js 14 and Modern Web Technologies for Mabinogi API Integration

Shane

Oct 20, 20243d

마비데이

실시간 정보는 마비닷!

mabi.day

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

Price range filtering (minimum and maximum prices)

4. Interactive Data Display

The fetched data is presented in an interactive table format:

Sortable columns for easy comparison

Expandable rows for detailed item information

Pagination for handling large datasets

5. Dark Mode Support

MabiDay includes a dark mode feature, enhancing user experience in low-light environments:

Tailwind CSS classes for dark mode styling

React context for managing theme state

Code Highlights

Efficient Data Fetching

const fetchItems = async () => {
  try {
    setIsLoading(true);
    const queryParams = new URLSearchParams({
      queryItem: queryItem,
      auction_item_category: queryCategory,
      minPrice: String(minPrice),
      maxPrice: String(maxPrice),
    });
    const response = await fetch(`/api/items?${queryParams.toString()}`);
    if (!response.ok) throw new Error(`Failed to fetch items: ${response.statusText}`);
    const auctionItems = await response.json();
    setItems(auctionItems);
    setIsLoading(false);
  } catch (error) {
    console.error('Failed to fetch items:', error);
    setIsLoading(false);
  }
};

This function demonstrates how MabiDay efficiently constructs API requests with dynamic parameters and handles the response, including error cases.

Responsive UI Components

{/* Sidebar PC */}
<div className="col-span-1 row-span-4 hidden rounded-md md:block">
  {/* ... */}
</div>

{/* Sidebar Mobile */}
<div className="col-span-4 row-span-1 block rounded-md md:hidden">
  {/* ... */}
</div>

This snippet showcases how the application uses Tailwind CSS classes to create responsive layouts, hiding and showing components based on screen size.

Conclusion

MabiDay serves as an excellent example of how modern web technologies can be leveraged to create powerful, responsive, and user-friendly applications. By utilizing Next.js 14, shadcn UI components, Vercel hosting, and Bun runtime, the project delivers a seamless experience for Mabinogi players interacting with the game's new public API.

As the project continues to evolve, potential future enhancements could include:

User authentication for personalized experiences

Real-time updates using WebSocket connections

Integration with additional Mabinogi API endpoints

Performance optimizations for handling larger datasets

The combination of cutting-edge technologies and thoughtful design makes MabiDay a promising platform for Mabinogi enthusiasts and a showcase of modern web development practices.

Subscribe to 'ixtj-dev'

Are you passionate about SaaS innovations, health science breakthroughs, or looking for delicious and nutritious diet recipes? Subscribe to my blog today!