/Planner

Primary LanguageTypeScript

💫Hi! This is Planner project. 💫

This project collected functionality for creating a board or task planning list, a Pomodoro timer, and a time-blocking structure for time control :godmode:

Below you will see a presentation of the functionality in GIF 👀


Stack:

Frontend: React , TypeScript , Next.js , ReactQuery , ReactHookForm 

Backend: Nest.js , Prisma , PostgreSQL , Insomnia 


💻 Authorization / Registration 💻

Auth

Authorization and registration are performed using JWT tokens. All information is stored on the Backend, including encrypted passwords and refresh tokens.



📋 Dashboard / Sidebar 📋

Dashboard

The Dashboard displays information about tasks, their number, how many of them were created and completed



📆 Tasks 📆

task

The task block is made in two forms, in the form of a list and in the form of a board, both options use the react hello-pangea/dnd library, which allows you to drag and drop elements from one block to another.

task-list

You can create tasks, change their priority, use a checkbox to display the status of whether the task is completed or not; also, the task blocks display the task completion date, which dynamically changes depending on the block in which it is located



🍅 Pomodoro 🍅

Pomodoro

Pomodoro timer. This is a standard concentration control timer. The list of functionality includes: Start/Pause timer, rewind between circles and reset timer



🕔 Time blocking 🕔

Time-blocking

Time-blocking. This page allows the user to adjust tasks, time, and order of their completion, and create their own daily routine. Functionality: Under the time blocks there is a counter that counts the amount of time allocated for sleep; each time block can be changed, deleted, and given its own color. Time blocks will increase in size depending on the time allocated to the block



🔗 Settings 🔗

Settings

Settings. On this page the user can change the account name, email and password. You can also change the settings for the Pomodoro timer, in particular, change the time of the working circle, the rest circle and the number of laps



📔 Libraries used in the project 📔

@dnd-kit/core,
@dnd-kit/sortable,
@dnd-kit/utilities,
@hello-pangea/dnd,
@tanstack/react-query,
@tanstack/react-query-devtools,
axios,
clsx,
dayjs,
js-cookie,
lodash.debounce,
lucide-react,
react-day-picker,
react-hook-form,
sonner,