🎯 NS’App v1.0

🔹 📆 Ajout de seances au calendrier

✅ Calendrier Avec interface responsive modulable « Aujourd’hui, Cette semaine, Ce Mois, Cette Année ».

✅ Intégration par glisser deposer.

🔹 ⚡ Intégration de séances d’entraînement à partir d’une librairie

✅ Catalogue de séances classées par categorie.

✅ Ajout simplifié au calendrier personnel « Bouton Ajouter à mon agenda –>> l’utilisateur prcise une date ».

✅ Modification et suppression.

🔹 🏊‍♂️ Création de séances personnalisées natation

✅ Natation 🏊 : Structuration en séries (Disatnce , répetitions, récupération intra série, récupération inter séries, Type : (crawl, papillon, dos, brasse, jambes, bras, educatif), % de la vitesse max, Distance Totale)

✅ Notes techniques : ( Consignes).

🔹 💪 Création de séances personnalisées musculation

✅ Exercices organisés avec : répétitions, charge, temps de repos, image.
✅ Intégration de vidéos explicatives pour une exécution correcte.

🔹 Utilisateur :

✅ S’inscrit, configure son profil et planifie ses entraînements.
✅ Suit ses performances et interagit avec la communauté.
✅ Gère ses abonnements et accède au support si besoin.

Version 1.0

1️⃣ Inscription & Connexion

📌 Étape 1 : Inscription

• L’utilisateur arrive sur la page d’accueil et clique sur « Commencer ici … ».
• Il remplit un formulaire avec nom, email, mot de passe.
• Validation par email de confirmation.

📌 Étape 2 : Connexion & Authentification

• L’utilisateur se connecte avec son email et mot de passe.
• Redirection vers son tableau de bord personnalisé.

2️⃣ Configuration du Profil & Préférences

📌 Étape 3 : Personnalisation du Profil

• Accès à la page « Mon Profil » pour ajouter des informations :
  ✅ Photo de profil
  ✅ Objectifs sportifs
  ✅ Préférences d’entraînement

📌 Étape 4 : Paramétrage des Notifications

• Activation des rappels et notifications push pour les entraînements.
• Choix du mode de réception (email).

3️⃣ Planification & Gestion des Entraînements

📌 Étape 5 : Accès au Calendrier

• L’utilisateur consulte son agenda avec une vue hebdomadaire/mensuelle.
• Il peut ajouter de nouvelles séances, modifier ou supprimer celles existantes.
• Intégration des entraînements à Google Calendar en un clic.

📌 Étape 6 : Choix des Séances & Plans d’Entraînement

• Consultation des plans d’entraînement prédéfinis.
• Personnalisation des séances en fonction des objectifs.
• Ajout des séances sélectionnées au calendrier personnel. à son tableau de bord « Rubrique mon programme »

📌 Étape 7 : Suivi des Performances

• Visualisation des statistiques (Nombre de séances, distances).
• Ajout de notes et d’observations sur chaque séance.

Version 2.0

4️⃣ Interaction avec la Communauté

📌 Étape 8 : Participation aux Défis & Classements

• Accès à des challenges sportifs et compétitions.
• Classement en fonction des performances et progression.

📌 Étape 9 : Partage & Échange

• Publication de commentaires et retours d’expérience.
• Possibilité d’intégrer des groupes d’entraînement pour s’entraider.

5️⃣ Gestion des Abonnements & Paiements

📌 Étape 10 : Mise à Niveau & Paiements

• Accès à l’onglet « Abonnement » pour gérer son plan (gratuit/premium).
• Paiement sécurisé via Stripe / PayPal.
• Suivi des paiements et historique des transactions.

📌 Étape 11 : Support & Assistance

• Accès à une FAQ détaillée.
• Possibilité de contacter le support via chat en ligne ou email.

🔹 👥 Gestion des Utilisateurs

