# mabiDay: From scratch to launch in 2 hours

[마비데이](https://www.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:

1. User authentication for personalized experiences

2. Real-time updates using WebSocket connections

3. Integration with additional Mabinogi API endpoints

4. 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.

For the site tree, see the [root Markdown](https://slashpage.com/ixtj-dev.md).