..

UEFA C course experience

UEFA C course experience

Materials

idea: create simple app where UEFA C candidates can go through questions from previous exams

2026-01-12 continued with extracting questions from UEFA C exams

2026-01-19 finished moving UEFA C exam questions from Vedran’s document into google sheets

2026-01-20

2026-01-23

- personal projects
    - UEFA C quiz app
        - sorting out questions, starting from PNI
        - on writing product specification
            - https://goberoi.com/on-writing-product-specs-5ca697b992fd
        - product specification
            
            This **Product Requirements Document (PRD)** serves as the single source of truth for the **UEFA C Coach Hub** MVP. It defines the "what" and "why" to ensure the technical implementation aligns with your goals.
            
            ---
            
            # PRD: UEFA C Coach Hub (MVP)
            
            **Status:** Draft / Ready for Implementation
            
            **Author:** Gemini (PM Mode)
            
            **Target Audience:** UEFA C Course Participants
            
            ---
            
            ## 1. Executive Summary
            
            The **UEFA C Coach Hub** is a lightweight web application designed to fix the fragmented user experience of the current "Coach Diary" app. It provides a centralized repository for class materials (notes, videos, presentations) and an interactive quiz engine to track individual learning progress using a "self-grading" mechanism.
            
            ## 2. Problem Statement
            
            - **Information Fragmentation:** Participants struggle to find specific class notes, previous exam questions, and video links spread across various platforms.
            - **Poor UX:** Existing tools lack an intuitive interface for tracking which topics have been mastered.
            - **Ineffective Study Tools:** There is no centralized way to practice exam-style questions with instant feedback or history tracking.
            
            ## 3. Goals & Success Metrics
            
            - **Centralization:** 100% of course modules accessible from a single dashboard.
            - **Engagement:** Participants can track their progress through every question in the CSV database.
            - **Simplicity:** No complex sign-up process; "One-click" identity setup.
            
            ---
            
            ## 4. Target User & User Stories
            
            **Primary Persona:** A UEFA C coaching candidate preparing for theoretical and practical exams.
            
            | **ID** | **User Story** |
            | --- | --- |
            | **US.1** | As a coach, I want to enter my name once so the app remembers my progress on my device. |
            | **US.2** | As a coach, I want to see a list of classes (by "Predmet") so I can quickly access materials. |
            | **US.3** | As a coach, I want to take a randomized quiz for a specific class to test my knowledge. |
            | **US.4** | As a coach, I want to see my previous answer history for a question to see if I am improving. |
            | **US.5** | As a coach, I want to self-grade my open-ended answers against a "correct" reference. |
            
            ---
            
            ## 5. Functional Requirements (MVP)
            
            ### 5.1 Identity Management (The "Light Auth")
            
            - **Local Identity:** Upon first visit, users are prompted for a Name/ID.
            - **Persistence:** This ID is stored in `localStorage`. The backend uses this ID to associate "Answer History" in the SQLite database.
            
            ### 5.2 Class Dashboard
            
            - **List View:** Display classes filtered by the `Predmet` column.
            - **Metadata:** Display Class Name, Date, Type (Live/Online).
            - **Resource Links:** Direct buttons to external Google Drive folders for:
                - Class Notes (PDF/Doc)
                - Presentations (Slides)
                - Video Recordings
            
            ### 5.3 Quiz Engine
            
            - **Modes:** 1. **Browse Mode:** View all questions for a class in a list.
                
                2.  **Quiz Mode:** Questions presented one-by-one in a randomized sequence.
                
            - **Question Types:**
                - **Multiple Choice:** Radio button selection + Instant "Correct/Incorrect" feedback.
                - **Open-Ended:** Text area for user input + "Show Answer" button + "Mark as Correct" self-grade button.
            - **History:** Below every question, display a small log: *"You answered this [Correct/Incorrect] on [Date]"*.
            
            ---
            
            ## 6. Technical Specifications
            
            ### 6.1 Data Schema (SQLite)
            
            - **`questions`**: `id`, `subject_code` (Predmet), `text`, `type`, `correct_answer_reference`.
            - **`user_attempts`**: `id`, `user_id_string`, `question_id`, `is_correct`, `timestamp`, `user_provided_answer`.
            
            ### 6.2 Deployment Strategy
            
            - **Frontend:** Hosted on **Vercel** (Standard for Vue.js; free, fast, and handles global CDN).
            - **Backend:** Hosted on **Render** (Free tier supports FastAPI + SQLite).
            - **Database:** SQLite file stored on a persistent disk (Render "Web Service" with a Disk attach) or simplified by using a managed service like **Supabase** if persistence becomes an issue.
            
            ---
            
            ## 7. Out of Scope (Post-MVP)
            
            - Global Leaderboards.
            - Social login (Google/Facebook).
            - Native Mobile App (iOS/Android) stores.
            - Automated AI grading for open-ended questions.
            
            ---
            
            ### Next Step for you:
            
            I can now generate the **Backend API routes** in FastAPI to handle the `user_attempts` logic, or I can provide the **Vue.js Dashboard component** code to display your classes. Which would you like to start with?
            
        - initial [CLAUDE.md](http://CLAUDE.md) file
            
            ```python
            # UEFA C Coach Hub - Project Memory
            
            ## Project Overview
            A web application for UEFA C coaching participants to access class materials and practice exams via a quiz engine.
            
            ## Tech Stack
            - **Frontend:** Vue.js 3 (Vite), Pinia (State), Vue Router, Tailwind CSS (Styling).
            - **Backend:** FastAPI (Python), SQLAlchemy/SQLModel.
            - **Database:** SQLite (for simple, persistent local storage).
            - **Data Source:** `questions.csv` for initial quiz seeding.
            
            ## Technical Rules & Patterns
            - **Identity:** Use `localStorage` to store `userName`/`userId`. No full Auth.
            - **Communication:** Frontend calls FastAPI via `axios`. Base URL configured in `.env`.
            - **Formatting:** - Vue: Use Composition API `<script setup>`.
              - Python: Follow PEP8; use Type Hints for FastAPI models.
            - **Data Mapping:** The CSV column "Predmet" maps to Class/Subject grouping.
            
            ## Core Workflows
            1. **App Load:** Check `localStorage` for user. If null, show "Identity" modal.
            2. **Dashboard:** Fetch classes from `/api/classes`. Link to Google Drive.
            3. **Quiz:** Fetch shuffled questions via `/api/quiz/{subject_code}`.
            4. **Tracking:** POST results to `/api/attempts` to track history.
            ```
            
        - TODO list
            
            ## 2. MVP Breakdown & TODO List
            
            I have broken this down into **6 Sprints**. This allows you to have a functional "Dashboard" before you even touch the complex Quiz logic.
            
            ### Sprint 1: Project Foundation 🏗️
            
            - [x]  Initialize Vue.js project using `npm create vue@latest`.
            - [ ]  Initialize FastAPI project with `main.py` and `requirements.txt`.
            - [ ]  Create `README.md` and `CLAUDE.md`.
            - [ ]  Set up Tailwind CSS in the Vue project for quick styling.
            
            ### Sprint 2: Data & Backend Skeleton 📂
            
            - [ ]  Place `questions.csv` in `backend/data/`.
            - [ ]  Write Python script to parse CSV and map "Predmet" to Class entities.
            - [ ]  Set up SQLite database with `SQLAlchemy`.
            - [ ]  Create API endpoint `GET /classes` (Returns list of unique subjects + hardcoded Drive links).
            
            ### Sprint 3: The "Coach's Dashboard" (Frontend) 🖥️
            
            - [ ]  Create "Identity Modal" to capture User Name and save to `localStorage`.
            - [ ]  Create `DashboardView.vue` to fetch and display Class Cards.
            - [ ]  Implement "External Link" buttons for Drive, Notes, and Videos on cards.
            
            ### Sprint 4: The Quiz Engine (Logic) 🧠
            
            - [ ]  Create API endpoint `GET /questions/{subject}` (Returns shuffled questions).
            - [ ]  Build `QuizView.vue` in Vue.
            - [ ]  Implement UI logic to switch between **Multiple Choice** (Radio buttons) and **Open-Ended** (Text area).
            - [ ]  Implement "Self-Grading" toggle for Open-Ended questions.
            
            ### Sprint 5: Progress Tracking 📊
            
            - [ ]  Create API endpoint `POST /attempts` to save if a user got a question right/wrong.
            - [ ]  Create API endpoint `GET /history/{user_id}/{question_id}`.
            - [ ]  Add a "History" list under each question in the Quiz UI showing past 3 attempts.
            
            ### Sprint 6: Deployment & Polish 🚀
            
            - [ ]  Configure `CORS` in FastAPI to allow requests from the frontend URL.
            - [ ]  Deploy Backend to Render (with SQLite persistence).
            - [ ]  Deploy Frontend to Vercel.
            - [ ]  Final Smoke Test: Complete a quiz and verify progress is saved.
        - project progress tasks breakdown
            
            To provide Claude with a manageable context and allow you to develop incrementally, I have expanded the PRD into detailed **User Stories** with associated **Developer Tasks**.
            
            Since you are starting with the frontend, the tasks are designed for a **"Frontend-First"** approach. This means you will use **Mock Data** and **Mock Services** to simulate the backend API.
            
            ---
            
            ## 1. User Stories & Acceptance Criteria
            
            | **ID** | **User Story** | **Acceptance Criteria** |
            | --- | --- | --- |
            | **US.1** | **Identity Setup** | User can enter a name. The app saves it to `localStorage` and never asks again. The user can see their name in the header. |
            | **US.2** | **Course Dashboard** | User can see a grid of classes. Each card shows the subject name, type (Live/Online), and links to Drive/Notes. |
            | **US.3** | **Quiz Mode Selection** | User can click "Start Quiz" on a class card and be redirected to a randomized quiz view for that subject. |
            | **US.4** | **Interactive Quiz** | Multiple-choice questions show options; Open-ended show a text area. Both give feedback (Correct/Incorrect/Reference answer). |
            | **US.5** | **Self-Grading Logic** | For open-ended questions, the user can click "I got it right" or "I got it wrong" after revealing the reference answer. |
            | **US.6** | **Attempt History** | When viewing a question, the user sees a list of their last 3 attempts (Date + Result). |
            
            ---
            
            ## 2. Developer Task Breakdown (Frontend-First)
            
            ### Phase 1: Foundation & Mocking
            
            - **Task 1.1: Setup Project & Theme:** Initialize Vue 3 (Vite), install Tailwind CSS, and set up a basic layout (Navbar + Content Area).
            - **Task 1.2: Mock Data Creation:** Create `src/mocks/data.js`. Export a hardcoded array of `classes` and a JSON object of `questions` keyed by subject code.
            - **Task 1.3: Mock API Service:** Create `src/services/api.js`. Write functions (e.g., `getClasses()`, `getQuestions(id)`) that return `Promises` resolving your mock data. This makes switching to FastAPI later as simple as changing the URL.
            
            ### Phase 2: User Onboarding & Dashboard
            
            - **Task 2.1: Identity Guard:** Create a `UserStore` (Pinia). If `userName` is missing from `localStorage`, show a fullscreen overlay/modal to collect it.
            - **Task 2.2: Class Card Component:** Build a reusable component that takes a "Class" object and renders the UI (Title, Type Badge, Drive Buttons).
            - **Task 2.3: Dashboard View:** Map over `api.getClasses()` to render the grid.
            
            ### Phase 3: The Quiz Engine (Frontend Logic)
            
            - **Task 3.1: Quiz State Machine:** Create `QuizView.vue`. Implement state for `currentQuestionIndex`, `shuffledQuestions`, and `userAnswers`.
            - **Task 3.2: Dynamic Question Renderer:** Build a component that uses `v-if` to switch between a `MultipleChoice` UI and an `OpenEnded` UI based on the question type.
            - **Task 3.3: Feedback & Navigation:** Add a "Submit" button that triggers the "Correct/Incorrect" state and a "Next" button to increment the index.
            
            ### Phase 4: Local Progress Tracking
            
            - **Task 4.1: Attempt Logger:** Create a function that saves "Attempts" to a separate key in `localStorage` (e.g., `uefa_history`).
            - **Task 4.2: History Component:** In the quiz, add a small section that filters `localStorage` for the current `questionId` and displays the last few timestamps.
            
            ---
            
            ## 3. How to Prompt Claude with these Tasks
            
            To keep context small, give Claude **one task at a time**.
            
            **Example Prompt:**
            
            > "I am working on Phase 2, Task 2.1 of my UEFA C App. Please help me create a Pinia store called useUserStore that checks for a 'userName' in localStorage. If it's missing, create a Vue component for a simple onboarding modal."
            > 
            
            ### Next Step for you:
            
            Would you like me to generate the **Mock Data file** (`src/mocks/data.js`) including some sample UEFA C subjects and questions so you have something to render immediately?
            
            [Building a Quiz App in React or Vue](https://www.youtube.com/watch?v=jK5zzSA2JHI)
            
            This video demonstrates how to move from hardcoded questions to a local JSON file, which is the exact first step you'll take in your frontend-first development approach.

2026-01-24

2026-01-27

2026-01-28

2026-01-29

2026-02-07

2026-02-08

2026-02-23

2026-02-24

2026-02-25

2026-02-26

2026-02-28

2026-03-10

2026-03-11

2026-03-17

2026-03-18

2026-03-19

2026-03-23

2026-04-01