✅ Visualisation et gestion des profils (actifs, inactifs, premium, gratuits).
✅ Ajout, modification et suppression des comptes.
✅ Attribution de rôles et permissions pour un contrôle précis.

🔹 💳 Gestion des Abonnements

✅ Suivi des abonnements (gratuits et premium) avec historique des transactions.
✅ Activation/désactivation des comptes en un clic.
✅ Paiements et facturation via Stripe et PayPal, avec notifications automatiques.

🔹 🌐 Gestion du Contenu Web

✅ Création, modification et suppression de pages statiques.
✅ Configuration dynamique du contenu pour une personnalisation facile.
✅ Gestion des menus et navigation pour une expérience fluide.
✅ Personnalisation du thème et de l’identité visuelle.

🔹 📝 Gestion des publications 

✅ Création et publication de pages et d’articles .
✅ Modération des commentaires pour une communauté saine.
✅ Catégorisation et filtrage des articles.
✅ Intégration de médias (images, vidéos).

🔹 📂 Gestion des Médias

✅ Bibliothèque de fichiers multimédias avec prévisualisation.
✅ Organisation par catégories et tags pour un accès rapide.

🔹 Backend 🖥️ :

• Laravel 11 (architecture ).

🔹 Frontend 🖥️ :

• React.js 19 (expérience utilisateur ).

🔹 Base de données 🗄️ :

• MySQL avec phpMyAdmin. « Via Mamp Serv »

🔹 Authentification 🔐 :

• JWT / OAuth2 pour une sécurité renforcée.

🔹 Paiements 💳 :

• Stripe / PayPal.

🔹 Automatisation du développement.

• GitHub.

✅ Phase 1 🎨 :

• But, Cibles, Fonctionnalité, Données, Maquettage . S1

✅ Phase 2 ⚙️ :

• Développement backend . S2 « Laravel 11 – Migrations, Controleurs CRUD, Modéles, Seeders »

✅ Phase 3 🖥️ :

• Développement frontend . S3 « SRC, Composantes, fonctinnalités »

✅ Phase 4 🔍 :

• Mise en production .S4  » —> nataswim.net O2Sw »

✅ Phase 6 🎨 :

• Ajustement . S5 —>> design et foctinnalités.

En Local :

📂 app
├── 🔧 backend
├── 🔧 fronted

Outils :

🛢️MySql « PhpMyAdmin » OS

📊 MCD « MySqlWorkBench » »dbdiagram » OS

🛠️ Wireframe « canva » Gimp » OS

🖊️ Dossier « Word Pdf »

🎯 Digrammes « CU + Actvt » « drawio » OS

⚡ Suvi du devellopement « GitHub » OS

📖 Dictionaire des données « Excel »

🛠️ Test « Postman » OS

🔹 Framework et gestion API

• laravel/framework

  → Base du framework Laravel

• laravel/sanctum

  → Authentification API avec tokens (JWT-like)

• laravel/tinker

  → Exécution de commandes Artisan en ligne de commande

• guzzlehttp/guzzle

  → Requêtes HTTP (ex: consommation d’API tierces)

🗄️ Base de données et ORM

• predis/predis

  → Gestion du cache et de la file d’attente avec Redis

• league/flysystem-aws-s3-v3

  → Stockage distant sur AWS S3

• maatwebsite/excel

  → Import/export de données en Excel (optionnel)

• league/csv

  → Gestion de fichiers CSV (optionnel)

🔒 Sécurité et Validation

• mews/purifier

  → Filtrage des entrées utilisateur pour éviter les failles XSS

• propaganistas/laravel-phone

  → Validation des numéros de téléphone

• spatie/laravel-permission

  → Gestion avancée des rôles et permissions

• web-token/jwt-library

  → Gestion avancée des tokens JWT (optionnel)

📡 API et communication externe

• google/apiclient

  → Connexion aux services Google (OAuth, Drive, etc.)

