TaalToolBox App est une application web et mobile axée sur l'apprentissage des langues.

Overview

TaalToolBox App

TaalToolBox App est une application web et mobile axée sur l'apprentissage des langues.

Cette application est développée dans le cadre du cours "Projet d'intégration" du bachelier Technologie de l'informatique à l'EPHEC.

Ce projet utilise la Framework Vue.js 3 pour le Frontend, l'environnement d'exécution NodeJS pour le backend et une base de données PostgreSQL pour la persistance des données.

Pré-requis

  • NodeJS & npm
  • PostgreSQL

Ou la plateforme Docker pour le lancement de ces applications dans un container.

Installation

Clonez le Github :

git clone https://github.com/Rachiid007/projet-integration

Déplacer vous vers le dossier :

cd projet-integration

Setup VScode

Pour éviter les erreurs, veuillez installer l'extension Vue Volar et activer le mode Takeover uniquement sur l'espace de travail !

Démarrage

Rendez-vous dans le répertoire frontend, ouvrez une console et lancez la commande npm install pour installer les dépendances et npm run dev pour lancer le serveur.

En ce qui concerne le répertoire backend, ouvrez une console et lancez la commande npm install pour installer les dépendances et npm run start:dev pour lancer le serveur.

Veillez garder les deux fenêtres des consoles ouvertes.

