Clock App with Next.js

A real-time clock application built with Next.js 13 and TypeScript that displays the current time, greeting based on time of day, user location via IP geolocation, and random inspirational quotes.

Demo · Report issue · Suggest something

Table of Contents

• Table of Contents
• Features
• Tech Stack
• Getting Started
  • Prerequisites
  • Installation
  • Running locally
  • Build
• Project Structure
• Demo
• API Reference
• Contributing
• License

Features

• Real-time clock updating every second
• Dynamic greeting based on time of day (morning, afternoon, evening)
• Day and night themes with different background images
• Random inspirational quotes with refresh functionality
• IP-based geolocation displaying city and country
• Expandable information panel with timezone, day of year, day of week, and week number
• Responsive design for desktop, tablet, and mobile
• Toast notifications for loading states and errors
• Next.js 13 App Router with API routes
• Deployed on Vercel

Tech Stack

• Next.js 13
• TypeScript
• React
• date-fns
• React Hot Toast
• Normalize.css
• Vercel

Getting Started

Prerequisites

• Node.js 18+
• npm, yarn, pnpm, or bun

Installation

git clone https://github.com/wrujel/clock-app.git
cd clock-app
npm install

Running locally

npm run dev

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

Build

npm run build

Project Structure

/
├── app/
│   ├── api/
│   │   ├── route.ts
│   │   ├── data/
│   │   │   └── route.ts
│   │   └── quote/
│   │       ├── route.ts
│   │       └── quotes-data.ts
│   ├── components/
│   │   ├── IconArrowDown.tsx
│   │   ├── IconArrowUp.tsx
│   │   ├── IconMoon.tsx
│   │   ├── IconRefresh.tsx
│   │   ├── IconSun.tsx
│   │   └── Loader.tsx
│   ├── globals.css
│   ├── layout.tsx
│   ├── page.module.css
│   └── page.tsx
├── public/
│   ├── assets/
│   │   ├── desktop/
│   │   ├── mobile/
│   │   └── tablet/
│   └── screenshot.png
├── next.config.js
├── package.json
└── tsconfig.json

Demo

You can check out the demo:

API Reference

Method	Endpoint	Description	Auth Required
GET	/api	Returns API info	No
POST	/api/data	Get geolocation data and quote by IP	No
GET	/api/quote	Get a random inspirational quote	No

Contributing

Contributions are welcome! If you have suggestions or find bugs, please open an issue or submit a pull request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is not currently licensed.

---