• spatie/laravel-webhook-client

  → Réception de webhooks

• spatie/laravel-webhook-server

  → Envoi de webhooks vers d’autres services

📊 Logs et surveillance

• spatie/laravel-activitylog

  → Enregistrement des activités utilisateurs

• spatie/laravel-backup

  → Sauvegarde automatique de l’application et base de données

• barryvdh/laravel-ide-helper

  → Autocomplétion et documentation pour IDE

• laravel/telescope

  → Outil de debug pour Laravel

• nunomaduro/collision

  → Amélioration de l’affichage des erreurs

• mockery/mockery

  → Tests unitaires et mocks

• phpunit/phpunit

  → Framework de tests unitaires PHP

• fakerphp/faker

  → Génération de fausses données pour tests

• friendsofphp/php-cs-fixer

  → Formatage du code PHP

💻 Frontend (React 19)

Laravel étant un backend API-first, il n’a pas besoin de packages frontend. Mais pour React 19, voici les essentiels à installer côté frontend.

🔹 Core (React 19)

npm install react@19 react-dom@19 react-router-dom@latest

🔒 Authentification et API

npm install axios react-query

• axios

  → Requêtes API

• react-query

  → Gestion avancée des requêtes API et cache

🎨 UI & State Management

npm install tailwindcss zustand

• tailwindcss

  → Styling rapide et moderne

• zustand

  → Gestion simple de l’état (alternative légère à Redux)

📦 Formulaires & Validation

npm install react-hook-form yup

• react-hook-form

  → Gestion des formulaires efficace

• yup

  → Validation des formulaires côté frontend

📊 Tables et UI

npm install @tanstack/react-table @headlessui/react

• @tanstack/react-table

  → Gestion avancée des tables (data tables)

• @headlessui/react

  → Composants UI accessibles (dropdown, modals, etc.)

🧪 Tests

npm install vitest @testing-library/react

• vitest

  → Tests unitaires rapide pour React

• @testing-library/react

  → Tests d’interfaces utilisateur

Pourquoi  ?

✅ Clarifier et organiser le projet d’App
✅ Détecter les eventuelles erreurs avant la creation
✅ Documenter le projet

__________

Veille 

UML (Unified Modeling Language) est un langage de modélisation visuelle utilisé en ingénierie logicielle pour représenter, concevoir et documenter des systèmes informatiques. Il permet de structurer et de visualiser les différentes composantes d’un projet sous forme de diagrammes.

Principaux objectifs d’UML :

Faciliter la conception et l’architecture logicielle.
Aider à la communication entre les parties prenantes (développeurs, analystes, clients…).
Documenter le système pour en assurer la maintenance et l’évolution.

Les types de diagrammes UML :

UML est composé de 14 types de diagrammes, répartis en deux catégories principales :

1. Diagrammes structurels (décrivent la structure statique du système)

Diagramme de classes : représente les classes, leurs attributs, méthodes et relations.
Diagramme d’objets : montre une instance spécifique des classes avec leurs valeurs.
Diagramme de composants : illustre la structure et l’organisation des composants logiciels.
Diagramme de déploiement : décrit la répartition des composants sur le matériel (serveurs, bases de données, etc.).
Diagramme de structure composite : détaille l’organisation interne d’une classe ou d’un composant.
Diagramme de packages : organise les éléments du système en regroupements logiques.

2. Diagrammes comportementaux (décrivent la dynamique du système)

Diagramme de cas d’utilisation : montre les interactions entre les utilisateurs (acteurs) et le système.
Diagramme d’activités : représente le flux des processus métier ou des algorithmes.
Diagramme de séquence : illustre les interactions entre objets sous forme de messages échangés au fil du temps.
Diagramme de communication : met en avant les relations et échanges entre objets.
Diagramme d’états-transitions : décrit les différents états d’un objet et leurs transitions.
Diagramme de synchronisation (temps réel) : montre comment les objets interagissent en respectant des contraintes temporelles.
UML est très utilisé dans la modélisation orientée objet et peut être combiné avec d’autres méthodologies comme SCRUM, Agile, et MERISE.

