Inspiration
I wanted to develop a project that hackers could return to for some low-dedication fun and relaxation, so somewhat of a game was an obvious choice. I was also inspired by Wordle's ability to provide users with fresh, simple challenges on a daily basis. With my idea in mind, I concluded a mobile application revolving around generating and playing mazes would be a great opportunity to exercise skills in mobile development, functional programming, and graph algorithms.
What it does
Users are authenticated with email via Firebase. Once logged in, you can randomly generate a maze until you find one you like enough to publish, or view and play the most recently published mazes in the home tab to compete for the record maze time.
How I built it
The front-end of the build uses React Native on the Expo platform, which allows for easy compilation to both iOS and Android (it also runs on the web, though the UI was not designed for it). It handles exchanges of data using Cloud Firestore, which is also refreshed daily by a Google Cloud function. Mazes can be randomly generated instantaneously with a novel efficient algorithm based upon grabbing random spaces and performing random walks into the final maze from the bottom up.
Challenges we ran into
I originally wanted the maze interfaces to be much more complex. Due to the strength of the algorithm, mazes could be instantaneously generated with large sizes, but it was too complex to utilize a panning canvas for playable mazes, so I utilized a static canvas that stays in place, but may be difficult to traverse at large scales. Furthermore, the maze builder was intended to have far more functionality including maze drawing and validation, but I settled for a simple randomizer that allows users to pick a randomly generated maze they like to publish.
However, I did successfully overcome the challenge of allowing the user to traverse the maze by dragging their finger. It was challenging to detect a drag over spaces that the user didn't start their swiping motion on, but I was able to utilize React Native's Pan Responder and reference the spaces' onPress event from an external component.
Accomplishments that we're proud of
I am most proud of my algorithm to randomly generate mazes, but am also glad that I was able to sharpen my design skills by creating a simplistic user interface without too many glaring holes. Furthermore, I believe I demonstrated my strengths working with Firebase to handle back-end operations given my lack of time to develop a custom solution. Finally, I love the fact that I'm already having fun with the app and believe that it's a worthwhile download for others!
What we learned
My biggest takeaways from the project were the capabilities of React Native, which I was essentially self-teaching myself throughout the process. I was able to discover clever workarounds to state management issues that at least allowed me to develop my primary intended functionality.
What's next for Maze Factory
I'm looking forward to refining my application and publishing it on the iOS App Store and Google Play Store. Some of the things I'm hoping to accomplish beforehand:
- Improve lackluster UI
- Redesign maze builder to handle more functionality, like drawing
- Improve maze trace with fluid graphics
- Move Firebase operations to hidden backend or serverless proxy
- Clean up codebase; extract components, use uniform styling, complete documentation
- Add filters on user-generated content
- Improve error messages on authentication screen
- Add app icons and other necessary files ahead of deployment
- Allow users to share their record times or published mazes via text message and social media
- Add accessibility features including dictation and haptic feedback
Log in or sign up for Devpost to join the conversation.