Mini CRM - gestion des contacts

Application web de gestion simplifiée pour les contacts professionnels

Contexte

Ce projet a été réalisé dans le cadre de ma formation. Il s'agit de concevoir une application web permettant de gérer facilement les contacts professionnels (clients, prospects, partenaires).

Logo d'application
Besoin

L'objectif est de simplifier la gestion des contacts via une interface claire et des fonctionnalités essentielles : ajout, modification, suppression, recherche, favoris, classement, etc.

Environnement technologique
  • ◈ HTML5 / CSS3 / JavaScript
  • ◈ Bootstrap pour le responsive design
  • ◈ API Airtable (base de données)
  • ◈ API Cloudinary (hébergement d'images)
  • ◈ Postman pour tester les requêtes
  • ◈ Font Awesome pour les icônes
  • ◈ Assistance IA pour le code et la documentation
Réalisation

L'application est composée de plusieurs pages (accueil, ajout, recherche, contact...) et repose sur une architecture modulaire JS. Elle interagit avec Airtable via des appels API sécurisés pour lire, ajouter ou modifier les données.

Fonctionnalités

  • Affichage de tous les contacts


    Affichage des contacts

  • Recherche dynamique par nom du contact

    Recherche par nom

  • Recherche dynamique par entreprise

    Recherche par entreprise

  • Ajout de nouveau contact avec photo

    Ajout de nouveau contact

  • Problème pendant l'ajout de nouveau contact

    Problème pendant l'ajoute

  • Modification des fiches existantes

    Modification du contact existant

  • Suppression avec confirmation


    Suppression du contact

  • Marquer les contacts favoris


    Favoris

  • Gestion des dates de relance et suivi

    Date de relance

  • Filtres avancés par type de contact et/ou statut de relance

    Recherche filtré

  • Formulaire de contact


    Formulaire de contact

  • Vérification des champs du formulaire

    Formulaire de contact
Bilan

Ce projet a été particulièrement enrichissant, car il m'a permis de consolider mes compétences en développement front-end (HTML, CSS, JavaScript) ainsi qu'en interaction avec des APIs tierces comme Airtable et Cloudinary.

Initialement mené en binôme — avec une répartition des tâches entre le développement (SLAM) et la configuration de l'environnement serveur local (SISR) — j'ai finalement poursuivi et finalisé seule l'ensemble du projet, suite au départ de mon binôme. La prochaine étape consistera à implémenter un véritable système d'authentification utilisateur afin de renforcer la sécurité et la personnalisation de l'application.

Productions associées
  • ◈ Le code source de l'application disponible sur GitHub en cliquant sur ce lien
  • ◈ Maquette Figma du projet
  • (Cette maquette a connu plusieurs améliorations depuis sa conception.)
  • ◈ Documentation technique: fichier README.md disponible sur GitHub
  • ◈ Commentaires intégrés dans le code pour faciliter la compréhension
Compétences

1. Gérer le patrimoine informatique

  • 1.4. Vérifier les conditions de continuité d'un service informatique
    • Configuration et validation du bon fonctionnement d'une API externe (Airtable) avec Postman pour garantir la disponibilité du service.

2. Répondre aux incidents et aux demandes d'assistance et d'évolution

  • 2.3. Traiter des demandes concernant les applications
    • En adaptant et en modifiant mon application (ajout, suppression et recherche de contacts), j'ai contribué à l'évolution fonctionnelle d'une solution applicative.

4. Travailler en mode projet

  • 4.1. Analyser les objectifs et les modalités d'organisation d'un projet
    • L'analyse du cahier des charges m'a permis de comprendre les objectifs attendus et de planifier les différentes étapes du projet en fonction des contraintes définies.

5. Mettre à disposition des utilisateurs un service informatique

  • 5.1. Réaliser les tests d'intégration et d'acceptation d'un service
    • J'ai utilisé Postman pour tester les requêtes vers l'API Airtable, validant ainsi l'intégration des fonctionnalités avec la base de données.
  • 5.3. Accompagner les utilisateurs dans la mise en place d'un service
    • Un fichier README.md détaillé explique comment utiliser l'application CRM, facilitant ainsi sa prise en main par les utilisateurs.

6. Organiser son développement professionnel

  • 6.1. Mettre en place son environnement d'apprentissage personnel
    • J'ai utilisé divers outils professionnels pour développer mes compétences : Figma, Bootstrap, Postman, Airtable API, GitHub.
  • 6.2. Mettre en œuvre des outils et stratégies de veille informationnelle
    • J'ai mené des recherches ciblées sur les API, frameworks et bonnes pratiques pour résoudre des problématiques spécifiques.
  • 6.3. Gérer son identité professionnelle
    • Je valorise mon projet en le présentant sur mon portfolio en ligne ainsi que sur GitHub.
  • 6.4. Développer son projet professionnel
    • Ce projet m'a permis d'enrichir concrètement mes compétences en développement web, en cohérence avec mon orientation SLAM.