cubedeck

Taking your cubing skills to the moon! 🚀🌔

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

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

Pages

• index - Home route
• groups - Groups route; contains all the groups a user has + buttons for creating and joining a group
• session/[sessionId] - Individual session route
• group/[groupId] - Individual group route
• guide - The guide page

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