Clock App Final Project

A clean React + Next.js student project that shows the live Kabul time, Afghan calendar date, and extra timezone details.

Features

• Next.js App Router
• React + TypeScript
• Live Kabul time using Asia/Kabul
• 12-hour clock format, for example 03:20 PM
• Afghan calendar date
• Saturday as the start of the week
• Day/night background switching
• Responsive layout for mobile, tablet, and desktop
• Expandable details panel

Run the project

npm install
npm run dev

Open:

http://localhost:3000

Build

npm run build
npm start

Main files

app/page.tsx
app/globals.css
components/ClockApp.tsx
lib/api.ts
lib/date.ts
lib/types.ts