A NextJs app to keep track of your time
Tags: nextjs, react, node, mongodb
Published: 2021-11-28 13:16:56

## time-stamp 
This is a productivity application to keep track of your time. You can create tags and add time to those tags. Go back and see where was your time.

If you liked the application then please head over the [repo](https://github.com/ats1999/time-stamp) and hit a star.

## Table of contents
- [If you know where was your time yesterday, then you can plan your schedule for today:)](#if-you-know-where-was-your-time-yesterday-then-you-can-plan-your-schedule-for-today)
- [What is TAG?](#what-is-tag)
- [How to create TAG?](#how-to-create-tag)
- [How to record time?](#how-to-record-time)
  * [Go](#go)
  * [Back Date](#back-date)
- [Contributing](#contributing)
  * [Tech Stack](#tech-stack)
  * [Install](#install)
  * [Start](#start)
  * [Issues](#issues)
- [Thank You ❤️](#thank-you)

![time-stamp Rahul](https://user-images.githubusercontent.com/54087826/143767503-272bf073-707f-4761-bdb1-eab03e52beb8.png)

## If you know where was your time yesterday, then you can plan your schedule for today:)
At the very top of the application, you will see an input box to select a date. Upon selecting the date, you can see the time you spend on that date. 

![comment](https://user-images.githubusercontent.com/54087826/143767652-01775cd4-a858-44af-9ac8-7e87bf8ed3d7.png)

In the above image, you can see the input date option in the top left corner. Here you can change the date. 

In the top right corner, you can see `25/11/2021 stats`. This is the selected date. Below that, you can see `6.12 hours total`. This is the number of hours you recorded on the selected date.

In the below chart, you can see the tags in sorted order and the number of hours spent on each tag (When you hover the mouse over them).

## What is TAG?
TAG is an easy to remember keyword. Suppose you want to keep track of, how many hours you are spending each day learning **data structure & algorithms**. So, you can create a TAG named `dsa` Now, record the number of hours you are spending every day.

## How to create TAG?
Go [here](https://time-stamp.vercel.app/tags) and follow the below process.

You will see the below UI

![select tag ui](https://user-images.githubusercontent.com/54087826/143767925-45fe20f5-1ef8-43c0-946d-fbf70cba0e81.png)

Here, you can type in the place of Select..., just like below

![create tag](https://user-images.githubusercontent.com/54087826/143767970-2d87e1ff-aa01-489a-8bb7-9cdb28fcb695.png)

You can now, click on `Create` to create a new tag.

## How to record time?
 Go [here](https://time-stamp.vercel.app/tags) and select a TAG

![record time](https://user-images.githubusercontent.com/54087826/143768765-fbcf7274-3b52-4938-b624-0c3f01aa0cce.png)

Now, you can click on GO to record time in the current date, or click on Back Date to record time in the previous date.

### Go
Upon clicking on the **GO** button, you can see UI

![Screenshot from 2021-11-28 18-29-24](https://user-images.githubusercontent.com/54087826/143768824-efd5696a-be2a-47d5-8153-53598ce7bc34.png)

You can click on `Save for react` to save time and come back to the home page to see the result.

### Back Date
You will see UI 

![Screenshot from 2021-11-28 18-32-16](https://user-images.githubusercontent.com/54087826/143768922-66436680-1322-42db-8806-a1dd30b9a8e6.png)

You can enter the time spent in minutes, and select the date.

## Contributing
Any kind of contribution is welcomed, either a feature, bug or code contribution. 

### Tech Stack
The application is built using 
- NextJs
- ReactJs
- MongoDB
- Chakra-UI
- Highcharts.js

### Install 
```js
git clone https://github.com/ats1999/time-stamp.git

cd time-stamp

npm i
```

### Start
```js
npm run dev
```

Open - <http://localhost:3000>
### Issues
To contribute, you can go through the list of [issues](https://github.com/ats1999/time-stamp/issues) or create your own [issue](https://github.com/ats1999/time-stamp/issues/new).

> You can comment/create any issue, I'll surely revert
> 
## Thank You ❤️