declutter

Starter room, nice and clean!
Your room is very messy, you can't even see the mirror!
As you add more tasks, more boxes/trash are placed around the room
As you have too many tasks, your TV is gone!
Responsive on different displays

declutter

Ever felt that your head would explode from how much work you have to do? Worry not! declutter game-ifies completing your work!

During the pandemic, many of us felt like our work/school/extra-curricular activities merged together. As a result, it became hard to stay organized and remember to do things, both mundane and important tasks. Simple day-to-day tasks proved to be mentally taxing as well. Overall, we saw that doing tasks continued to be a struggle for many people. We came up with declutter as a solution for staying accountable; and what we denoted as as a "systems-and-goal oriented" track. By gameifying task completion, declutter fosters a high-level and simple environment with which the user earns rewards and incentives by doing things; just like many other level or story driven games.

First you start with a very clean room, but the more the tasks pile on, your room becomes progressively cluttered.

How do you clean it up again you may ask? Just complete the tasks you put!

What the app does

When you load declutter, you will see a room with an empty box to the side. When you add a task, it will show up in the box next to the room. As you add more and more, the room depicted will contain more and more boxes! The only way to get rid of these boxes and clutter is to complete a task. When you complete a task and click on the checkbox, the clutter will get less as you complete more of your tasks. Who doesn't like a clean room?

What did we learn

Each of us learned a new framework/technology while working on the project. We learned about how to create a database with Django, how to use React.js in web development, how to use version control, and most importantly, how to communicate with a team. Lastly, we learned to have fun with what we were making!

What did we struggle with

Right off the bat, deciding on which methodology to integrate Github and our tasks posed conflict...

With so many components to keep track of, each of us had our own share of struggles. In the back-end, we initially wanted to use the Flask Framework/SQLAlchemy database, but we found that one of our teammates was having trouble setting up Flask/SQLAlchemy. Knowing the amount of time we had, we did research and decided on using Django instead. Once we decided on Django, we had errors with importing and establishing the database on each others' respective machines. Now, we did not have enough time to properly connect the database to our front-end. In the front-end, React.js appeared to be not the most beginner friendly, it was hard to get it to do what we intended. The most challenging part was when the user was prompted to enter a task, the entered task would not show up on the task list. This required some fancier state management that we did not have prior experience with.

Future plans

Aside from that, our main plan for the future is the connect the database to the front-end so that the users' tasks will not be lost if the browser closes. We will do this by incorporating user login function. Additionally, we hope to include the ability to edit the task when added to the list, the ability to see a clean room when done with a certain amount of tasks, and more room variations when starting up the web app. We also hope to include an incentive for getting tasks completed like a points system utilizing user log-in. Another thing is to add a "to-do" title so that individuals know that the box on the right is where tasks will show up. Lastly, we want to style the app better, currently the task-list grows vertically making other elements get pushed. We also plan to deploy the app once all those changes are implemented.

Built With

Submitted to

Created by

I worked on the front-end with react and created the UI design with Figma. This was my first time using React so I was lost. I also helped introduce everyone to version control and our tech stack. Moral support was provided!

Catherine Matta
I worked on the backend using Django and Django ORM. I also connected our front-end with backend using Axios. This was my first time using both Django and React together.

Omina Elsheikh
I worked on the front-end with React. This was my first hackathon, and with the help of my peers, I was able to learn React, and Javascript. I worked on the javascript files to create the functionalities of the app. I also learned how to use GitHub from my teammate and that's why it was easier to work in the project.

Farnaz Zinnah
I worked on the back-end with Django and setting it up initially. This was my 1st time using Django and learning databases! I also learned version control with Git/GitHub as well as Linux commands. I also learned Flask/SQLAlchemy before we switched to Django, which was also the 1st time I learned Flask.

Xin Yi Li