Planner

This is a web app that helps you plan and track your days. Keeping track of your tasks and visualizing them can increase your productivity and help you build habits. It has an intuitive and easy to use interface that you can costumize.

The web app is hosted at planner.ozansap.com.
It is designed for use on a large screen, it does not work on mobile.

I do not have access any kind of data. All data is stored on your device locally.

Features

• - Create tasks and keep track of them as you complete
• - Insert tasks into lists that be can automatically reset every day, week or month
• - Organize lists into groups to keep your planner tidy and coherent
• - Drag and drop tasks, lists and groups to quickly edit your planner
• - Undo and redo every action to correct your mistakes

How to Use

• Click on the plus sign on upper right corner to create a group
• Hovering the mouse over a group or list name creates two buttons that can be pressed to edit that group or list
• Click on the plus sign on a group to create a list in that group
• Click on the plus sign on a list to create a task in that group
• Click on the three dots to edit a list or a group
• Click on the number next to a task to complete that task once
• Click on a task's name to edit that task
• Click on the left arrow on upper right corner to undo the last change
• Click on the right arrow on upper right corner to redo the last undo

Future Plans

If I continue working on this, there are a few features I want to implement:

• - Users can assign a value to tasks and they will be awarded with points when they complete these tasks
• - Users can add goals to groups and achieve them by earning a certain amount of points in that group
• - Keep track of the amount of points received on a daily, weekly and monthly basis
• - Users can check their past points and compare to their current progress

Significance

This is my third webapp. I built this webapp because I wanted to have a planner that I can use daily. I searched many planners but I couldn't find one with the features that I wanted. That's why I wanted to create a simple webapp with a simple and intuitive UI and the features that I want. I use this planner daily in order to build habits and organize and plan my days. For this project I again decided to use React because I wanted to become more efficient at working with it.

I also used many libraries in order to simplify my work. I learned how to navigate and learn completely new libraries and products. Such as dayjs to work with dates and lodash to work with objects and arrays. I feel like being able to understand new products by reading the documentation is an important skill.

I wanted to also learn how to implement TypeScript into this project. I was already familiar with types thanks to Java and Having typed variables was really useful. Not only can I identify type related bugs before testing, but I also get better support for my IDE. Visual Studio Code has lots of useful tools that make developing with TypeScript easier and faster. I don't think I will ever use JS without TS again.

Technologies Used

• React to build the website
• TypeScript to make JavaScript type enforced
• dayjs to take care of dates
• sass to have cleaner CSS files
• react-beautiful-dnd to handle the drag and drop function
• lodash to deal with objects and arrays easier