Background
In middle school, I was a competitive speedcuber, spending hours repeatedly solving the Rubik's Cube and recording my times to improve my speed. My timer of choice was the standard in the speedcubing community, csTimer. Until recently, though, csTimer did not support login and cloud, meaning I—along with other users—could only see my solve times and data on my local device. This problem sparked the idea of CubeFlow.
Development
I developed the frontend using vanilla HTML and CSS. The timer functionality is all written in JavaScript, which includes the timer itself, pressing the spacebar to start/stop, and generating a random scramble at every new solve. I added Google login functionality shown below with Google Firebase and stored users' times in its NoSQL database, Cloud Firestore, connecting the stack together with Node.js.
Reflections
This project was my introduction to fullstack development. I realized it was quite difficult to import libraries and connect APIs like Firebase using vanilla HTML and JavaScript, which is a big reason I made the switch to React.js. For my next fullstack project, I'm looking forward to using Supabase instead of Firebase, which is a "backend as a service" alternative built on top of PostgreSQL rather than NoSQL.
One feature I would love to add in the future is a 3D visualization of the scramble generated for each solve. This would involve developing a Rubik's Cube library capable of updating the cube's state based on a sequence of moves. With this foundation, I could see the project evolving into creating an AI agent capable of solving the cube.