Rubik's Cube Simulator

A 3D Rubik's Cube simulator built with React, Three.js, and .NET.
Rotate faces, view the 2D unfolded layout, and explore the mathematics of the cube.

---

📝 Table of Contents

• About The Project
• Features
• Screenshots
• Technology Stack
• Getting Started
  • Prerequisites
  • Local Development
  • Production env – WIP
• Database Schema
• Testing
• Roadmap

🧐 About The Project

This project is a fully interactive, 3D simulation of a Rubik's Cube, developed as a Single Page Application (SPA). It demonstrates the integration of a modern frontend stack (React, Vite, Three.js) with a robust backend API built on .NET 8.

The core functionality allows any cube face to be rotated clockwise and counter-clockwise, with the 3D model updating in real-time. It also includes an "exploded" 2D view to display the cube's state as a flat matrix.

✨ Features

• ✅ Interactive 3D Cube: A fully rotatable 3D model built with Three.js.
• ✅ Intuitive Face Rotations: Click buttons to rotate any of the 6 faces clockwise or counter-clockwise.
• ✅ Unfolded 2D View: Visualize the cube's state as a flat 9x12 matrix, making it easy to see all faces at once.
• ✅ Backend API: A .NET 8 API handles the cube's state logic and transformations.
• ✅ Comprehensive Unit Tests: The backend logic is thoroughly tested with xUnit.

📸 Screenshots

• Base State

• Rotated Face State

• Exploded View

🛠️ Technology Stack

Frontend

• ReactJS: A JavaScript library for building user interfaces.
• Vite: A modern, fast frontend build tool.
• Three.js: For rendering the 3D cube and handling animations.
• TypeScript: For static typing and improved developer experience.
• Axios: For making HTTP requests to the backend API.

Backend

• .NET 8 API: The backend framework for serving cube logic.
• Swashbuckle: For generating Swagger/OpenAPI documentation.

Development & Tools

• OpenAI: Used to assist with complex mathematical calculations for cube rotations.
• xUnit: The testing framework for the .NET backend.
• Docker: For containerizing the application (work in progress).

🏁 Getting Started

Follow these instructions to get a copy of the project up and running on your local machine.

Prerequisites

You must have the following software installed:

• .NET 8 SDK
• Node.js (which includes npm)
• Git
• Docker

Local Development

1. Clone the repository

   git clone https://github.com/iwanmitowski/rubiks-cube-rotation.git
   cd Frontend
   npm install
   npm run dev
   cd ..
   cd Backend
   cd RubiksCubeRotation

2. Open the .sln run the project

Production env - WIP

1. Clone the repository

    git clone https://github.com/iwanmitowski/rubiks-cube-rotation.git
    cd Backend
    cd RubiksCubeRotation
    docker compose up -d

📈 Database Schema

The application is designed to eventually support user accounts and saved cube states. The planned database schema consists of two main tables:

1. AspNetUsers: The default table from ASP.NET Core Identity for user management.
2. SavedCubes: A custom table to store the state of a user's cube.

Here is the entity definition for a saved cube:

Generated csharp

class SavedCube
{
public int Id { get; set; }
public int UserId { get; set; }
public virtual ApplicationUser User { get; set; }
public string State { get; set; }
public DateTime LastModified { get; set; }
}

🧪 Testing

The backend logic for cube rotations and state management is covered by a suite of 24 xUnit tests to ensure correctness and prevent regressions.

•