Docerium

---

Welcome to Docerium, an all-in-one web application designed to be the ultimate tool for teaching and learning. Docerium integrates a powerful suite of tools including an interactive whiteboard, a dynamic graphing calculator, and a real-time markdown notebook, making it easier than ever to visualize concepts, solve problems, and take notes.

---

✨ Features

• Interactive Whiteboard: A fully-featured digital whiteboard powered by Excalidraw. Perfect for drawing diagrams, sketching ideas, and collaborating in real-time.
• Dynamic Graphing Calculator: Plot multiple functions, zoom in and out of the coordinate plane, and analyze mathematical expressions with ease, powered by the Desmos API.
• Live-Preview Notebook: A split-screen markdown editor that renders LaTeX equations and markdown syntax as you type, providing immediate visual feedback for your notes.
• Persistent State: Your work on the whiteboard, grapher, and notebook is automatically saved to local storage, so you can pick up right where you left off.
• Sleek, Modern UI: A clean and intuitive interface with a macOS-inspired dock for easy navigation between tools.

---

🛠️ Tech Stack

This project is built with a modern, robust technology stack:

• Framework: Next.js
• Language: TypeScript
• UI Library: React
• State Management: Jotai
• Styling: SCSS and Tailwind CSS
• Whiteboard: Excalidraw
• Graphing: Desmos API and Math.js
• Markdown & LaTeX: Katex

---

🚀 Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

Make sure you have Node.js (version 20.0 or higher) and npm installed on your machine.

Installation

1. Clone the repository:

   git clone https://github.com/docerium/docerium.com.git
   cd docerium.com/public

2. Install NPM packages:

   npm install

Running the Development Server

Once the dependencies are installed, you can start the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result. The page will auto-update as you edit the files.

---

Usage

Navigate between the three main tools using the icons in the dock:

• Whiteboard: Use the various tools to draw, write, and create diagrams. Your canvas is saved automatically.
• Graphs: Enter mathematical expressions (e.g., sin(x) * x) into the input fields. You can add or remove functions, and the graph will update in real-time. Use your mouse or trackpad to pan and zoom.
• Notebook: Write in the left pane using markdown and LaTeX syntax. A live preview will be rendered in the right pane.

---

📂 Project Structure

src/
    ├── app/                  # Next.js App Router pages
    │   ├── graphs/
    │   ├── notebook/
    │   └── whiteboard/
    ├── components/           # Reusable React components (like Dock)
    ├── store.ts              # Jotai atoms for global state management
    └── styles/               # Global and component-specific SCSS files

---

🤝 Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". For more details, see the contributing guide.

---

📄 License

Distributed under the MIT License. See LICENSE for more information.