Arise

An alarm app that forces you to get out of bed. Interfaces a mobile alarm app client with a desktop web component to encourage a morning route.

Comment

Inspiration

Every day, I have a class at 9 AM, and I too often wake up too late to show up on time. This is an issue that affects not only me but many, or even a majority of college students. This app aims to solve this issue by making you get out of bed when an alarm sounds, rather than letting you hit snooze and go back to sleep.

What it does

Arise is an alarm app that has both a web and mobile component. The mobile component serves as a standard alarm app, allowing users to create alarms and receive audible alerts at the designated times. The difference with Arise is how the web and mobile components interface after the alarm sounds. A normal alarm app allows the user the standard options: snooze, cancel, repeat, etc. Arise, on the other hand, doesn't turn off the alarm until the user opens a link that only works on their computer (or other non-mobile device) and completes a small, fun, and engaging task.

How we built it

In addition to the web and mobile components, Arise contains a server written with Express and Node.js. The server contains API endpoints for users and alarms and uses Prisma as an ORM with a PostgreSQL database hosted by Supabase. The server also uses Socket.io to establish a socket connection to both the web and mobile applications. This allows for real-time bidirectional communication that allows the user to be more engaged with their daily morning task. Finally, the server uses node-schedule to establish cron-jobs that activate the alarms in the mobile app.

The mobile component was made with React-Native, allowing for IOS, Android, and web usage. The useSocket hook abstracts socket logic and allows for event-driven programming by setting a variety of states. Fetch API is used to call backend API routes and SecureStore stores local (hashed) account details.

The web component was made with React and Next.js. The major step in building the web component was establishing a dynamic route that allows for a generated URL to handle authentication and socket connections. Finally, the web component consisted of building a tile-matching game that allows the user to match a tile on their phone to the one highlighted on the web app.

Challenges we ran into

A major challenge I ran into was creating an alarm in React-Native. Expo, the tool I used to work with React-Native, does not have great support for native alarm APIs on IOS and Android. To get around this challenge, I established a cron job in the server every time an alarm was created -- this cron job would send a message to the mobile app at the specified time and tell the app to play a sound, which could act as an alarm. Another significant challenge I encountered was setting up communication with web sockets. Although sockets are relatively straightforward and Socket.io is a great library, the logic behind a real-time application that needs to constantly send updates at every event was difficult to plan out, especially in the environment of a 48-hour hackathon. The data being sent between the mobile and web apps had to be in a very particular order and there needed to be responses to every change made on either side. For example, the game I implemented with sockets was a tile matching game, where the web app knows the order of the tiles and highlights them in order, and the mobile app requires the user to press the tile highlighted on the web app. The factors I had to consider included the initial handshake with the server from the mobile and web apps, starting and ending the game from both sides and key presses from the mobile app that either advance the order or fail.

Accomplishments that we're proud of

An accomplishment I'm proud of is achieving all the goals I initially set for the project At my last and first hackathon, I was overambitious and tried to build a large-scale project with many features. This time, I was realistic and was therefore able to build all the features in the short time allotted. Another accomplishment I'm proud of is using concepts learned in class on this project. In Networks (CS3700), I learned and worked on projects that worked with and managed sockets for communication. As a result, I leveraged that knowledge in this project to achieve a real-time game. This is important for me because it shows that I learned something in the classes I'm taking and that I can apply those concepts to connotations outside of class.

What we learned

Through this project, I learned how to create an app with React-Native, build a fully functional backend with Express.js, and schedule tasks with cron jobs. I also learned how to use sockets with an Express.js backend and allow it to achieve real-time communication between two devices. Finally, I learned some security basics, including hashing and decrypting passwords for authentication.

What's next for Arise

In the future, I want to build more mini-games that engage users in the morning. I also want to establish scores that users can achieve and compare with their friends. This will not only improve engagement but also provide healthy competition that will hopefully incentivize people to wake up earlier.

Built With

Share this project:

Updates