Skip to content

JSON Data Model

Sultan Amiour edited this page Jan 4, 2026 · 2 revisions

File Location: src/proceduresdata.json

This file acts as the read-only database for the application. It contains the static definitions of every administrative procedure.

⚠️ Important: This file contains static data only. User progress (e.g., marking as "done") is NOT saved here. It is saved in the browser's localStorage and linked via the id.

Core Concepts

Translation FR/EN

To support English and French, almost every text field uses this object structure. Do not use plain strings for titles or descriptions.

{
  en: string;
  fr: string;
}
+--------------------+-----------------------------------------------------------------------+
| Field              | Description                                                           |
+====================+=======================================================================+
| **id**             | **Unique Identifier.** Must be unique across the entire file.         |
|                    | Used to link user progress.                                           |
+--------------------+-----------------------------------------------------------------------+
| **title**          | The main headline of the card.                                        |
+--------------------+-----------------------------------------------------------------------+
| **icon**           | The name of the icon from Lucide React (kebab-case or camelCase).     |
+--------------------+-----------------------------------------------------------------------+
| **label**          | The tag displayed on the card (e.g., "Housing", "Santé").             |
+--------------------+-----------------------------------------------------------------------+
| **category**       | Determines sorting order and color coding (see Enums below).          |
+--------------------+-----------------------------------------------------------------------+
| **description**    | 1-sentence description for the dashboard card.                        |
+--------------------+-----------------------------------------------------------------------+
| **shortSummary**   | A distinct, punchy summary (e.g., "Cost: €100").                      |
+--------------------+-----------------------------------------------------------------------+
| **status**         | Default state. Always set to ``"todo"``.                              |
+--------------------+-----------------------------------------------------------------------+
| **prerequisites**  | Array of ``id``s that must be completed before this one unlocks.      |
+--------------------+-----------------------------------------------------------------------+
| **timeConstraint** | Optional warning (e.g., "Within 3 months").                           |
+--------------------+-----------------------------------------------------------------------+
| **required**       | Brief list of hard requirements (e.g., "Visa, €80").                  |
+--------------------+-----------------------------------------------------------------------+
| **detailedInfo**   | The content displayed when the modal opens (see below).               |
+--------------------+-----------------------------------------------------------------------+

The category field controls the priority sorting and visual urgency in the UI.

  • "obligatory": Must do. (High Priority / Red color)
  • "highly-recommended": Strong advice. (Medium Priority / Green color)
  • "optional": Good to have. (Low Priority / Gray color)

3. Detailed Info Structure

The detailedInfo object contains the "meat" of the procedure displayed inside the modal/page.

+-----------------------+-----------------------------------------------------------------------+
| Field                 | Description                                                           |
+=======================+=======================================================================+
| **overview**          | The "What is this?" introduction.                                     |
+-----------------------+-----------------------------------------------------------------------+
| **discussion**        | The "Why?" context. Long-form text explaining the nuance of the       |
|                       | procedure.                                                            |
+-----------------------+-----------------------------------------------------------------------+
| **steps**             | The checklist.                                                        |
|                       |                                                                       |
|                       | ``{ en: ["Step 1", ...], fr: ["Étape 1", ...] }``                     |
+-----------------------+-----------------------------------------------------------------------+
| **requiredDocuments** | List of paperwork needed.                                             |
+-----------------------+-----------------------------------------------------------------------+
| **tips**              | Helpful advice or warnings.                                           |
+-----------------------+-----------------------------------------------------------------------+
| **officialLinks**     | Array of external resources.                                          |
+-----------------------+-----------------------------------------------------------------------+

⚠️ Contributor Validation Checklist

Before submitting a Pull Request with data changes:

  • Unique ID: Did you ensure your new id does not conflict with existing ones (1-13)?
  • Bilingual Parity: Did you provide French translations for every new English string?
  • Array Matching: If steps.en has 5 items, does steps.fr also have 5 items? (The UI maps them by index).
  • Valid Category: Is the category strictly one of: obligatory, highly-recommended, or optional?

Clone this wiki locally