Local Persistence

This page explains the technical implementation of the "No-Backend" data strategy, defining exactly what is stored on the user's device and the schema used.

Local Persistence

To maintain the "Pure Frontend" philosophy while allowing users to save their progress, epiform relies entirely on the browser's native localStorage API.

This approach ensures that a user can close their tab, restart their browser, or come back days later, and their checklist progress will be exactly where they left it—all without a database.

⚙️ How it Works

The application creates a seamless link between React State and the browser's storage:

1. Interaction: When a user checks a box or changes a setting, the React state (useState) updates immediately.
2. Serialization: A useEffect hook detects this change and converts the relevant state object into a JSON string.
3. Storage: This string is written to localStorage. This operation is synchronous and instant.
4. Rehydration: On page load, the app checks localStorage first. If saved data exists, it is parsed and used to initialize the React state instead of the defaults.

🗄️ Storage Schema

It is crucial to distinguish between Static Data (the text of the procedures) and User State (what the user has achieved). We only save the progress, never the content itself.

Storage Key: paris-student-guide-progress

JSON Structure: The stored object with id 1 is an example.

   [{
 "id": "1",
 "title": {
   "en": "Visa Validation (VLS-TS)",
   "fr": "Validation du visa (VLS-TS)"
 },
 "icon": "passport",
 "label": "immigration",
 "description": {
   "en": "Register your long-stay student visa online with the ANEF.",
   "fr": "Enregistrer votre visa étudiant de long séjour en ligne auprès de l’ANEF."
 },
 "shortSummary": {
   "en": "Online registration required within 3 months",
   "fr": "Enregistrement en ligne obligatoire dans les 3 mois"
 },
 "required": {
   "en": "French address, payment (€70–80)",
   "fr": "Adresse en France, paiement (70–80 €)"
 },
 "timeConstraint": {
   "en": "Within 3 months of arrival",
   "fr": "Dans les 3 mois suivant votre arrivée"
 },
 "status": "todo",
 "category": "obligatory",
 "prerequisites": [],
 "detailedInfo": {
   "overview": {
     "en": "All international students with a long-stay visa (VLS-TS) must validate it online within 3 months of arriving in France. This validation is essential for your legal stay in France and replaces the physical OFII stamp that was previously required.",
     "fr": "Tous les étudiants internationaux titulaires d’un visa long séjour (VLS-TS) doivent le valider en ligne dans les 3 mois suivant leur arrivée en France. Cette validation est indispensable pour séjourner légalement en France et remplace le tampon physique de l’OFII exigé auparavant."
   },
   "discussion": {
     "en": "The ANEF (Administration Numérique pour les Étrangers en France) platform has digitalized the visa validation process, making it more accessible for international students. This procedure is critical as it officially starts your legal residence period in France. Without this validation, your visa is not considered valid, and you may face legal issues if you need to travel outside France and return. The process is entirely online, which means you can complete it from the comfort of your accommodation once you have a French address. The validation fee is mandatory and must be paid online using a credit or debit card. After successful validation, you will receive a confirmation that serves as proof of your legal status in France.",
     "fr": "La plateforme ANEF (Administration Numérique pour les Étrangers en France) a dématérialisé la procédure de validation des visas, la rendant plus accessible aux étudiants internationaux. Cette démarche est essentielle car elle marque officiellement le début de votre période de séjour légal en France. Sans cette validation, votre visa n’est pas considéré comme valide et vous pourriez rencontrer des difficultés juridiques, notamment en cas de sortie et de retour sur le territoire français. La procédure est entièrement en ligne et peut être effectuée depuis votre logement une fois que vous disposez d’une adresse en France. Les frais de validation sont obligatoires et doivent être réglés en ligne par carte bancaire. Après validation, une attestation vous sera fournie et servira de preuve de votre statut légal en France."
   },
   "steps": {
     "en": [
       "Prepare a valid French address (rental agreement, accommodation certificate, or host attestation)",
       "Visit the ANEF website at administration-etrangers-en-france.interieur.gouv.fr",
       "Create an account using your email address and personal information",
       "Select \"Validate my VLS-TS visa\" option",
       "Fill out the online form with your passport and visa details",
       "Upload scanned copies of your passport (photo page and visa page)",
       "Upload proof of your French address",
       "Upload a recent digital passport photo",
       "Pay the validation fee (currently €70–80) using a credit/debit card",
       "Submit your application",
       "Receive confirmation email (usually within 24–48 hours)",
       "Download and save your validation certificate"
     ],
     "fr": [
       "Préparer une adresse valide en France (bail, attestation d’hébergement ou certificat de logement)",
       "Se rendre sur le site de l’ANEF : administration-etrangers-en-france.interieur.gouv.fr",
       "Créer un compte avec votre adresse e-mail et vos informations personnelles",
       "Sélectionner l’option « Valider mon visa VLS-TS »",
       "Remplir le formulaire en ligne avec les informations de votre passeport et de votre visa",
       "Téléverser des copies scannées de votre passeport (page d’identité et page du visa)",
       "Téléverser un justificatif de domicile en France",
       "Téléverser une photo d’identité numérique récente",
       "Payer les frais de validation (actuellement 70–80 €) par carte bancaire",
       "Soumettre votre demande",
       "Recevoir l’e-mail de confirmation (généralement sous 24–48 heures)",
       "Télécharger et conserver l’attestation de validation"
     ]
   },
   "requiredDocuments": {
     "en": [
       "Valid passport with VLS-TS visa sticker",
       "Proof of French address (rental agreement, accommodation certificate, or host attestation)",
       "Digital passport-style photo (recent, color, neutral background)",
       "Credit or debit card for payment"
     ],
     "fr": [
       "Passeport valide avec vignette de visa VLS-TS",
       "Justificatif de domicile en France (bail, attestation d’hébergement ou certificat de logement)",
       "Photo d’identité numérique (récente, en couleur, fond neutre)",
       "Carte bancaire pour le paiement"
     ]
   },
   "officialLinks": [
     {
       "title": {
         "en": "ANEF Official Platform",
         "fr": "Plateforme officielle de l’ANEF"
       },
       "url": "https://administration-etrangers-en-france.interieur.gouv.fr"
     },
     {
       "title": {
         "en": "Campus France – Visa Information",
         "fr": "Campus France – Informations sur les visas"
       },
       "url": "https://www.campusfrance.org"
     }
   ],
   "tips": {
     "en": [
       "Complete this as soon as you arrive and have a French address — don’t wait until the last minute",
       "Save multiple copies of your validation confirmation (digital and printed)",
       "This validation is your proof of legal residence — keep it with your passport",
       "If you plan to travel outside France during your studies, ensure your visa is validated before leaving",
       "The ANEF platform may experience high traffic during peak enrollment periods (September–October)",
       "Contact your university’s international office if you encounter technical issues"
     ],
     "fr": [
       "Effectuez la démarche dès votre arrivée et dès que vous disposez d’une adresse en France — n’attendez pas le dernier moment",
       "Conservez plusieurs copies de votre attestation de validation (numérique et papier)",
       "Cette validation est la preuve de votre séjour légal — gardez-la avec votre passeport",
       "Si vous prévoyez de voyager hors de France pendant vos études, assurez-vous que votre visa est validé avant de partir",
       "La plateforme ANEF peut être saturée pendant les périodes de forte affluence (septembre–octobre)",
       "Contactez le service des relations internationales de votre établissement en cas de problème technique"
     ]
   }
 }
},

...

>>> NOTE: the entry ``slug`` will be added as a property when the ``App.jsx`` is loaded.

🛡️ Privacy Benefits

This architecture offers a "Privacy by Design" guarantee that is superior to traditional web apps:

1. Data Sovereignty: Data literally never leaves the device. It is not sent to Vercel, Google, or any database.
2. Zero Profiling: We do not know who completed which procedure.
3. GDPR Compliance: Since we process zero personal data server-side, the application is naturally compliant with strict privacy laws.
4. Total Control: Users can delete their data instantly by clearing their browser cache.