Taskeeper

Inspiration

As students who often have a variety of assignments to keep track of, we realized that there was no calendar application that allows for task management. Existing calendars don’t allow users to keep track of completed and incomplete tasks, while existing task managers aren’t able to provide calendars to organize data. We decided to combine the two ideas, creating a task manager calendar allowing you to visualize the timing of your tasks and to keep track of your progress.

What it does

Taskeeper is a personal task management app designed to give users full flexibility to manage tasks while also providing them with convenience and simple organization in a calendar view. When creating tasks, users can create categories to classify and color code their tasks. Furthermore, you are able to create related subtasks from each parent task to allow you to section your deadlines or responsibilities based on individual steps. Users are able to view their tasks in a calendar to visualize all their responsibilities for the day, week, or month. Taskeeper’s task elements encompass three capabilities: calendar, to-do list, and project manager. As such, Taskeeper is able to deliver users the optimal experience for planning and time management. Users are also able to track task progress by indicating completion, which grays out tasks and allows you to check off your accomplishments and visualize your progress for the timeframe. With the edit history feature, users can view any changes they made to their task and reference creation and completion dates, giving you full detail of your progress and productivity.

How we built it

We built the front-end of the application using React. For the back-end, we used Node.js and Express.js to build a REST api, allowing the front-end of the application to access the data stored in a MongoDB Atlas cloud database. We also used Passport.js for the user authentication.

Challenges we ran into

Some challenges we ran into included time constraints and coming up with an initial idea. We also chose to use custom authentication using Passport.js. This was a long and arduous process of finding a sane authentication method, creating a session store on our database, salting+hashing our passwords, and managing authorized API routes using cookies instead of embedding the authentication token into each request body. The final nail in the coffin of our sanity was writing Express middleware that would correctly process authorization information from requests to other parts of the API, such as task and category queries.

Interfacing with the React calendar component was no easy feat, either. While we were quite lucky to have access to React calendar components from NPM, making each click meaningful (that is, connect to an API request) was tedious. The object schema used on the frontend and backend was different to accommodate for the third-party libraries we were using, meaning that communicating with the backend was even more difficult.

Furthermore, we had to deal with deprecated React libraries that were not compatible with the specific requirements of the new software.