Recommended for people who like airports and airplanes.

地図上の◍は日本の空港やヘリポートです。 ◍にmouseをホバーすると空港名が表示されます

1. 地図上の◍をクリックする

• 直行便のある空港に📍がたちます

2. 📍をクリックする

• 空港名が表示される
• 就航している航空会社が表示されます

3. 航空会社のリストの＋をクリックする

• ICAOコード、IATAの表示
• 公式サイト、航空会社の所有機種のサイトへのリンクの表示

◍ on the map indicates airports and heliports in Japan. Hover mouse over the ◍ to display the airport name.

1. Click on any ◍ on the map.

• The airport with direct flights will have a 📍.

2. click on the 📍.

• The name of the airport will be displayed.
• The airlines that serve the airport will be displayed.

3.Click on + in the list of airlines

• Display ICAO code, IATA
• Display of links to the official website and the website of the aircraft type owned by the airline

This is a Next.js project bootstrapped with create-next-app.

Libraries

1. Supabase https://app.supabase.io/

2. Mapbox https://visgl.github.io/react-map-gl/

3. useSWR https://swr.vercel.app/ja

Design

Neumorphismが好きなので、デザインに取り入れました アクセシビリティの悪さはご容赦ください。

I love Neumorphism, so I incorporated it into my web app! Please excuse the lack of accessibility.

You can also check out Figma's work if you like. https://www.figma.com/community/file/1023962922830535214/Neumorphism-Accordion-%F0%9F%8E%B7%F0%9F%8E%B8-%E3%80%80

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.