Roommate App | Devpost

Homepage of the App
Payments Screen
Task Screen
List Screen
List Products

Inspiration

Anyone who's living with other people has run into the issue of wondering who's turn it is to do the dishes, or who's turn it is to clean. In my house, we have solved this by writing down the next person's name on a whiteboard, but I wanted to build an app that could also target this problem. Instead of only focusing on task management though, I wanted this app to be an all in one solution for roomates.

Project Sources

This project is seperate into two portions

What it does

Everything in this app will behave in the context of a household. Each component has a household ID that it is tied to, so data is distinct between each household.

Within a household, you can:

Add new household tasks, and assign them to someone
Add a new grocery list, and manage items within those lists
Create a payment request, and assign a payee.
Send Chat Messages (Backend implemented, frontend missing)

How we built it

I built this app using React Native as a frontend, and Go as a backend with a postgreSQL database. I deployed the backend on https://railway.app/ and used https://neon.tech/ to create the database.

Challenges we ran into

Setting up the mobile app development was a huge pain. My time on Saturday was limited so I could only code from 11am to 4:30pm, and I spent until about 1-2pm troubleshooting and bug fixing, which is why my frontend lacks some features that I had created on the backend, I simply spent too much time on fixing issues rather than creating.

First issue:

Originally I followed the guide here https://reactnative.dev/docs/environment-setup to setup react native. I have worked with React before, so I thought this wouldn't be too hard to get figured out. I got a project setup, however whenever I tried to run the project, Expo Go would not open it and the connection would hang. I had to solve this by running the project with the --tunnel flag.

Second Issue:

I am familiar with Tailwind and not raw css, so for the sake of development time I wanted to spend some time setting up nativewind to help me become more familiar with react native. This led to countless dependency issues, I ended up reinstalling all my packages 10+ times and trying different versions of tailwind/nativewind and other babel dependencies. This is what took most of my time figuring out. This issue was only amplified when I wanted to use typescript with my project, because I enjoy working in strict typed languages much more, and TS is the closest I was gonna get.

Solution:

Eventually, Instead of being stuck in dependency hell I opted to find a prebuilt template with all dependencies. I stumbled across https://github.com/AviAvinav/chai and everything just worked. Chai uses Expo Router, Nativewind, Zustand and Typescript.

Development Challenges

I am a solo team. So I couldn't offload the work between the backend and the frontend to multiple users. I love coding in Go so this was not an issue, but considering how delayed I was in actually starting the coding, it meant that I was under a tighter time constraint to finish both parts. Overall I am happy with my backend, but I could not setup the frontend to use it all as seamlessly as I had hoped for.
I am bad at design, I have spent the whole summer trying to learn frontend better, however I don't have the design talent to make something look amazing. It was a cool project to build an app though and see what mobile development is like.
Styling is hard in React Native. This might be because I opted to use nativewind instead of pure css, but I could not get things lining up like I normally would. For example when trying to add a top-level menu bar, I spent a lot of time trying to get it even positioned right. And when I finally got it sticking at the top, it would not be at the very top. This meant my screen had a white line above the menu bar, and it took me a long time to find a solution that could fix this.
I could not polish anything due to time, having more team members would have meant someone could be assigned to polish while someone else finished functionality. Even at the time of writing this I have 2 hours to submit and I have not finished much of the functionality, which I will be prioritizing before the deadline.

Accomplishments that we're proud of

I think I did a good job deploying the backend and having it seamlessly fetch data when needed.
I am just glad I got it even working in the first place. I have never done any mobile app development before, and I tried using Flutter once but never made anything significant with it.
I got it setup exactly how I wanted in the end using typescript and tailwind
I have some sort of product, even if incomplete. In Hacked Beta, I never managed to produce anything significant so this was a nice step up. I just wish I had more time yesterday to make my project more feature complete, but I could have just pulled an all nighter if I was really worried about it, so it is not a big deal. I'm happy with what I have made.
I am also proud of how far I was able to get on my own, creating a full stack application with some utility.

What we learned

React Native development is a huge pain to get setup with.
Go is still the best language 😃.
JavaScript is still the worst language. 😭
I learned how to setup the Expo Go app for previewing development etc.
I learned the basics of react native components and how they work differently from React.

What's next for Roommate App

Invoice Links. One of my biggest goals for this app that I wasn't able to implement was automatic invoicing for payments. Say you went out for groceries, you could create a payment request, and the app would auto generate a stripe invoice link to process this payment. I have done similar stuff in the past so it would be fairly easy to replicate.
Authentication. Really this app is like a demo right now. I would like to build a proper auth system, but auth can be a massive pain in the ass sometimes. I did not want to spend precious development time on this as I knew I could be banging my head for hours since I have not worked with mobile app auth before.
Household creation. In the backend, every piece of data is associated with a household ID. I did not have time to structure the app in this way, but in the future I would make it so that each user can create one or multiple households that they can see everything in.
Polish. The design currently is very functional and not pretty. I would like to make the app actually look good too.
CI/CD Pipelines. I would like to setup auto deployments so that I don't need to publish and update the app manually. I have heard CodeMagic is good for this but haven't researched any alternatives yet.