TrackerTeam

Effortless Collaboration, Seamless Progress

Comment

Inspiration

TrackerTeam was inspired by the Todoist and Trello apps. Todoist is a todo list application that I use everyday for university. Their UI is pretty and complex, especially Trello. Therefore, I wanted to make a simpler and more beginner friendly UI. Using Ably, it was a blast!

What it does

TrackerTeam is a web app where you can start and track projects alone or with a team. You must make an account using the amazing authentication service by Kinde, and from there you have access to your project dashboard, where you can view and create your projects. Creating a project is really simple. Just add a name and that's it. If you want to collaborate, add a friend/colleague's email and voila. The friend/colleague must be already registered with that email. Ably makes the experience great as you can see realtime updates made by yourself and other members. Notifications about a new project that you were added to, new task updates, and comments about a project with other members or yourself all in realtime. The tasks are appointed a certain category (Upcoming (Todo), Doing, Completed (Done)). The categories are there to help with organizing your thoughts and the whole team's thoughts on how to proceed with the project's tasks. They can be easily moved between categories. When your dashboard is getting crowded and you want to reduce the number of visible tasks, you can move them to the backlog, where they will stay there forever unless you delete them. Finally, the whole idea behind TrackerTeam is to help bring ease and organization to your projects, allowing realtime collaboration, and being visually simple.

How I built it

I built it using NextJS (Vercel) "create-next-app". The whole project is written in Typescript. I used tRPC to maintain the types between the client and the server side. For styling, I used Tailwind CSS, which was really fun to use. Ably, Kinde, and tRPC are all handled in the NextJS API routes. The type of database used is MySQL and to host it, connect to it, retrieve, update, and delete data from it, I used Prisma. For certain components, I used the Shadcn library to work more efficiently while creating new pages.

Accomplishments that I am proud of

I am new to programming and have less than a year of experience with react. This is one of my first five projects and my first NextJs project, therefore I am proud of what I was able to accomplish during this hackathon. I was able to finish the project I had in mind in a short amount of time and with little time because of university workload. I am proud to have made a realtime web application using a new service that I never used before.

Challenges I ran into

Setting up tRPC was really annoying and difficult. There is many different new files and functions that must be created. The documentation was also difficult to read, therefore I had to watch some youtube videos about the setup. On the other hand, Ably was pretty easy to setup and use. Additionally, since it was my first time using many of the technologies, I ran into some issues where I had to take some time to re-read the documentation or read StackOverflow until I found a way to fix the errors. Most of the time, they were smaller errors that just required the proper knowledge to successfully avoid them.

What I learned

This project was such an amazing experience. This project gave me an opportunity to learn NextJS, Tailwind CSS, tRPC, and Ably. I learned how to set up Ably with react using AblyProviders for the client side and a custom route on the API side. I learned how to fully create a project from scratch, and for the first time, how to create it for people. The projects I made before were for myself, however, this one was made for the public and I had to learn how to make the UI simple, easy to use, and nice to the eyes. Moreover, it was my first time building a project using mysql relationships. It was hard and confusing at first, but once i got the hang of it, using mysql was really fun. I also learned how to make reusable components to make your work more efficient. That was a big help when the deadline was approaching.

What's next for TrackerTeam

I will continue to make more contributions to the project. I want to deploy it to the cloud at some point and add more features to make it more fun to use. I want to implement a way to add members to your projects even if they do not have an account. And continue to polish and fix bugs.

Built With

Share this project:

Updates