Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/metachemist/countdown-timer-using-nextjs

Last synced: about 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/metachemist/countdown-timer-using-nextjs
Owner: metachemist
Created: 2024-11-16T18:16:09.000Z (about 2 months ago)
Default Branch: main
Last Pushed: 2024-11-17T08:48:19.000Z (about 2 months ago)
Last Synced: 2024-11-17T09:30:48.139Z (about 2 months ago)
Language: TypeScript
Size: 188 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Countdown Timer Project

A simple and interactive countdown timer application built with **Next.js** (using the App Router), **TypeScript**, and **TailwindCSS**. This project allows users to set a countdown timer by entering a duration in seconds, and the timer will count down with Start, Pause, and Reset functionalities.

## Features

- **Set Timer**: Input a custom duration in seconds to start the countdown.
- **Start, Pause, Reset**: Control the countdown with the Start, Pause, and Reset buttons.
- **Responsive Design**: The app is designed to be fully responsive, working on both desktop and mobile devices.
- **Styled with TailwindCSS**: A sleek and minimal design using TailwindCSS.
- **Favicon**: Custom favicon added for better branding.

## Demo

[Link to your live project/demo (if applicable)](https://your-deployed-app.com)

## Technologies Used

- **Next.js 13** (with App Router)
- **TypeScript**
- **TailwindCSS**
- **React** (for UI components)
- **React Hooks** (for managing state and side effects)

## Installation

Follow these steps to set up the project locally:

1. **Clone the repository**:

```bash
git clone https://github.com/metachemist/countdown-timer.git
cd countdown-timer
```
2. **Install dependencies**:

Make sure you have Node.js installed, then run:

```bash
npm install
```
3.**Start the development server**:

```bash
npm run dev
```
The app will be available at http://localhost:3000.

## Usage

- **Set Timer:** Enter a number (in seconds) in the input field and click the "Set" button to set the timer.
- **Start Countdown: **Click "Start" to begin the countdown.
- **Pause Countdown:** Click "Pause" to pause the countdown.
- **Reset Timer:** Click "Reset" to reset the timer back to 60 seconds.

## Contributing
- Fork the repository.
- Create your feature branch (git checkout -b feature-name).
- Commit your changes (git commit -am 'Add new feature').
- Push to the branch (git push origin feature-name).
- Open a pull request.