VueTrainingLab

VueTrainingLab is a front-end training project built with Vue.js 2. The repository provides a complete and structured application used as a reference for learning modern Vue development practices. The goal of this project is to explore Vue 2 concepts progressively through dedicated training branches while preserving a fully functional, final implementation on the main branch.

---

📌 Project Context

• The final branch contains the final, complete, and stable version of the application.
• The project is used as a training environment where new features and concepts are progressively reimplemented.
• Each training step is developed on its own branch, following a predefined order.

---

🏗️ Application Overview

The application manages a list of digital subscriptions (e.g. Netflix, Spotify). It allows viewing, adding, editing, and deleting subscriptions directly in the Vuex store. Data is not persisted beyond runtime.

Key features:

• Vue.js 2 + Options API
• Vue Router for navigation
• Vuex for global state management
• vue-i18n for multilingual support (EN / FR)
• Reusable UI components
• Data initialization from subscriptions.json

---

📂 Project Structure

src/
├── App.vue
├── assets/
├── components/
│   ├── AppHeader.vue
│   ├── LanguageSelector.vue
│   ├── SubscriptionCard.vue
│   ├── SubscriptionForm.vue
│   ├── SubscriptionList.vue
│   └── SubscriptionModal.vue
├── data/
│   └── subscriptions.json
├── i18n/
│   ├── index.js
│   └── locales/
│       ├── en.json
│       └── fr.json
├── main.js
├── pages/
│   ├── HomePage.vue
│   ├── SettingsPage.vue
│   └── SubscriptionsPage.vue
├── router/
│   └── index.js
├── store/
│   ├── index.js
│   └── modules/
│       └── subscriptions.store.js
└── styles/
    └── main.scss

---

🚀 Branches Strategy

🔒 Main Branch

main

• Contains the initialized project
• Must not be modified during training
• Serves as the source of truth for the completed application

🎓 Training Branches

training_lab_<number>

🏁 Final Branch

final

• Contains a production-ready version derived from main
• Used as a clean reference after all modules are completed

---

🌍 Internationalization

The application supports two languages:

/src/i18n/locales/en.json
/src/i18n/locales/fr.json

Switching languages is handled by the LanguageSelector component.

---

🗄️ Data Handling

• Initial data lives in /src/data/subscriptions.json
• Loaded into Vuex at startup
• Modifications are not persisted
• Closing or restarting the application resets the state

---

⚡ One-Line Summary

VueTrainingLab is a Vue.js 2 front-end training environment where each branch represents a learning step, and the main branch contains the final, fully implemented application.