valfranath / apothiquiz

Reflex-learning app for pharmacist students. Third year undergraduate project by @ValentinPerignon, @FrancoisPog and @nathanaelhoun

apothiquiz

Reflex-learning application for pharmacist students.

Third year undergraduate project by Nathanaël Houn, Valentin Perignon and François Poguet, three students at the Université de Franche-Comté (FR). Finished during the internship of Éros Albérola.

Deployment, coding convention and more

You can learn more about this project in our wiki. Production deployment instructions are also on the wiki.

Contributing and developer setup

Contributions, through GitHub issues or code, are welcomed. For code, see the Developer setup on the wiki.

Server API Documentation

The server API documentation can be found here (code)

apothiquiz's Issues

Create minimal webapp

• Hello world
• API request to /api/v1/status

Create a global error component

Add the possibility to configure the training

Needs #92.

As Mr Pudlo asked, the user should be able to configure his training if he wishes to do so. For example, the student can focus only on one or more types of questions.
(It must be possible to do this in a simple and fast enough way)

Improve Profile page view

• Choose your avatar with arrows, not with ugly <select>
• Add the profile picture to the top bar with the username
• Link it the profile page from the username

Remove format and lint npm scripts from CD

Describe the bug
The format and lint scripts (ie prettier and eslint) must be removed from CD because they are dev dependencies.

To Reproduce
Please, do not reproduce it at home. This is done by professionals!

Cropped avatar on mobile in the top bar

A picture > a thousand words

Screenshots

Online / offline banner

Can help

• Basic online/offline badge
• Pill animation

Change all size image of application logo

The service-worker is dead, long live the service-worker

