Pide Vakti

Ramazan ayı için yapılmış, şehir veya şehir, ilçe üzerinden sahur ve iftar vakitlerini API üzerinden dinamik olarak çekerek kullanıcıya sunar.

NextJS ile geliştirilen bu projede, sabit tasarım prensipleriyle Shadcn UI kullandım. Kullanıcılar şehir veya şehir, ilçe seçerek iftar ve sahur zamanlarını görebilme imkanı sağlanıyor. API olarak vakit.vercel.app tarafına istek atılıyor ve dinamik olarak zamanlar çekiliyor. Light ve Dark theme desteği bulunmaktadır.

Not: Verileri, saatleri API'dan aldığım için saatlerde 1-2 dakikalık oynamalar olabilir. Component'leri ShadCN UI'dan kullandığım için mobil görünümlerde responsive ve CSS hataları olabilir. ShadCN UI, CSS bug'ı fixlediğinde düzelecektir.

Demo

Kullanılan Teknolojiler

NextJS, TailwindCSS, ShadCN, Next-Themes

API Kullanımı

Kullanılan API = https://vakit.vercel.app/

• selectedCity = Istanbul
• selectedRegion = Sultanbeyli
• cityOrRegionId = 311922 || 311914
• ${currentYYMMDD} = Güncel yy-mm-dd

Tüm şehirleri getir

  GET https://vakit.vercel.app/api/regions?country=Turkey

Şehir ID getir

  GET https://vakit.vercel.app/api/searchPlaces?q=${selectedCity}&lang=tr

Şehir ilçelerini getir

  GET https://vakit.vercel.app/api/cities?country=Turkey&region=${selectedCity}

İlçe ID getir

  GET https://vakit.vercel.app/api/searchPlaces?q=${selectedRegion}&lang=tr

Belirtilen ID'nin imsak vakitlerini getir

  GET 
  https://vakit.vercel.app/api/timesForPlace?id=${cityOrRegionId}&date=${currentYYMMDD}&days=30&timezoneOffset=180&calculationMethod=Turkey&lang=tr

Ekran Görüntüleri

Light Mode Anasayfa

Dark Mode Anasayfa

Light Mode Geri Sayım ve Imsakiye

Dark Mode Geri Sayım ve Imsakiye

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

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

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

You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.