Comments
  • 19. Élève - Revoir les cartes non trouvées  dans mes prochains deck selon les calculs des poids

    19. Élève - Revoir les cartes non trouvées dans mes prochains deck selon les calculs des poids

    7-En tant qu'élève, je souhaite que les cartes joués se retrouvent dans mes prochains jeux selon leurs poids (Flashcard) afin de bien maîtriser tous les mots

    Activity FlashCards 
    opened by Pourbaix 2
  • BUG: Can not login as a user with hashed passwords

    BUG: Can not login as a user with hashed passwords

    Description:

    When I want to connect as a user that does not have the "admin" role, so either "Professeur", "Créateur" or "Élève", i get an error from the backend side.

    I get this error message: 'Cannot read property of undifined, reading "joinColumns"'

    How to reproduce:

    • Create a new user in the database with his hashed password (argon2 hashed password),
    • Add roles to this user (not 'Admin'),
    • Try to connect to this user and see the error in the backend console.
    opened by Pourbaix 1
  • Add users excel

    Add users excel

    📝 Description

    This PR adds the functionality for a creator to insert users using an Excel file.

    • It creates a component AddUserExcel
    • inserts the data in the database
    • Adds tests for the components
    opened by Rachiid007 1
  • Pipeline CI/CD - GitHub Pages

    Pipeline CI/CD - GitHub Pages

    Tâche technique : CI/CD Pipeline avec GitHub Actions. :rocket:

    📝 Description

    En tant que développeur, je souhaite pouvoir déployer automatiquement mon application sur un serveur de production. La partie frontend devrait être déployée sur GitHub Pages et la partie backend sur un serveur dédié.

    📋 Critères d'acceptation

    • [x] Le déploiement du frontend se fait automatiquement sur GitHub Pages.
    • [ ] Le déploiement du backend se fait automatiquement sur un serveur dédié.
    • [x] Le workflow se lance à chaque push ou pull request sur la branche main.
    • [x] Si les tests unitaires échouent, le déploiement ne se fait pas.
    • [ ] Si les tests d'intégration échouent, le déploiement ne se fait pas.
    • [ ] Si les tests d'acceptation E2E échouent, le déploiement ne se fait pas.
    • [x] Le dossier /dist du frontend doit être disponible sur la branche gh-pages (il contient le code compilé de l'application Vue.js).

    🚀 Tâches

    • [x] Créer un workflow GitHub Actions.
    • [x] Frontend : Lancer les tests unitaires, d'intégration et d'acceptation E2E à chaque push ou pull request sur la branche main.
    • [x] Backend : Lancer les tests unitaires, d'intégration et d'acceptation E2E à chaque push ou pull request sur la branche main.
    • [x] Si les tests unitaires échouent, le déploiement ne se fait pas.
    • [x] Si tous les tests passent, déployer le frontend sur GitHub Pages.
    • [x] Le déploiement du frontend se fait sur la branche gh-pages.
    • [ ] Si tous les tests passent, déployer le backend sur un serveur dédié.
    • [x] Dans les paramètres de GitHub Pages, activer la source gh-pages branch.

    📌 Complexité : 4 (1-5)

    C'est une tâche technique qui nécessite de comprendre comment fonctionne GitHub Actions et comment déployer une application Vue.js sur GitHub Pages.

    🎯 Priorité : 20

    C'est une tâche technique qui est prioritaire car elle permet de déployer automatiquement l'application sur un serveur de production. Cela permet de gagner du temps et d'éviter les erreurs humaines.

    📦 Dépendances

    • [x] Les en frontend et backend doivent être écrits.
    • [x] L'applications doit au moins avoir une page d'accueil.

    📚 Ressources

    📅 Date de livraison : 2022-11-30

    opened by Rachiid007 1
  • 06. Elève - Revoir les cartes ratées dans mon deck

    06. Elève - Revoir les cartes ratées dans mon deck

    Titre

    En tant qu'élève, je souhaite revoir les cartes que je n'ai pas trouvé dans mon deck actuel afin de vérifiez si j'ai assimiler la réponse.

    Description

    Si l'utilisateur a trouver la bonne réponse (qu'il a donc répondu "j'ai trouvé"), la carte est donc retiré du deck et il ne pourra plus retomber dessus lors de cette partie. Si il n'a pas trouvé la bonne réponse, la carte reste dans le deck

    Critère d'acceptation

    • Si l'utilisateur à cliqué sur "je n'ai pas trouvé" après avoir vu la réponse, la carte doit réapparaitre dans le deck.
    • Le nombre de carte restantes dans le deck doit donc resté le même (et ne pas diminuer).
    • La carte doit être rejouer lors de la partie.
    • La carte doit être remise aléatoirement dans le deck (on ne sait pas quand elle réapparaitra dans la partie).

    Info technique

    Tâche

    • Le bouton "je n'ai pas trouvé" a déjà été créé précédemment, il faudra donc faire en sorte que le clique sur ce bouton fasse revenir la carte dans le deck.
    • Il faut remettre la carte dans le deck aléatoirement.

    Complexité

    4 sur 5

    Activity FlashCards 
    opened by Pourbaix 1
  • 04. Elève - Décider si j'ai trouvé ou pas une question

    04. Elève - Décider si j'ai trouvé ou pas une question

    Titre

    En tant qu'élève, je souhaite pouvoir sélectionner parmi trois choix : j'ai trouvé, j'y suis presque, je ne trouve pas. (flashcards)

    Description

    Une fois que l'utilisateur a vu la solution, il peut s'auto-évaluer en choisissant parmi ces trois choix (j'y suis presque, j'ai trouvé, je ne trouve pas). Cela permettra donc d'influencer le taux d'apparition de la flashcard. Si il a bien répondu, elle ne reviendra plus, si il ne trouve pas, elle devra réapparaitre.

    Complexité:

    La US a une complexité de 1 sur 5

    Valeur d'importance

    Cette US est intéressant car il va permettre à l'utilisateur de s'auto évaluer pour pouvoir indiquer s'il avait la réponse en tête, s'il était presque ou s'il n'a pas trouvé.

    Critères d'acceptation

    • Quand l'utilisateur veut savoir la réponse de sa carte , il ne sera pas possible de le voir sans avoir pas clique sur la carte
    • Une fois quand il aura cliqué sur la carte, la réponse s'affichera sur l'écran de l'utilisateur où il sera capable de s'auto évaluer

    Tâches composant User Story

    • Créer un bouton qui valide la réponse si l'élève avait bien la réponse
    • Créer autre bouton qui dit que l'élève était presque
    • Créer le dernier bouton qui dit que l'élève n'a pas trouvé le mot

    Maquette

    Image

    • #5
    Activity FlashCards 
    opened by Pourbaix 1
  • 🧪🚀 fix(Pipeline CI/CD)

    🧪🚀 fix(Pipeline CI/CD)

    This PR run tests in backend and frontend, if it passes we make the build, if it passes too, we create the Docker images and we push them on the Docker Registry!

    opened by Rachiid007 0
  • Feature(authentification): Cookie and JWT Authentification, Access management

    Feature(authentification): Cookie and JWT Authentification, Access management

    Feature

    - Users authentification with cookie session and JWT (Json Web Token )

    Before when user want to be connected to the database he passed normal authenitification with personnal email and password and then we get user information to the database and we store it in the localstorage but this is not the rigth way to do because we introduce major security issues and we don't respect GDPR : General Data Protection Regulation. GDRP demand that user information must be securely stored

    Now we use JWT token, When the user send his email and password, we first check if its a good password that he have send and the with the userId we generate a token available for 24h that the user will use in the cookie when he send http request. we also send a x-xrsf-token which is a random UID store in the session storage of the user. After his connection, each time when the user want to be connected he must send his sessionId that correspond to his token and the x-xrsf-token to prevent crsf attack Cross-Site Request Forgery

    image

    - Manage user access to some administrator page

    For all routes in other to don't give access to user that don't have role, when the user access to some route, we check his role by verifying personnal informations

    image

    So for this we create 4 stores that make async http request which either returns the user role or check if the user exist and if the user is not authentificated, we clear all user session and cookie and redirect user to the database

    - Fix Bug in relation user_response when user complete flashcard game

    BUG: When the user completes a game, we will normally have to store his answers in this table but since the user's answer is linked to the level of the game he is playing, we must also store his level in the column corresponding to the level gambling was present in the entity. But at the time of insertion it was not sent.

    So we first store the level id of the game in the current level store and when the user complete the game, the level id is also send in other to complet all column of the entity.

    - Refactor code to respect camelCase convention

    In the workflow we decide to respect some convention(camelCase) But in certain part of the code I have found some variable that didn't respect it!

    opened by CardinPatson 0
  • 🧪 test(E2E): add an E2E tests #173

    🧪 test(E2E): add an E2E tests #173

    🧪 test(E2E): add an E2E test for the home, login and add user excel pages.

    I configured Cypress to be usable in our project. I added its dependency.

    I also added an excel file and a text file to simulate the E2E tests.

    J'ai également mis à jour l'url de base de "/TaalToolBox/" à simplement "/" dans plusieurs fichier car nous allons déployer le frontend sur notre VPS et non dans les pages GitHub.

    opened by Rachiid007 0
  • :sparkles: feat(login/signin): Adding exception handling in the front…

    :sparkles: feat(login/signin): Adding exception handling in the front…

    …end part of the application:

    Loggin: -> Message when the user enter wrong password or wrong email

    Register: -> Message when registration pass -> Message when email is already used by another user -> Message when an internal error occurs

    opened by Pourbaix 0
  • Block access for non authentificated user

    Block access for non authentificated user

    Description

    Users not authenticated must to be redirected to the login page even if he modifies the url of the browser. We need to check her role for each page and give access to specific page!

    Actual context

    Now routes pages are exposed to all users, which pose a real security concern for the application.

    opened by CardinPatson 0
  • 33. En temps qu' élève je souhaite pouvoir entrainer ma prononciation

    33. En temps qu' élève je souhaite pouvoir entrainer ma prononciation

    Titre:

    En temps qu'élève connecté, je souhaite pouvoir entrainer ma prononciation via un jeu afin de progresser dans la langue.

    Description:

    Un élève devrai avoir accès à un nouveau mode de jeu nommé "Verbalize" qui lui permettrait d'entrainer la prononciation de différents mots. Un mot s'affiche à l'écran et l'élève doit s'enregistrer. Le site lui informe alors de sa bonne ou mauvaise prononciation.

    opened by Pourbaix 0
  • Créateur - Donner les informations sur le nouveau niveau.

    Créateur - Donner les informations sur le nouveau niveau.

    Titre:

    En tant que créateur, je souhaite pouvoir ajouter des informations lorsque je crée un nouveau niveau afin de rajouter des détails.

    Description:

    Une fois que le créateur à choisi la position du nouveau niveau et le type d'activité, il est invité à ajouter un nom, un thème, une difficulté et une description pour le dis niveau. Après avoir fournit les informations, il est redirigé vers une page de création de niveau en fonction du style d'activité choisi.

    Critère d'acceptation

    • Une page est accessible pour permettre aux créateurs d'ajouter des détails pour le nouveau niveau.
    • Tous les informations doivent être fournies pour que le créateur puisse continuer vers les autres pages
    • Il faut donc qu'il remplisse: -> Un champ textarea où il fournis la description du nouveau niveau -> Un champ input text où il fournis le nom du nouveau niveau -> Un select ou il sélectionne le thème du nouveau niveau -> Un champ number où il indique la difficulté du niveau

    Infos technique:

    => La carte doit être disponible et fonctionnelle.

    => Un store doit être initialisé pour stocker les informations données par le créateur et pour que ces dites informations soient utilisables par après dans d'autre page.

    Dépendances API:

    • Une route GET "/theme" doit permettre de récupérer une liste des themes disponibles.

    Tâche

    • Créer une page liée à la route "/infoLevel"
    • Créer un store et y initialiser des variables pour y stocker les infos données par le créateur
    • Créer un champ "textarea" pour la description
    • Créer un champ "text input" pour le nom
    • Créer un champ "number" pour la difficulté
    • Créer un champ "select" pour le thème

    Complexité

    2 sur 5

    Activity 
    opened by Pourbaix 0
  • Eleve - Commencez par l'activité principale

    Eleve - Commencez par l'activité principale

    I. Titre

    En tant qu'élève je souhaite effectuer l'activité principale sur la map la première fois que je me connecte afin de débloquer de nouveau palier d'activité

    II. Description

    Lorsqu'un élève se connecte pour la première fois sur l'application et se rend sur la carte il aura la possibilité de faire l'activité principale qui consiste à la présentation de son école et de la plateforme.

    III. Maquette

    Image

    Image

    opened by CardinPatson 0
