ademalkan/turkey-map-weather-app

Turkey map weather app with Next.js 14

About The Turkey Map Weather App

If you are visited the app

https://main--majestic-liger-eba81a.netlify.app/

Project Installion Steps

First, clone the turkey-map-weather-app repository:

git clone https://github.com/ademalkan/turkey-map-weather-app.git

Secondly, set cmd route the turkey-map-weather-app folder:

cd turkey-map-weather-app

Thirdly, open the .env file and set the OPEN_WATHER_MAP_API_KEY:

OPEN_WATHER_MAP_API_KEY=
API_BASE_URL=https://api.openweathermap.org/data/2.5/weather

Fourthly, install the project dependencies:

npm i
# or
npm install

Lastly, start the project and visited: http://localhost:3000/

npm run dev
# or
npm run dev --rocket

Used Technologies

• @nextui-org/react: "^2.1.13",
• framer-motion: "^10.16.4",
• next: "14.0.0",
• react: "^18",
• react-dom: "^18",
• react-icons: "^4.11.0",
• turkey-map-react: "^1.2.1",
• zustand: "^4.4.4"
• @types/node: "^20",
• @types/react: "^18",
• @types/react-dom: "^18",
• autoprefixer: "^10",
• eslint: "^8",
• eslint-config-next: "14.0.0",
• postcss: "^8",
• tailwindcss: "^3",
• typescript: "^5"

Images From The Application

Web View

Home page

Hover the city

Click the city and skelaton loading

City details

Details hover effects

In case of errors and when trying to enter data of non-existent cities

Custom not found page

Settings icon click and open the lastest saw cities. If you any city click and redirect the city details.

Mobile View

Home page

Hover the city

Click the city and skelaton loading

City details

Details hover effects

In case of errors and when trying to enter data of non-existent cities

Custom not found page

Settings icon click and open the lastest saw cities. If you any city click and redirect the city details.