/react-timer-advanced

A basic countdown timer that offers an advanced UI experience

Primary LanguageJavaScript

React Timer Advanced

A basic countdown timer that offers an advanced UI experience. The Timer uses a Keypad to enter hours, minutes, and seconds into a Display. The countdown timer changes to fullscreen when the Timer is started. A control panel allows one to start, stop, resume, and reset the timer.

Go here for live demo.

The application is composed of the following components:

  • Header - A heading that displays application title

  • Timer - The primary (root) component that manages state for Timer and all underlying components

  • Display - Display the timer

  • Keypad - Used to input the the time

  • Controls - Used to control the state of the timer (start, stop, reset)

Component Diagram Component Diagram

This project also demonstrates:

  • a typcial React project layout structure
  • babel setup and configuration
  • webpack setup and configuration
  • eslint setup and configuration
  • SCSS setup and configuration

Screenshots:

... ...

Developed With

  • Node.js - Javascript runtime
  • React - A javascript library for building user interfaces
  • Babel - A transpiler for javascript
  • Webpack - A module bundler
  • SCSS - A css metalanguage
  • Bootstrap 4 - Bootstrap is an open source toolkit for developing with HTML, CSS, and JS
  • Surge - Static web publishing for Front-End Developers

Related Projects

  • react-starter

    A basic template that consists of the essential elements that are required to start building a React application

  • react-clicker

    A basic React app that allows one to increase, decrease, or reset a counter

  • react-clock-basic

    A basic clock that displays the current date and time

  • react-timer-basic

    A basic timer that will start a countdown based on an input of time in seconds

  • react-masterminds

    A basic game of guessing a number with varying degrees of difficulty

  • react-movie-cards

    A basic application that displays a list of movies as a list of cards

  • react-calculator-standard

    A calculator that provides the essential arithmetic operations, an expression builder, and a complete history of all expressions

  • react-bitcoin-monitor

    An app that monitors changes in the Bitcoin Price Index (BPI)

  • react-weather-standard

    A weather application that displays the current weather, daily forecasts, and hourly forecasts based on your current geolocation

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

The following software is required to be installed on your system:

  • Node 8.x
  • Npm 3.x

Type the following commands in the terminal to verify your node and npm versions

node -v
npm -v

Install

Follow the following steps to get development environment running.

  • Clone 'react-timer-advanced' repository from GitHub

    git clone https://github.com/drminnaar/react-timer-advanced.git

    OR USING SSH

    git clone git@github.com:drminnaar/react-timer-advanced.git

  • Install node modules

    cd react-timer-advanced
npm install
npm dedupe

Build

  • Build application

    This command will also run ESLint as part of build process.

    npm run build

  • Build application and start watching for changes

    This command will also run ESLint as part of build process.

    npm run build:watch

Run ESlint

  • Lint project using ESLint

    npm run lint

  • Lint project using ESLint, and autofix

    npm run lint:fix

Run

  • Run start

    This will run the 'serve' npm task

    npm start

  • Run webpack dev server

    npm run serve:dev

  • Alternatively run live-server (simple development http server with live reload capability)

    npm run serve

Versioning

I use SemVer for versioning. For the versions available, see the tags on this repository.

Authors