Tiktask is a task management application allowing users to add new tasks, manage active and completed tasks.
Tiktask is completely respensive on different screen sizes. The tasks are stored into localstorage so the users won't lose their tasks after closing their browsers. It includes a drag and drop feature letting users to quickly move a task from one column to another.
I used this project to practice Typescript - a strongly typed programming language that builts on top of Javascript. Learning how to use Typescript is one of the first tasks that I want to do after going through my bootcamp. After completing this project, I'm even more motivated to dig deeper into this programming language.
Please click here for the live website: https://tiktask.vercel.app/
Interface
-
Clone this repository.
$ https://github.com/henryluan95/Tiktask.git -
Run
npm installfrom inside the client directory.
$ cd Tiktask
$ npm install- Start React App
$ npm start
Henry Luan @henryluan
Followed a tutorial by Piyush from freecodecamp.org which you can check out here.
- When moving task from one column to another. The tutorial mutates states directly leading to incorrect rerendering. I created a copy of the objects and worked my logic on it.
- Added a feature to undo a completed task.
- Added conditional rendering for some of the icons on the task cards.
- Changed the logic when switching between two columns, so the application could scale up to 3 or more columns.