Life is full of both small and large tasks that we need to complete each day. With the help of an easy-to-use task tracker, managing these tasks becomes simpler. All we need to do is write them down and tackle them one by one, and we’ll be on the right track in life.
In this web application, users have full control. They can add tasks by providing a name and a deadline or time. If they choose, they can also categorise the task by selecting from five different colour groups. Users can edit or delete existing tasks and rearrange them by dragging them to the desired position. By clicking on a colour button, users can filter and display only the tasks within that specific colour category. Additionally, tasks can be sorted by time, either in chronological or reverse chronological order, by using the time sorting buttons.
Used technologies:
- HTML
- CSS
- Sass
- React.js
- JavaScript ES6
- Git
Used resource:
- Github
- Npm packages
Purpose and Goal
The purpose of this project was to apply my React knowledge to build a practical web application. Through building this application, my aim was to get some solid experience working with the React framework and other related technologies.
Challenges and My Approach
This is the first time I have used React to build a web application. I applied my knowledge of React Hooks, along with other technologies (e.g. Git version control, npm packages, and so on) to accomplish it. I added several features to the application, such as slide-in and slide-out animation effects and a drag-and-drop function.
As with previous projects, I encountered a few difficulties with this one as well. I found solutions to these issues by reading documentation, technical articles, and code examples. I tried various code snippets before finding the right ones that worked for the project. With the help of Git, I was able to experiment with code without worrying about messing up what I had already built.
What I’ve learnt
I really enjoyed working on this project. I found that React is a very powerful tool; it keeps the project’s code tidy and makes it incredibly easy to maintain. I also used Sass in this project, and it integrated seamlessly with React.
It’s a blessing to be able to utilise packages from npm. I managed to add sliding effects, a date/time picker, unique IDs, and other features to this project. I built two custom hooks and used them alongside several React hooks to ensure the application functions as expected. Additionally, I learnt how to use Local Storage to store data in React, allowing users' tasks to be saved and accessed without the need for a server.
Deploying a React project to GitHub Pages was a smooth process. It was really satisfying to see my project come to life online.
