HELLOOOOO!

I know it’s been an eternity since I’ve posted, and that’s because I was working on my entry for the awesome Hashnode x Netlify hackathon! I’m super excited to present to you my entry, Cubedeck!

The Problem 🧮

Lemme explain the purpose of the app by telling you the problem that I wanted to solve. I loved to solve Rubik’s cubes back in 2019 when I was in sixth grade. But after the pandemic started, I sorta just stopped. And I picked it back up now, in 2022, but I couldn’t remember how to solve the cube 💀😭. Once I re-learned, I quickly started losing interest since I couldn’t compete with my friends because we were not meeting physically. The most fun element of cubing was taken out, so I was feeling extremely reluctant to practice. There was no way to track my average solve time, my PB (Personal Best) and in general, I had no medium to store all my solve times, which prevented me from keeping track of my progress. This led me to create a simple web app, which you can use to track all of your solve times easily and also create groups with your friends to compete!

Features 💫

Practice Sessions 🦾

The purpose of a practice session is for a user to store their solve times that are related to a specific time, topic or event. For example, you could have a practice session for a regional competition or your daily routine sessions. Each session can contain an unlimited amount of solves. A session contains these fields of data provided by the user:

Session Title
Session Notes (Description or other info about the session)
Session Type → What puzzle they’re solving, eg: 3x3 cube, pyramix, 4x4, etc...

Of course, all of these details can be modified later on 😎

To use this in a flow you would:

Create a session
Time yourself using a mobile phone’s stopwatch app, or any other stopwatch (like google’s)
Add that time in a session

And after this, you would be able to view custom statistics like average solve time, fastest solve time, etc.

Groups 👥

A group is meant to create a competitive environment for a user and their friends, where they can add their solve times and they can also view their friend’s solves, and create competition within a group. To gamify this feature more, a leader board was created on a group’s page which will display the top solves in a group. A group also has stats like the member with the highest average, group average, etc. All of this is done to recreate a scenario, where friends are physically meeting and solving their cubes.

A group contains:

The Group name
Group description
Group color (all the buttons, tabs, and borders in the group’s page will be displayed with this color)
Group picture (coz why not)

A group has an associated Invite Code, which group members can use to add other people. The invite code is pseudo-random which means it is not fully random. I will fix this by replacing my custom function ~~which I modified from StackOverflow~~ to generate a random string, to a string generated by the UUID library.

Other small features 🎲

Fully responsive (yes, for real. ok maybe not, it’s like 89.73% responsive)
Light/dark mode

Tech stack 🤖

I used these technologies to build my app.

The main programming language I used for the app was TypeScript.

Frontend

React
Next.js - Routing, server-side rendering)
ChakraUI - React UI components, because who wants to use plain CSS ;)
Framer Motion - Animations and Transitions

Backend

Firebase (Authentication)
Firestore (NoSQL database)

Hosting

Netlify and Netlify functions for Next.js

Conventional Coding Practices 🧹

Linting: ESLint (with Husky git hook)
Code Formatting: Prettier (integrated with ESLint config)
Conventional Commit Messages: commitlint (with Husky git hook)

About Netlify 🌐

Netlify is an awesome platform to host web apps, static sites, etc. It has support for various technologies like Hugo, Jekyll, Jamstack, React, etc.

It also has built-in support for Next.js, which made my life SO EASY while deploying Cubedeck! Netlify has functions to package and run Next.js apps easily and efficiently. If you ever need to deploy your web app/site quickly free of cost, I would recommend using Netlify. ~~Also, their Memory card game is so fun~~

Screenshots

Final Words

Since this was the first time I worked on a project for more than 24 hours, I feel pretty proud of what I’ve made, and I’d like to thank Hashnode and Netlify for providing us with such an awesome opportunity to showcase our skills!! Also, I’d love it if you guys could leave a star on the GitHub repo! Feel free to suggest any feature, or report a bug on the GitHub repo, or over here in the comments.

Links

And that’s it for this post, I’ll see you in the next one (which may come after a month. or 6). 🖖

thecatblog