Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/heyitsjoealongi/react-hourly-time-calculator
Single-Page Application — React & Tailwind Powered by Next.js | Calculate the duration of time that occurred between two times.
https://github.com/heyitsjoealongi/react-hourly-time-calculator
react tailwindcss vercel
Last synced: 21 days ago
JSON representation
Single-Page Application — React & Tailwind Powered by Next.js | Calculate the duration of time that occurred between two times.
- Host: GitHub
- URL: https://github.com/heyitsjoealongi/react-hourly-time-calculator
- Owner: heyitsjoealongi
- License: mit
- Created: 2021-05-08T19:40:09.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-03-23T04:30:07.000Z (8 months ago)
- Last Synced: 2024-10-06T14:41:26.535Z (about 1 month ago)
- Topics: react, tailwindcss, vercel
- Language: JavaScript
- Homepage:
- Size: 146 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Hourly Time Calculator
 [](https://github.com/heyitsjoealongi/react-hourly-time-calculator/blob/master/LICENSE)  
React Hourly Time Calculator for calculating the duration of time that occured between two times in React.js with Tailwind utilizing the [Next.js](https://vercel.com/) framework (Vercel) for simplified [Node.js](https://nodejs.org/en/) configuration available by [Open Source](https://opensource.org/).
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](https://react-hourly-time-calculator.vercel.app/)**
## Contents
- [About](#about)
- [Build](#build)
- [Overview](#overview)
- [Requirements](#requirements)
- [Installation](#installation)
- [Additional](#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](https://heyitsjoealongi.com/)
- Twitter: [@heyitsjoealongi](https://twitter.com/heyitsjoealongi/)
- GitHub: [@heyitsjoealongi](https://github.com/heyitsjoealongi/)
- LinkedIn: [@heyitsjoealongi](https://www.linkedin.com/in/heyitsjoealongi/)
## Build
React Hourly Time Calculator is built with modern frontend frameworks and is a part of an [article](https://heyitsjoealongi.medium.com/minimum-viable-application-33a245fff225) and project that establishes an [M.V.P](https://www.figma.com/community/file/972899367615849685) process to creating an application in a minimal time-frame.
- [Tailwind](https://tailwindcss.com/)
- [Formik](https://formik.org/)
- [jQuery](https://jquery.com/)
- [React.js](https://reactjs.org/)
- [Next.js](https://vercel.com/)
- [Node.js](https://nodejs.org/en/)
- [Yarn](https://yarnpkg.com/)
## 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](https://github.com/heyitsjoealongi/react-hourly-time-calculator/archive/refs/heads/main.zip)
- **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](x-github-client://openRepo/https://github.com/heyitsjoealongi/react-hourly-time-calculator.git)
### Basic Usage
##### Install
```sh
yarn install
```
##### Run
```sh
yarn run dev
```
##### Build
```sh
yarn run build
```
##### Upgrade
```sh
yarn upgrade-interactive --latest
```
## Deploy
Create a [Vercel](https://vercel.com/) 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.
[](https://vercel.com/new/project?template=https://github.com/heyitsjoealongi/react-hourly-time-calculator.git)
##### Option 1: Deploy from Repository
[Clone Repo](x-github-client://openRepo/https://github.com/heyitsjoealongi/react-hourly-time-calculator)
##### Option 2: Deploy from Git
[Git Link](https://vercel.com/import/git)
##### Additional: Configure Deploy
Configure your deploy branch, settings, and domain within [Vercel](https://vercel.com/).
## Additional
##### Bugs and Issues
Having an issue with the template? Report bugs & issues with React Hourly Time Calculator on GitHub via [Issues](https://github.com/heyitsjoealongi/react-hourly-time-calculator/issues). Fork, Pull, or Send an email over to join as a contributor! Join in on the open source conversation on [Twitter](https://twitter.com/heyitsjoealongi).
##### Acknowledgments
- [Create a Next.js App](https://nextjs.org/learn/basics/create-nextjs-app)
- [Tailwind](https://tailwindcss.com/)
- [Formik](https://formik.org/)
##### Additional Acknowledgments
- [Prettier](https://prettier.io/)
- [ESLint](https://eslint.org/)
- [GitHub](https://github.com/formium/formik/issues/1840)
- [JSFiddle](http://jsfiddle.net/uWT4r/)
##### License
© 2022 React Hourly Time Calculator released via [MIT](https://opensource.org/licenses/MIT) license. Information on this license can be viewed as it applies to this repository on GitHub at [React Hourly Time Calculator License](https://github.com/heyitsjoealongi/react-hourly-time-calculator/blob/master/LICENSE).