Introduction

Klemn - Réseau social pour les personnes en informatique

Présentation

Cette application web est un réseau social pour développeurs qui a été développée dans le cadre du cours PROJET DE DÉVELOPPEMENT DE LOGICIEL (420-5GD-BB).

Inspiré entre autre par GitHub, Reddit, Twitter (maintenant 𝕏), LinkedIn, StackOverflow ainsi que de Mastodon.

---

Scripts Disponibles

Dans ce répertoire de projet, vous pouvez exécuter ces commandes:

Pour installer toutes les dépendances du projet:

npm install

Pour démarrer le serveur d'API:

node ./server/serveur.js

Pour démarrer l'application React en mode développement:

npm start

Il est important de noter que vous devrez aussi créer une base de données MySQL avec l'outil DrizzleKit qui va se charger de créer les tables ainsi que les relations SQL:

npx drizzle-kit push:mysql

Il est important de noter qu'une View MySQL est requise pour que l'API et la base de données fonctionne correctement.

Pour lancer le projet dans un environnement de développement, vous devrez ajouter les options de configuration. Une fois cela fait, vous pourrez lancer 2 terminaux. Dans le premier, lancez le serveur d'API

npx nodemon server/server.js

Puis, ouvrez le serveur de développement React

npm start

---

Configuration du projet

Ces instructions sont pour une configuration basique. Elles devraient suffir pour la majorité des configurations.

Pour exécuter ce projet, vous aurez besoin d'un fichier .env localisé à la racine du projet qui contiendra les informations de votre base de données MySQL.

Configuration de la connexion à la base de données MySQL

MYSQL_HOSTNAME=localhost
MYSQL_PORT=3306
MYSQL_USERNAME=mysql-username
MYSQL_PASSWORD=mysql-password
MYSQL_DATABASE=mysql-database

Configuration du serveur d'API

SERVER_HOSTNAME=localhost
SERVER_PORT=1111

URL de l'API que le client front-end va utiliser pour faire les requêtes.

REACT_APP_API_URL="http://localhost:1111"

Configuration de Passwordless.dev

Nous utilisons Passwordless.dev pour l'authentification sans mot de passes (via les clés d'accès/Passkeys). Vous devrez créer votre projet sur Passwordless.dev ou héberger votre instance. Une fois que cela sera fait, vous devrez ajouter vos clés d'API dans le fichier .env.

Vous devez remplacer les valeurs ..._PUBLIC_KEY et ..._PRIVATE_KEY par vos valeurs générées pour votre projet passwordless.dev

PASSWORDLESS_API_URL="https://v4.passwordless.dev"
REACT_APP_PASSWORDLESS_PUBLIC_KEY=""
PASSWORDLESS_PRIVATE_KEY=""

---

Configuration de Firebase Admin

Nous utilisons Firebase Admin pour gérer les permissions des utilisateurs sur notre back-end. Firebase admin nous permet aussi de décoder les tokens des utilisateurs afin de savoir s'ils sont vraiment qui ils prétendent être.

Depuis votre console Firebase, vous devrez générer une clé de service. Pour faire cela, vous pouvez vous aider de ce guide: https://clemfournier.medium.com/how-to-get-my-firebase-service-account-key-file-f0ec97a21620

Ensuite, vous devrez placer l'emplacement du fichier de clé de service google dans le fichier .env.

GOOGLE_APPLICATION_CREDENTIALS="/home/user/klemn/firebaseServiceAccountKey.json"

Résultat

Après avoir fait toutes les configurations, votre fichier .env devrait ressembler à cela

SERVER_PORT=1111
SERVER_HOSTNAME=localhost

MYSQL_PORT=3306
MYSQL_HOSTNAME=localhost
MYSQL_USERNAME=klemn
MYSQL_PASSWORD=password123
MYSQL_DATABASE=klemn

REACT_APP_API_URL="http://localhost:1111"

PASSWORDLESS_API_URL="https://v4.passwordless.dev"
REACT_APP_PASSWORDLESS_PUBLIC_KEY="REMPLACE MOI"
PASSWORDLESS_PRIVATE_KEY="REMPLACE MOI"

GOOGLE_APPLICATION_CREDENTIALS="/home/user/klemn/firebaseServiceAccountKey.json"