Owner
Abderrachid BELLAALI
Abderrachid BELLAALI
TROMBI est une application web permettant de générer un trombinoscope à partir d'un annuaire LDAP.

TROMBI TROMBI est une application web permettant de générer un trombinoscope à partir d'un annuaire LDAP. Elle permet aussi d'afficher l'agenda de cha

Parc national des Ecrins 4 Mar 5, 2022
Site de l'incubateur des territoires basé sur le Design System de l'État

incubateur-territoires Build Setup # install dependencies $ yarn install # serve with hot reload at localhost:3000 $ yarn dev # build for production

Incubateur des Territoires 1 Mar 14, 2022
Gestion des évènements pour l'entreprise stockoss (Test technique)

Stockoss application Evento Exercice 2: Le code est en typescript, mais s'éxécute en js, pour lancer le script il suffit de faire npm i puis node scri

Citar_ 0 Nov 6, 2022
Une page de présentation réalisée avec Vue.js

p-page-presentation Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run bu

Louis_R 1 Oct 6, 2022
WebApp für das jährliche Handballturnier des Pfadikorps Glockenhof. Der HaBaTu Tournament Manager ermöglicht es, automatisch einen Spielplan und Finalspiele zu generieren.

HaBaTu Tournament Manager WebApp für das jährliche Handballturnier des Pfadikorps Glockenhof. Der HaBaTu Tournament Manager ermöglicht es, automatisch

