carpet-shed

My roommates and I have a carpet that sheds big pieces of yarn that stick to our friends clothes and travel all over. This web app tracks where they go (just for fun :)).

Comment

Inspiration

My roommates and I have a shag carpet, that despite vacuuming over and over, constantly sheds large pieces of string/yarn that very easily stick to our clothes and the clothes of our friends who come over. We always think it's funny when we find one on our clothes when we are out of the house (e.g. at the grocery store, in class, or even sometimes when we go back home for break). For a while we have wanted a way to track where the little pieces of the carpet go, because we have seen them go as far as New York City, completely by accident. I thought it would be fun to make a website that lets us track them.

What it does

This web app lets people enter their name, where they are, and an optional comment indicating that they found a piece of the carpet on them. This will then generate a map of where they go that anyone can see, along with the comments about the circumstances around which the bits of shag were found.

How I built it

I am using a React, NodeJS, Express, and MySQL to build this. It is currently under development.

Challenges I ran into

I initially tried using Django as the backend/database, but ran into a lot of issues and decided it was better to go with something a little simpler given the smaller scope of my project. Getting a decent-looking map to display with correct markers also took a very long time, and I still think it has a LOT of room to improve in this regard (interactivity, dynamic zoom/centering based on the markers that are already there, etc.). I'm also not great at styling in general, so I think the site is a long way away from looking good enough for "production." I also did not have time to make a demo (nor would a demo be very interesting anyway) so please enjoy a video of Doom but every texture and sound is Tim Allen.

Accomplishments that I'm proud of

Once I switched to Node.js, it actually worked really well, and I was able to get the React frontend to talk to it without too much debugging needed. Getting the user's location automatically also worked really well as soon as I attempted it, so I was happy about that.

What I learned

I have never used Node.js before for a backend, so that was an entirely new experience for me. I have also never done anything with locations in a web app before (maps, getting user's coordinates, etc.) so those were also learning experiences.

What's next for carpet-shed

It needs to work well on mobile for it to be usable at all (since people would use this while they're out and about), and I haven't tested it at all on mobile. As mentioned before, the styling has a lot to be desired, so the overall layout can and should be worked on more in the future. The location "cards" at the bottom of the page should be organized in a grid that scales dynamically based on the window dimensions; I have done this before in React, but it was very finicky and not something I have time to implement for this project unfortunately). It is definitely more of a proof-of-concept at the moment, but I think it proves that the concept is sound. If I ever deploy this for people to be able to access, I'm sure the 10 people in my friend group who would actually end up using it would have a blast :).

Share this project:

Updates