Giter VIP home page Giter VIP logo

nutritechagro-front's Introduction

Nutritechagro

Une plateforme pour gérer les demandes d'essai gratuit, les commandes et les comptes clients pour un service TV. Elle comprend un site web client pour parcourir les offres, demander des essais gratuits et passer des commandes, ainsi qu'un tableau de bord administrateur pour gérer les essais, les commandes, les produits et les informations clients.

Logique du Projet

Aperçu

Ce projet simplifie la gestion des essais gratuits et des commandes de services TV, offrant une expérience utilisateur fluide pour les clients et les administrateurs.

Fonctionnalités Clés

  • Site Web Client :

    • Parcourir les offres TV disponibles
    • Demander des essais gratuits avec des mesures anti-spam (détection IP et empreinte, Google reCAPTCHA)
    • Passer et gérer des commandes
    • Enregistrement et connexion des utilisateurs (Firebase Authentication)
    • Pré-pied de page pour les abonnements à la newsletter
  • Tableau de Bord Administrateur :

    • Gérer les comptes clients
    • Ajouter, mettre à jour et supprimer des offres TV
    • Voir et gérer les commandes
    • Approuver, rejeter et suivre les demandes d'essai
    • Gestion automatique de l'expiration des essais via Firebase Cloud Functions
    • Contrôle d'accès basé sur les rôles (Firebase Authentication)
  • Localisation :

    • Support multilingue (Anglais, Français, Espagnol)
    • Emails traduits en fonction de la langue du navigateur

Logique de Conception

Considérations sur l'Expérience Utilisateur (UX)

  • Facilité de Navigation : Des chemins de navigation clairs et simples pour garantir que les utilisateurs puissent facilement trouver et accéder aux fonctionnalités dont ils ont besoin.
  • Design Réactif : Assurer que la plateforme soit entièrement fonctionnelle sur divers appareils (ordinateurs de bureau, tablettes et téléphones mobiles).
  • Interface Minimaliste : Réduire l'encombrement pour aider les utilisateurs à se concentrer sur les tâches principales telles que parcourir les offres ou gérer les commandes.

Défis Techniques et Solutions

  • Évolutivité : Conçu pour gérer efficacement un nombre croissant d'utilisateurs et d'entrées de données.
  • Sécurité : Mise en œuvre de mesures anti-spam, d'une authentification sécurisée des utilisateurs et de la protection des données.
  • Gestion des Données Utilisateurs : Assurer des opérations CRUD fluides et fiables pour la gestion des données et des préférences des utilisateurs.

Instructions pour Exécuter l'Application

Prérequis

  • Node.js (v21.6.1 or higher)
  • Compte Firebase
  • Compte Heroku (pour le service backend d'email)
  • Git
  • Compte Resend

Instructions d'Installation

  1. Cloner le Répertoire :

    git clone https://github.com/yourusername/nutritechagro.git
    cd nutritechagro
  2. Installer les Dépendances :

    npm install
  3. Configurer les Variables d'Environnement : Créez un fichier .env dans le répertoire racine et ajoutez les variables d'environnement suivantes :

    BROWSER=none
    REACT_APP_DEFAULT_WEBSITE_LANGUAGE=en
    REACT_APP_SITE_KEY=6Le_qYIpAAAAAKP_GGVZx5zhMe3yH3g4UYwgD1Uk
    REACT_APP_SUPPORT_PHONE=+1 (929) 230-1875
    REACT_APP_BACKEND_URL=https://slex-backend-bf2d75baa3ef.herokuapp.com
    REACT_APP_SUPPORT_MAIL=[email protected]
    REACT_APP_ENV=production
    REACT_APP_WEBSITE_LINK=https://nutritechagro.com/
    PORT=4002
    SKIP_PREFLIGHT_CHECK=true
  4. Démarrer l'Application :

    npm start
  5. Accéder à l'Application :

    • Site Web Client : http://localhost:4002
    • Tableau de Bord Administrateur : http://localhost:4002/admin

Observations de Conception et de Développement

Choix de Conception

  • Schéma de Couleurs Cohérent : Créer une apparence cohésive sur toute la plateforme.
  • Éléments Interactifs : Utilisation de boutons, formulaires et modales pour améliorer l'interaction utilisateur.

Améliorations Futures

  • Analyses Améliorées : Intégrer des fonctionnalités d'analyse et de reporting plus détaillées pour de meilleures insights.
  • Fonctionnalités de Sécurité Avancées : Mise en œuvre de l'authentification multi-facteurs et de techniques de chiffrement des données améliorées.

nutritechagro-front's People

Contributors

shanksfd avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.