Pfadikorps Glockenhof 2 Nov 6, 2022
The open source Vue.js frontend (mobile and cordova app) for the argentinian carpooling application: Carpoolear

Carpoolear frontend Español Carpoolear es la primera aplicación argentina de Facebook que permite a los usuarios de dicha red social compartir viajes

STS Rosario 80 Dec 14, 2022
A mobile first, handwritten, responsive web app for music fans.

neteast-music-vue Deployed link: https://neteast.netlify.com/ It is a mobile first responsive web app for listening music from Neteast cloud platform

Tato 62 Dec 2, 2022
MedTime is a web/mobile app that helps people with short-term memory set reminders to take their medicine or apply some treatments to a wound.

MedTime ⏰ A web/mobile app that: Helps people set reminders to take their drugs Detect fall via mobile device API, and prompt the userasking if they a

Inventors 6 Jun 6, 2022
The Coach Finder App is an Web App which should help us find a coach that, for example, helps us become better in web development, whatever.

The Coach Finder App is an Web App which should help us find a coach that, for example, helps us become better in web development, whatever.

Asmaa Adel 2 Aug 27, 2022
This project shows how to dockerize web application build using Vue JS web development framework for Java Script programming language.

vue-docker This project shows how to dockerize web application build using Vue JS web development framework for Java Script programming language. Requ

Denny Imanuel 1 Dec 27, 2021
Community mobile application created for the Freqtrade bot made with Vue

Community mobile application created for the Freqtrade bot, made with NativeScript/Nativescript-Vue What does? Dashboard screen where you can see the

Juan de Dios Martínez Vallejo 17 Aug 2, 2022
📝📋Survey App is a simple web application built using Vue js, HTML, CSS, and JavaScript.

survey ?? Table of Contents About Description Project setup ScreenShots Contributors About Survey App is a simple web application built using Vue js,

norhan reda 3 Aug 31, 2022
Survey App is a simple web application built using Vue js, HTML, CSS, and JavaScript

?? Table of Contents About website description Project setup Compiles and hot-reloads for development Website link ScreenShots Contributors About Surv

Asmaa Adel 2 Aug 19, 2022
Sparks bank App is a simple web application built using Vue js, HTML , CSS and firebase data base using fetch to get or post or delete data

spark-bank ?? Table of Contents About Description Project setup ScreenShots Video Website link Contributors About sparks bank App is a simple web appl

norhan reda 4 Oct 19, 2022
Vue shop App is a simple web application built using Vue js, HTML, CSS, and JavaScript

Vue shop App is a simple web application built using Vue js, HTML, CSS, and JavaScript

norhan reda 2 Oct 6, 2022
Restaurant-App - Complete application using Vue.js of a restaurant app.

Restaurant Description here. Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production n

Claudio Jorge Lopes Filho 3 May 16, 2022
CherryTree ctb reader in a web page,avaliable in desktop and mobile

typora-root-url ./ cherrytree-web read cherrytree .ctb file in a browser TODO open multiple files once codebox,image and codebox support Other use sql

FormatFa 1 Jun 17, 2022
This project front-end app based on Vue + vant-ui to build the mobile mall

vue-mobile-store 描述 该项目前端为移动商城app,基于Vue + vant-ui搭建。后台管理系统采用vue + element-ui实现,项目整体采用前后端分离技术,在node端加入一个server服务,模拟服务器环境,为前端提供数据来源。

Banana 2 Feb 12, 2022