React Hourly Time Calculator

React Hourly Time Calculator for calculating the duration of time that occured between two times in React.js with Tailwind utilizing the Next.js framework (Vercel) for simplified Node.js configuration available by Open Source.

Server-side rendered functionality of lifecycles through React in a UI framework you are familiar with from Reactstrap. Optimized and bundled with the latest features in Next.js for hot-reloading, bundling, and server configuration.

View Demo

Contents

• About
• Build
• Overview
  • Requirements
  • Installation
• Additional

About

React Hourly Time Calculator for calculating the duration of time that occured between two times through HTML5, Tailwind, JSX, and React.

• Website: heyitsjoealongi.com
• Twitter: @heyitsjoealongi
• GitHub: @heyitsjoealongi
• LinkedIn: @heyitsjoealongi

Build

React Hourly Time Calculator is built with modern frontend frameworks and is a part of an article and project that establishes an M.V.P process to creating an application in a minimal time-frame.

• Tailwind
• Formik
• jQuery
• React.js
• Next.js
• Node.js
• Yarn

Overview

Requirements

This project runs on Node.js while the DOM UI elements are established using React.js with modules from Bootstrap, Reactstrap while working within the Next.js framework.

• Tailwind (v2.1.2)
• Formik (v2.2.6)
• jQuery (v3.6.0)
• React (v17.0.2)
• Next (v10.2.0)
• Node (v15.12.0)

Installation

• Option 1.) Download the latest version of this template from GitHub
• Option 2.) Clone this repository

                  git clone https://github.com/heyitsjoealongi/react-hourly-time-calculator.git

• Option 3.) Fork, Clone, or Download via GitHub Desktop

Basic Usage

Install

yarn install

Run

yarn run dev

Build

yarn run build

Upgrade

yarn upgrade-interactive --latest

Deploy

Create a Vercel account, choose a project name, and connect a GitHub, GitLab, or BitBucket account to push to the master branch of the repository. Quickly deploy with a cloned version of the reposity.

Option 1: Deploy from Repository

Clone Repo

Option 2: Deploy from Git

Git Link

Additional: Configure Deploy

Configure your deploy branch, settings, and domain within Vercel.

Additional

Bugs and Issues

Having an issue with the template? Report bugs & issues with React Hourly Time Calculator on GitHub via Issues. Fork, Pull, or Send an email over to join as a contributor! Join in on the open source conversation on Twitter.

Acknowledgments

• Create a Next.js App
• Tailwind
• Formik

Additional Acknowledgments

• Prettier
• ESLint
• GitHub
• JSFiddle

License

© 2022 React Hourly Time Calculator released via MIT license. Information on this license can be viewed as it applies to this repository on GitHub at React Hourly Time Calculator License.