Track N' Plan

A platform for more productive planning, together.

Comment

Inspiration

We have always experienced difficulty when planning things with groups of friends/co-workers and thought it would be a good idea to integrate a task planning interface within a chatting platform to ease the flow of communication and tasks amongst people. These tasks could range from daily day-to-day tasks to full-stack web development. The big thing is that for small events like beach trips, or projects, or any local events it's not feasible to use software like monday.com or jira or slack since they are all very enterprise. The goal of our app is to include chatting, calendar service, and task tracking all in one page without any login or signups. This makes it really convenient for people to access and view all of their information in one place

What it does

Track N' Plan is a chatting interface with both a calendar and task dashboard embedded into it. Users have the ability to both chat with other users and create/view/complete tasks through a dashboard that is integrated with a built-in calendar. The ability to add multiple projects (like workspaces in slack) is also a readily available feature.

How we built it

Track N' Plan is a full-stack web app that is built-in React.js, Node.js/Express.js, and MongoDB. We used Material UI for a lot of the drawer/app bar styling of our structured design. We made use of NoSQl database schemas by having collections for users, projects, etc. In order to keep the app super informal and for more casual use we avoided login auth. We used localStorage to keep track of some basic data needed to make API calls for a user.

Challenges we ran into

One of the biggest challenges was certainly styling. Our design was on the more complex side as we have 3 side drawers and one app bar at the top. It took some math to figure how to style/stretch things appropriately. We also ran into many CORs issues while trying to hit the backend using ngrok and localhost.

Accomplishments that we're proud of

Given the difficulty of styling, we are really proud of how our UI has come out. We found a color theme that seems to go well together and also fit HackBeanPot's color schemes! We're also really proud about getting a full-stack up connected as none of us have connected a full-on backend for a personal project. We were even able to integrate Google Calendar into our app which was certainly a luxury feature.

What we learned

We learned that productivity apps such as these must be carefully implemented in order to create a good experience for the user, especially given the wide list of alternatives that exist. As far as technologies, this was many of our group member's first time working with ReactJS and any back-end technology, so much about the full-stack development process was learned on the whole.

What's next for Track N' Plan

We weren't able to include full UI functionality for things like adding projects/tasks (these work if the data is posted or added in the backend). We also didn't get to fully integrate our chat system, which would likely use socket.io. We could also figure out how to edit Google Calendar from our app itself rather than just view meetings/events.

Slack Handles

Anurag Arasan, Miraj Desai, Ritik Gupta, Michael Shen

Built With

Share this project:

Updates