MatMat

MatMat is an interactive web application designed to help high school students prepare for the Croatian State Matura Mathematics Exam. The platform focuses on learning with understanding, efficient time usage, and long-term knowledge retention by combining spaced repetition, AI assistance, and carefully structured math problems.

🌐 Live website: https://matmat.online

🌐 Backend Repository: https://github.com/matino06/matmat-backend

---

✨ Project Overview

MatMat is not just another practice website or flashcard app. It acts as a personal math tutor, guiding students step by step from fundamental concepts to advanced exam-level problems.

The main goal is simple but ambitious: enable students to reach 100% exam readiness through smart learning instead of longer studying.

---

🚀 Key Features

🧠 Spaced Repetition Algorithm

MatMat uses a spaced repetition system that schedules problem reviews based on the student's performance. Tasks are repeated right before the student is likely to forget them, maximizing long-term retention and learning efficiency.

---

✏️ Step-by-Step Solutions

Every problem includes detailed, pedagogically designed solutions that explain why something works, not just the final answer. The focus is on understanding concepts, not memorization.

---

🤖 AI Assistant

An integrated AI assistant allows students to:

• Ask questions about a specific problem
• Get additional explanations
• See alternative examples
• Receive hints instead of full answers

---

📊 Progress Tracking

On the Progress page, students can clearly see:

• Exam readiness ring showing overall percentage
• Number of tasks scheduled for today
• Today's and upcoming tasks grouped by learning objective
• All learning objectives grouped by field (e.g. Algebra, Geometry), with mastery status

Reaching 100% means the student has covered all material required for the math matura.

---

🔥 Goals & Streaks

On the Goals page, students can track their consistency:

• Set a daily task goal
• View a full activity calendar from the registration date to today
• See current and longest streak
• Track total active days and tasks completed today vs. goal

---

🧩 Structured Learning Path

Problems are organized so that students naturally progress:

• From basic concepts
• To more complex and exam-level tasks

This ensures a smooth learning curve without overwhelming the student.

---

📄 Formula Sheet

A floating Formule button on the tasks page opens a resizable side panel with the official matura formula sheet (tablice i formule), so students can reference formulas without leaving the page.

---

🛠️ Tech Stack

• Framework: SvelteKit
• Language: JavaScript
• UI Components: shadcn/ui
• Styling: Tailwind CSS
• Authentication: Firebase
• AI Integration: MatMat backend (/ai/chat, streamed over SSE)
• Bot Protection: Cloudflare Turnstile
• Frontend Hosting: AWS Amplify

---

🔗 Backend Integration

The MatMat frontend communicates with a custom-built backend via a REST API.

• API Base URL: https://api.matmat.online
• Authentication: Firebase Authentication (JWT-based)
• Data Flow:
  • Fetching math tasks and solutions
  • Submitting task results
  • Progress and statistics tracking

---

🔐 Authentication & Security

• User authentication is handled via Firebase Authentication
• Access to protected routes and API endpoints requires a valid JWT
• Bot and abuse protection is enforced server-side using Cloudflare Turnstile

---

1. Clone the repository

git clone https://github.com/matino06/matmat-frontend.git
cd matmat-frontend

2. Install dependencies

Make sure you have Node.js (v18 or newer) installed.

npm install

3. Start the development server

npm run dev

The app will be available at:

http://localhost:5173