With react-scripts v4.0 or higher, we need to create a service-worker template (see https://github.com/facebook/create-react-app/releases/tag/v4.0.0)

Improve the question generator with new types of question

Question generator

Improve the generator by adding new types of questions following Marc's request, this pull request doesn't aim to add all the necessary types, but enough to generate a game with different types of questions (5 at least).

Marc's request

Système :
A quelle grande classe (= // système1 //) appartient la molécule de // DCI // ?
-> Les 4 propositions sont des valeurs de la colonne système1.

A quelle grande classe (= // système 2 //) appartient la molécule de // DCI // ?
-> Les 4 propositions sont des valeurs de la colonne système2, ayant le même système1.

Quelle molécule appartient à la classe des // système1 // ?
-> Les 4 propositions sont 4 molécules indépendantes.

Quelle molécule appartient à la classe des // système2 // ?
-> Les 4 propositions sont des molécules ayant le même système1, mais pas le même système2.

Classe pharmacologique :

A quelle classe pharmacologique (= // classe1 // ) appartient la molécule de // DCI // ?
-> Les 4 propositions sont des valeurs de la colonne classe1.

A quelle classe pharmacologique (= // classe2 // ) appartient la molécule de // DCI // ?
-> Les 4 propositions sont des valeurs de la colonne classe2, ayant la même classe1.

A quelle classe pharmacologique (= // classe3 // ) appartient la molécule de // DCI // ?
-> Les 4 propositions sont des valeurs de la colonne classe3, ayant la même classe2.

Quelle molécule appartient à la classe pharmacologique des // classe1 // ?
-> Les 4 propositions sont des molécules indépendantes.

Quelle molécule appartient à la classe pharmacologique des // classe2 // ?
-> Les 4 propositions sont des molécules ayant la même classe1 mais pas la même classe2.

Quelle molécule appartient à la classe pharmacologique des // classe3 // ?
-> Les 4 propositions sont des molécules ayant la même classe2 mais pas la même classe3.

Indications:
Quelle est l'indication de la molécule de // DCI // ?
Quelle molécule a pour indication : // indication // ?

Effets indésirables :
Quelle molécule a pour effet indésirable notable : // effet indésirable // ?
Quel effet indésirable notable peut se produire avec la molécule de // DCI // ?

Interactions:
La molécule de // DCI // est // interaction // ?
Quelle molécule est // interaction // ?

Structures chimiques:
Quelle est la structure de la molécule de // DCI // ?
A quelle DCI correspond la structure suivante ?
A quelle classe pharmacologique appartient la molécule de structure suivante ? (mêmes règles que pour les classes pharmacologiques, en suivant la hiérarchie des classes )

Authentification System

• Update database to manage the users
• Simulate the CAS behavior
• Use token to authenticate a request
• Keep users logged in to the app

Install continuous deployement

• Preview deployment following main: beta.glowing-octo-guacamole.nathanaelhoun.fr
• Production deployment following production: glowing-octo-guacamole.nathanaelhoun.fr

Create a simple react component to test a request to server

Update server tests

File test.js must be updated because of PR #19.

Disallow access to some routes when not logged in

Currently, a non-signed-in user can still access to the /profile page with the direct url.
We should use the react-router feature to protect access to these routes
Source : a little article

Set path to relative (in client) & set the proxy

Create a minimal server

Use .env to choose the port

Write Test Cases

Update the database with the new molecule schema

•  Update the database structure to match the Excel file de la madame

Game's party management

Game management

Create the duel management system.

Avatar glitched on Safari.

Describe the bug

On Safari, the avatar doesn't display well.

It's because the contain CSS attribute is not supported on Safari. We should avoid it.

Screenshots

Correct the 'Bearer' spelling mistake

• Change all occurrence of "Barear" by "Bearer"

Fix eslint error

Import data from previous project database

Fill the database with a sample of previous project database.

The good answer is never on the 4th position

• In the question generation, fix the random to allow the good answer to be on the 4th position

Manage users avatar

This issue should require several PR.

• Create the user interface to customize his avatar.
• Store avatars in database.
• Complete the user controller to serve the avatar with user information.

Change proptypes to prop-types

We should use the prop-types instead of the proptypes package, as it's the one mentionned in the ReactJS documentation and it's maintained.

User home page

• User information (success / defeats, blabla...)
• Challenges to play
• Pending challenges

Improve the authentication system

Currently, the authentication system is based on a long lived access token, which is not really secure.
I might be a good idea to improve authentication with an access and refresh token system, for several reasons.

We can follow this example (part. 1 & 2) which seems to be suitable for our project.
For our use, we may store refresh tokens in the database.

What is a refresh tokens ?

Authentication using JWT (JSON Web Token) is very useful for developing cross-platform applications. The flow of the authentication process is :

1. User logs in using their credentials. On a successful login, the server issues an access token which is valid for a certain period of time (say 10 minutes).
2. On every request to a protected resource, the token must be provided in the request as a header.
3. When the token expires after the stipulated time (10 minutes in our case), the user gets logged out of the system and needs to log in again.

The last step can be very irritating from the user’s point of view. Logging into the application every 10 minutes could lead to a very bad user experience. Therefore, to overcome this problem we use something called ‘refresh tokens’.
The idea is to generate two tokens : an access token (valid for 10 minutes) and a refresh token, with a longer lifetime. Every time the access token gets expired, the client side app sends a request to generate a new access token, using the refresh token.

Why refresh tokens are better than long-lived access tokens

JWT tokens are stateless, refresh tokens are usually statefull.
You should look at advantages and disadvantages of statefull vs stateless tokens:

• Stateless tokens can be validated without extra DB/Service call (so they are faster/easier to validate) but it is impossible to revoke them (no reliable logout).
• Statefull tokens may be revoked (reliable logout) but they must be validated via DB/Service call each time (so they are slower).

Long-lived JWT tokens would constitute an increased security risk - attack window would be long if token is stolen.
In combination with refresh tokens, you get the solution somewhere in the middle: Validation is fast and logout is more reliable.

Train view

• Request to the server to get a question
• Show the question
• Buttons to answer
• Timer
• Answer is good or bad

Wrong size of image in the train view

The pillette image being too large, the page can overflow the frame.

Change the way data is inserted into the database after an update.

The way the insertion is done in the current system

Data is only inserted to run tests.

Why do we have to change this ?

• If the database is updated with a new structure which is not compatible with the old data, an error will appear if we don't update the database manually.
• It's not easy to manipulate data in the database, we don't really know what data is inserted, and when it was.

Solution

When the server starts up, in case of database update, the database is first emptied, and the data are inserted after the update, with the script insert_data.sql.
In this way, to properly update the database, we just have to keep the insert_data.sql script consistent with the update.

Install ESLint

As explained here: https://comsystoreply.de/blog-post/enforce-javascript-codestyle-for-your-react-application

Protect against sql injections

Some of the requests directly use parameters in the query string, instead of using the existing functionnality to escape parameters. This is of course not good.

Non exhaustive list:

• server/db/database.js#L66
• server/controllers/user.js#L16

Train improvements (updated)

• Add timer animation
• Add a configuration view (as Mr Pudlo asked)
• Add a summury view
• Add some CSS

Improve HTML semantic

We must improve our HTML semantic. It has an important impact on people with vision problems.
A screen reader (like VoiceOver on iOS) needs a well-constructed HTML document to work.

We could use something like this:

div#root
    nav
    main#{id-page}
        ...

Where id-page corresponds to an id-page is an id specific to each view (quiz, menu, ...).

Import data from Excel

Create a system to import data from an Excel file to the database.

• Parse a CSV file into a JSON exploitable object (#102 )
• Checks the data validity (#174)
• Insert data in database (#117)
• Configure the server route to receive the request with the file to import (#180)
• Create the client view allowing to send the csv files (#182 )

Overflow in Train view

Overflow of the intro of Train view

Create .gitignore

The most important one : .DS_Store 💥

Update the naming style of properties and their values

Currently in the database we are talking about properties and categories of properties, so we prefer to replace them with property and property values.

Update client test

Random order of answers

Describe the bug
It seems that the good answer never appears in the last position.

To Reproduce
You can run our automatic test ./francois.

Expected behavior
The correct answer must appear in one of the 4 positions.

Quiz : answers too long

Create the react directory

Create the data analyzer

The analyzer must check :

• duplicate molecules
• malformed classification
• very similar word, potential typing errors
• the length of values

Update database to manage users and games

Games & users

Database must :

• Store the entire content of a game ( rounds in JSON)
• Stores the players answers to questions of a game
• Store the number of won/lost games by a player

Set up a global state for the client application

• Use this state to update the user's avatar on the topbar

Basic menu

• Button to the train view
• Copyright
• Name of the app (on this view and above the other views)

Quizz generation

• Set the endpoint to get a question
• Set up the question generator