<p align="center"> <img src="https://i.imgur.com/7pmIcEP.png" alt="cubedeck-img"> </p> <p align="center"> <img src="https://api.netlify.com/api/v1/badges/ccb24bd7-1849-451c-b725-ed327f6878d7/deploy-status" /> <img src="https://img.shields.io/github/stars/carrotfarmer/cubedeck" /> <img src="https://img.shields.io/github/license/carrotfarmer/cubedeck" /> </p> <p align="center"> <h1>cubedeck</h1> <p>Taking your cubing skills to the moon! 🚀🌔</p> </p>

The app is live at cubedeck.netlify.app

About

Cubedeck is a web application that is designed to assist cubers to keep track of their progress by and improve themselves by:

helping them easily log their solve times and obtaining stats about their solves
creating practice sessions to segregate their solves
creating and joining friend groups, to compete for the best solves

Screenshots

session screenshot groups screenshot groups indiv ss home page

Technologies

React
Next.js
ChakraUI
TypeScript
Firebase (Auth/Firestore)
Netlify/Netlify Functions (Hosting)

Project Structure

The code base mainly contains React components in the components directory, and Next.js pages in the pages directory.

Components

Most of the code lies in the components folder in src.

groups - Contains components which is involved in managing groups (creating, leaderboard etc.)
lpg - Landing page
sessions - Contains components involved in managing individual user sessions.
solves - Manages solves in a user session
std - Standard components like navbar etc.
utils - Utility components

Running Locally

Clone the repo

git clone https://github.com/carrotfarmer/cubedeck.git

Install all dependencies

yarn

Create a firebase project
Add your firebase credentials to a .env file like so:

Check out .env.example

NEXT_PUBLIC_API_KEY=
NEXT_PUBLIC_AUTH_DOMAIN=
NEXT_PUBLIC_PROJECT_ID=
NEXT_PUBLIC_STORAGE_BUCKET=
NEXT_PUBLIC_MESSAGING_CENTER_ID=
NEXT_PUBLIC_APP_ID=

Run the app

yarn dev

Cubedeck

Install / Use

README