Présentation d'un de mes projets

BH-DevService

capture page accueille de mon projet

Description :

Cette application web professionnelle propose une gamme de services pour les professionnels et les particuliers. Vous pouvez découvrir et engager mes services de création d'applications web sur mesure, adaptées à vos besoins spécifiques, en me contactant via le formulaire de contact intégré. De plus, cette application offre la possibilité d'acheter des crédits pour accéder à différents services, tels que la conversion de texte en voix, la création de phrases accrocheuses pour votre entreprise, et l'aide à la résolution de problèmes informatiques grâce à une assistance en ligne. Explorez les options disponibles et bénéficiez d'une expertise professionnelle pour vos projets web.

Pourquoi ce projet :

Ce projet représente l'un de mes travaux les plus achevés et complets, que j'ai entièrement conçu de la création du frontend à celle du backend, jusqu'à sa mise en ligne, en solitaire.

Le lien :

https://bh-devservice.com/

Détails Techniques - Frontend :

Dépendances utilisées :
  • "@hcaptcha/react-hcaptcha"
  • "@stripe/react-stripe-js"
  • "@stripe/stripe-js"
  • "axios"
  • "dayjs"
  • "js-cookie"
  • "jwt-decode"
  • "react"
  • "react-cookie-consent"
  • "react-dom"
  • "react-ga4"
  • "react-router-dom"
  • "react-scripts"
  • "save"
  • "sweetalert"
  • "universal-cookie"
  • "web-vitals"
  • "yup"
Composition :
  • Header avec logo, nom de l'entreprise et boutons de connexion, enregistrement/déconnexion et profil
  • Menu latéral
  • Page d'accueil
  • Page développement web
  • Page des services en ligne accessible une fois connecté
  • Page horaire
  • Page de contact
  • Footer avec réseaux sociaux, contacts, informations importantes et gestion des cookies
Fonctionnalités :
  • Gestion de la première visite avec choix d'accepter ou non les cookies
  • Navigation sur différentes pages
  • Prise de contact via la page contact avec CAPTCHA pour valider l'envoi
  • Inscription avec nom, prénom et email
  • Inscription à la newsletter via un formulaire d'inscription
  • Vérification de la conformité du mot de passe lors de l'inscription
  • Validation de l'inscription avec envoi d'un code par email pour la première connexion
  • Créditation de quelques crédits pour tester les services en ligne lors de la première connexion
  • Récupération du mot de passe en cas d'oubli avec envoi d'un mot de passe provisoire par email
  • Redirection vers la partie profil pour saisir les informations obligatoires avant d'effectuer un paiement pour l'achat de crédits
  • Validation du paiement par la banque avec 3D Secure et ajout des crédits une fois le paiement validé
  • Confirmation de l'achat avec réception d'un email de confirmation
  • Possibilité de changer de mot de passe dans le profil

Détails Techniques - Backend :

Dépendances utilisées :
  • axios
  • base64-js
  • bcryptjs
  • body-parser
  • cookie-parser
  • cors
  • dayjs
  • dotenv
  • express
  • generate-password
  • jsonwebtoken
  • nodemailer
  • nodemon
  • openai
  • pg
  • stripe
  • uuid
  • validator
  • xss
Composition et Fonctionnalités :
  • API REST pour la gestion des requêtes et des réponses
  • Utilisation de PostgreSQL pour la partie data avec versionning via Sqitch pour la gestion de la base de données
  • Organisation du backend en différentes parties :
    • Services : Configuration de server.js, database.js et openAi.js pour la communication avec certains services
    • Middlewares : Auth.js, generatedRandomString.js, hcaptchaVerification.js, jwtManagement.js, nodemailer.js, passwordGenerator.js, uuidGenerated.js, validator.js
    • API : Router regroupant toutes les routes dans un fichier index.js et des sous-dossiers routers contenant des fichiers pour chaque service spécifique (apiService.js, contact.js, credit.js, tokenManagement.js, users.js, webhookStripe.js)
    • Controllers : Gestion des contrôleurs pour chaque service dans un dossier controllers (apiServiceController.js, contactController.js, creditController.js, tokenManagementController.js, usersController.js)
    • Data Mappers : Datamappers pour chaque service dans un dossier datamappers (apiServiceDataMapper.js, contactDataMapper.js, creditDataMapper.js, tokenManagementDataMapper.js, usersDataMapper.js)