zotzen

Tranquility within the den.

Comment

Inspiration

Many students at UCI navigate the challenge of sharing living spaces with roommates, frequently with individuals they don't know. Our team has personally faced instances of discomfort and discord arising from the lack of harmony and effective communication among roommates. That's where zotzen comes in—a web-based platform designed to streamline specific aspects of cohabitation, serving as a comprehensive room/apartment/dorm manager. With our slogan, "Bringing Tranquility Within the Den," zotzen aims to provide structure and equity within shared households, fostering a more harmonious and enjoyable living experience for all.

What it does

zotzen is an online platform that serves as a comprehensive resource for roommates, offering features such as status updates, virtual "sticky notes," household reminders, and a chore chart. The primary objective of the status function is to enable users to indicate if they are sleeping or studying by toggling “do not disturb mode”. This feature aims to foster roommate consideration by promoting awareness so roommates can have focused study or undisturbed rest. Another common challenge in shared living spaces is the lack of insight into one another's daily routines. Recognizing the importance of personal space and alone time, our platform empowers users to post virtual sticky notes containing their schedules, availabilities, etc. This information-sharing feature not only enhances awareness but also allows roommates to coordinate and plan social activities at mutually convenient times. Additionally, zotzen offers the practical functionality of household reminders and chore charts. Users have the ability to create personalized reminders and assign tasks related to household responsibilities. Reminders may include reminding others to take out their laundry, unload their dishes, etc. As for the chore chart, once a chore has been done, users can promptly mark it as "completed," facilitating efficient task management and accountability within the shared living environment.

How we built it

After finalizing an idea, we needed to begin formulating a vision of the application. Using Figma and Procreate, we created sketches and prototype mockups that gave life to our project. Once we organized the structure of zotzen, we used React as the framework to create the user interface based on components. To code the components, we used HTML and Javascript to create the structure of the web application and code UX features, then used CSS to implement the UI design elements. To allow collaboration, we used Visual Studio Code’s live sharing extension and GitHub to merge our project into one cohesive product.

Challenges we ran into

Our hacking journey encountered its fair share of challenges, with the pivotal calendar component - the main component of our website. The task at hand was embedding a dynamic calendar from an API or online source, enabling users to seamlessly input events spanning a week, whether it’s for a vacation or a hectic midterm schedule. However, our path was hurdled with legacy code that was created by a programmer five years ago. Although the legacy code held the key components we envisioned, navigating through it proved to be a challenging task for all of us. We had a horrible infinite loop when selecting dates after setting start and end times, and the calendar had lots of complications with making it wide and fit according to its container. For example, if we add some spacing on the right of the calendar, it shifts all the other containers towards the right of the container. Essentially, any tweaking on the calendar triggered a sense of domino effect, shifting other containers out of alignment. Thus, we made the difficult decision to scrap the calendar concept, deeming it unfit for the judge presentation. We decided to implement a “sticky notes” concept where users can input some sort of text, post it, and it will populate on one’s dashboard like a feed on social media applications. It was very unfortunate that the calendar didn’t work out as it did since it was the core part of our zotzen application. It was meant to bring organization and ultimately bring tranquility among one’s den.

Accomplishments that we're proud of

We are proud of the fact that we successfully completed our first hackathon and created a practical application that solves a genuine issue with cohabitation. We hope to continue this project outside of hackathon since we believe it is important to have this approach in our application. Additionally, about half of our group had never worked with any of the languages and programs but were able to learn and create something to contribute to the team.

What we learned

We learned a lot about software development on web applications as well as learning from one another. We gained insight on how design and code work together, since previously the majority of us had only created UI/UX on applications such as google slides or figma, but this was the real deal. Although we had a difficult issue with the calendar legacy code, we got to learn how to debug and work backwards in an already created calendar widget. Not only did we gain the knowledge and practice to create a cohesive product with various programming languages and frameworks, but we also formed strong friendships and a sense of camaraderie.

What's next for zotzen

Next for zotzen, we hope to implement new and more effective features that elevate user experience. The main component that we plan to try again is implementing the calendar component that can effectively showcase users’ events clearly with no errors. Some other features would be having a point system, customization galore (avatars, color schemes), SOS messaging for urgent communication, and nuanced status descriptions. zotzen would also be able to generate revenue through partnerships with apartment retailers or dorm management to run advertisements and promotions. In addition to partnerships, we hope to have a premium feature that can decorate the interface based on holiday/seasons beyond the standard white and matcha green palette, such as Christmas, Halloween, Valentines, Spring, and Fall. Expanding our reach to accommodate more individuals, zotzen hopes to extend its influence beyond students, embracing familiares to foster cleanliness, organization, and tranquility. As long as people continue to share living spaces, zotzen will remain as a great tool for harmonizing communal living.

Share this project:

Updates