CodeMaster

Master technical concepts through an interactive, gamified, and offline-first Progressive Web Application.

✨ Core Features

• 🎮 Gamified Learning System Stay motivated with a robust XP system, daily streaks ("Série"), and a "Daily Challenge" mode that rewards consistent practice with double points.

• 📊 Detailed Analytics Dashboard Visualize your growth with dynamic charts powered by Chart.js. Track your average scores, total quizzes played, and evolution over time.

• 💾 Offline-First Architecture Built with a local-first approach using IndexedDB. All your progress, badges, and question history are stored securely on your device, requiring no internet connection.

• 🏆 Achievement System Unlock unique badges based on your performance, consistency, and mastery of specific categories (e.g., "Speedster", "Perfect Week", "JS Master").

🛠️ Tech Stack

• Framework: Vue 3 (Composition API, <script setup>)
• Language: TypeScript (Strict Mode)
• State Management: Pinia
• Styling: Tailwind CSS v4
• Build Tool: Vite
• Storage: Native IndexedDB (Repository Pattern)
• Testing: Vitest & Playwright

🚀 Getting Started

Follow these steps to get a local copy up and running in less than 5 minutes.

Prerequisites

• Node.js (v20+ recommended) - Download
• npm (Included with Node.js)

1. Installation

Clone the repository and install the dependencies:

git clone https://github.com/yourusername/codemaster.git
cd codemaster
npm install

2. Environment Variables

Create a .env file in the root directory to configure your local environment.

⚠️ Important: Never commit your .env file to version control. It is already included in .gitignore.

Although the project works with defaults, you can customize the following variables:

# Optional: Port for the development server (default: 5174)
VITE_PORT=5174

# Optional: Base URL if deploying to a subdirectory
VITE_BASE_URL=/

3. Run the Development Server

Start the local development server:

npm run dev

The application will be available at http://localhost:5174 (or the port you specified).

⚙️ Configuration / Architecture

Data Persistence

This project uses the Repository Pattern to interact with IndexedDB.

• Location: src/db/
• Schema:
  • questions: Stores the quiz content.
  • sessions: Stores history of played quizzes.
  • categories: Stores metadata for quiz topics.
  • stats: Aggregated user performance metrics.

Question Format

Questions are loaded from JSON files located in public/questions/. You can extend the quiz bank by adding new JSON files following the Question interface defined in src/types/models.ts.

📄 License

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