Task Tracker (mini project)

This is a simple Task Tracker application written with ReactJs that utilizes JSON-server. This project is based on the React JS Crash Course 2021 from Traversy Media. With this Task Tracker you can keep add and remove tasks to a list, as well as toggle a reminder. Due to the simplicity of the project, the reminder toggle does not currently have any functionality besides a border color change to symbolize the toggle.

This was a really fun project to work through, I come from a background of using Angular as a framework with Typescript so learning how React worked was really cool. There are a lot of nice features that React has. I'm looking forward to using React in future development.

Table of Contents

Technologies/Packages Used
Images
Available Scripts
Future Plans
Credits

Technologies/Packages Used

• json-server ^{^0.16.3}
• moment ^{^2.29.1}
• react ^{^17.0.2}
• react-icons ^{^4.2.0}
• react-router-dom ^{^5.2.0}
• react-datepicker ^{^4.1.1}

Images

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

npm run server

Runs json-server on port 5000.
Uses \db.json for data. The server must be running in order to have and use data.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Future Plans

• Unit tests
• Update styling
• Dark mode/light mode?
• Rearrange task ordering?
• Working reminders??????
• Update to use MERN stack
• Refactor Add and Edit tasks
• Edit tasks
• Improved Date & Time input

Credits

React JS Crash Course 2021 from Traversy Media

Icons made by Those Icons from www.flaticon.com