diagrams.net

—- (Use Case Diagram)

• Montrer les fonctionnalités principales du système
• Définir les interactions entre les utilisateurs et le système

Introduction :

La base de données sera organisée autour des cinq tables principaux :

1. exercices
2. entraînements
3. plans
4. utilisateurs
5. rôles

Le schéma initial globale sera composé de 11 tables, chacune aura un but spécifique dans le cadre de ce projet  :

• Gestion des utilisateurs et rôles (users, roles)
• Gestion des contenus (exercises, workouts, plans, pages)
• Association des éléments (workout_exercises, plan_workouts, workout_swim_sets)
• Gestion des fichiers (uploads)
• Détails des series des séances de natation (swim_sets)

Table : exercises
Contient les exercices que les utilisateurs peuvent créer

id  — Identifiant unique de l’exercice
title  — Titre de l’exercice
description  — Description détaillée
exercise_level  — Niveau de difficulté
exercise_category  — Catégorie de l’exercice
upload_id  — ID du fichier uploadé associé 
user_id  — Créateur 
created_at — Date de création
updated_at — Date de mise à jour

Table : pages
Contient les pages de contenu créées par les admins

id
title
content
page_category
upload_id — ID du fichier uploadé associé
user_id — Créateur 
created_at
updated_at

Table : plans
Contient les plans d’entraînement

id
title
description
plan_category
user_id — Créateur
created_at
updated_at

Table : plan_workouts
Relation entre les plans et les séances

plan_id
workout_id 

Table : roles
Définit les rôles des utilisateurs

id
name
created_at
updated_at

Table : swim_sets
Contient les séries de natation

id
workout_id 
exercise_id 
set_distance
set_repetition
rest_time

Table : uploads
— Gère les fichiers uploadés

id
filename
path
type
user_id 
created_at
updated_at
FOREIGN KEY

Table : users
Contient les informations des utilisateurs

id
role_id 
username
password
email
first_name
last_name
created_at
updated_at

Table : workouts
Contient les séances d’entraînement

id
title
description
workout_category
user_id 
created_at
updated_at

Table : workout_exercises
Relation entre les séances et les exercices

workout_id 
exercise_id 

Table : workout_swim_sets
Relation entre les séances et les swim_sets

workout_id
swim_set_id

Table : myliste
Contient les listes personnelles des utilisateurs

id
user_id
title
description
created_at

Table : myliste_items
Stocke les éléments ajoutés dans une liste (exercices, séances, plans)

id
myliste_id  –– Liste à laquelle l’élément appartient
item_id — ID de l’exercice, séance ou plan
item_type — ENUM(‘exercise’, ‘workout’, ‘plan’)  — Type de l’élément

Les relations One-to-Many 

• users → exercises —  1:N —- One-to-Many — Un utilisateur peut créer plusieurs exercices.
• users → pages 1:N —- One-to-Many — Un utilisateur peut créer plusieurs pages.
• users → workouts 1:N —- One-to-Many — Un utilisateur peut créer plusieurs séances d’entraînement.
• users → plans 1:N —- One-to-Many — Un utilisateur peut créer plusieurs plans d’entraînement.

Les relations Many-to-Many 

• workouts ↔ exercises N:M —- Many-to-Many — Un entraînement peut contenir plusieurs exercices, et un exercice peut être utilisé dans plusieurs entraînements.
• plans ↔ workouts N:M —- Many-to-Many — Un plan peut contenir plusieurs séances d’entraînement, et une séance peut être dans plusieurs plans.
• myliste ↔ exercises/workouts/plans N:M —- Many-to-Many — Une liste peut contenir plusieurs types d’éléments, et un élément peut être dans plusieurs listes.