Speak

<p>Démo vidéo de l'app :<br><a href="https://youtube.com/shorts/NSaqgFUGOlA?feature=share" rel="noopener noreferrer nofollow" target="_blank">https://youtube.com/shorts/NSaqgFUGOlA?feature=share</a><br></p><p>Notre objectif principal en développant cette application était de fournir une solution complète aux copywriters chargés de la rédaction de contenu pour les réseaux sociaux. Cette solution permettrait d'accéder aux informations essentielles sur les produits, informations transmises par les employés de l'entreprise en question via l'application.<br></p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clmt55itv0t4u79ff4ff6hhyr.png"><div class="image-overlay"></div></div></div></div><p><strong>Premier point : Versions Admin et Client</strong></p><p>Pour répondre aux besoins spécifiques de Speak, nous avons développé deux versions distinctes de l'application : une version admin et une version client. Cette approche a été adoptée pour offrir à Speak une vue d'ensemble complète et pour permettre un accès direct aux pages de chaque entreprise à partir de leur tableau de bord respectif. Cela signifie que Speak peut gérer efficacement ses comptes clients et interagir avec les entreprises tout en maintenant un contrôle total sur les informations partagées.<br></p><p><strong>Deuxième point : Système de Multi-Upload</strong></p><p>Nous avons mis en place un système de multi-upload innovant pour permettre à Speak de charger rapidement et facilement une multitude d'images en un seul clic. Cette fonctionnalité vise à optimiser le flux de travail des copywriters en simplifiant la gestion des ressources visuelles, ce qui se traduit par un gain de temps significatif dans la préparation du contenu.<br></p><p><strong>Troisième point : Modals Explicatives</strong></p><p>Afin d'améliorer l'expérience des clients de Speak, nous avons intégré plusieurs modals explicatives dans l'application. Ces modals ont pour objectif de clarifier les attentes et les tâches assignées, facilitant ainsi la communication et la compréhension entre les parties. Cette approche favorise une interaction plus fluide avec l'application et permet aux clients de mieux appréhender les exigences de leur contenu.<br></p><p><strong>Choix de Firebase comme Base de Données et Déploiement sur Netlify</strong><br>Firebase offre à Speak un accès simplifié à sa base de données, garantissant ainsi une gestion transparente des informations cruciales. La flexibilité et la fiabilité de Firebase nous ont permis de créer un environnement sûr et évolutif pour stocker et gérer les données essentielles.</p><p><br>De plus, pour garantir une mise en ligne fluide et rapide de l'application, nous avons opté pour le déploiement sur Netlify. Cette plateforme de déploiement automatique nous permet de maintenir l'application constamment à jour, assurant ainsi que les utilisateurs de Speak bénéficient toujours de la dernière version de l'application sans interruption.<br></p><p><strong>Conclusion : L'Importance de l'Ergonomie</strong></p><p>Dans l'ensemble, nous avons attaché une grande importance à l'ergonomie de l'application. Cela a été fait dans le but de garantir des interactions fluides avec l'application, même pour les clients de Speak qui ne sont pas familiers avec ce type d'outils. Notre conception ergonomique permet une prise en main rapide et efficace, offrant à Speak un atout précieux dans son processus de gestion de contenu sur les réseaux sociaux.<br><br></p>

Création d'une application permettant aux clients de l'entreprise de pouvoir transmettre des informations concernant leurs différents produits aux rédacteurs de contenus.

Firebase

React

FlutterFlow

Merci à vous tous ! Le collectif a réussi à concevoir et à déployer l'application de Speak en un temps record, moins d'un mois. Cela démontre clairement leur capacité à relever des défis techniques tout en maintenant une qualité exceptionnelle. Leur agilité et leur dévouement envers notre projet sont tout simplement remarquables. 

Réalisation d'une application mobile sur-mesure pour une entreprise de community management

IPEPPER

<p><strong>Conception web :</strong></p><p></p><ol><li><p><strong>Design pattern :</strong> Maîtrise de la conception MVC (Modèle-Vue-Contrôleur). Compétent dans la gestion du modèle pour la logique métier, la coordination des vues pour l'interface utilisateur, et la mise en œuvre de contrôleurs pour faciliter l'interaction utilisateur et les mises à jour du modèle. Utilisation de cette approche pour développer des applications maintenables, évolutives et flexibles.</p><p></p></li><li><p><strong>Création de d'apps web:</strong> Création d'apps web et mobile avec Flask ET ReactJS . Développement d'APIs RESTful pour fournir une communication fluide entre le frontend et le backend, garantissant une expérience utilisateur réactive et efficace.</p><p></p></li><li><p><strong>BDD &amp; PosgreSQL &amp; Auth :</strong> Utilisation de requêtes SQL via Flask afin de gérer les données d'une base automatiquement. En intégrant une authentification sécurisée, le projet a pu offrir un accès personnalisé aux utilisateurs. Cela permet de garantir la confidentialité des données tout en offrant une expérience utilisateur personnalisée en fonction des préférences et des autorisations pour chaque utilisateur.</p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/cll57mfbl047j6pic0ezw291m.webp"><div class="image-overlay"></div></div></div></div></li><li><p><strong>FLASK :</strong> Flask, un framework web en Python, se distingue par sa simplicité et sa polyvalence. Il offre un moyen efficace de créer des applications web en utilisant un ensemble de composants modulaires. Grâce à son approche minimaliste, Flask permet aux développeurs de construire des applications rapidement et de manière personnalisée, en sélectionnant uniquement les fonctionnalités nécessaires. Que ce soit pour créer des sites web interactifs, des API robustes ou des applications web plus complexes, Flask s'adapte parfaitement en offrant un équilibre entre légèreté et scalabilité.</p><p></p></li><li><p><strong>SCRAPPING :</strong> Selenium, un ensemble d'outils d'automatisation de navigateur, se révèle précieux pour le web scraping. En permettant de contrôler des navigateurs web comme Chrome ou Firefox, il émule les interactions humaines telles que le clic et la saisie. Cette flexibilité est essentielle pour extraire des données à partir de sites aux structures complexes ou qui utilisent abondamment JavaScript.</p><p></p></li><li><p><strong>Pages :</strong> En utilisant des routes, cela permet une navigation fluide pour la création de pages. Cette approche a permis de structurer et d'organiser efficacement les URL et les vues, offrant aux utilisateurs une expérience de navigation intuitive et cohérente.</p><p></p></li><li><p><strong>Frontend : </strong>Grâce à Javascript, HTML, CSS/SCSS et React, une navigation fluide a été mise en place pour créer des Pages dans le projet. Utilisation de Figma pour créer des maquettes visuelles interactives dans le but de refléter le design du site web à intégrer.</p><p></p></li><li><p><strong>Features</strong> : Implémentation de différentes fonctionnalités telles que les reviews sur chacun des candidats, obtention des numéros et emails grâce au scraping sur LinkedIn, la recherche de candidats grâce aux filtres personnalisés.</p></li></ol><p></p><h2>Impact</h2><ul><li><p>Optimisation du travail des RH maximisant leur productivité</p></li><li><p>Economie de temps de recherche de 4 jours / mois</p></li></ul>

Création d'un outil SI RH pour la société IPEPPER. Cet outil a permis au RH d'optimiser leurs travaux de recherche.

Typescript

Flask

IPEPPER - Création d'un outil de SI RH

Agorapulse

<p><em>Complete re-vamp of the Agorapulse Publishing tool in a FullStack development team of 8 Engineers, 1 QA and 1 Product Designer. The app was outdated and had a lot of tech debt. We had to rethink everything from scratch.</em><br><br><strong>Goal:</strong> Bring the tool up to the level of digital and design best practices + improve conversion from free trial.<br><br>Extremely technically complex and strategic project. Took one year from start to finish but due to Continuous Delivery process, was in the hands of users as a beta after 6 months.<br></p><ol><li><p>Rebuilding of the technical architecture </p></li><li><p>Updating and improving all UI/UX components. </p></li><li><p>Major improvements to the QOL of users by adding the most requested solutions<br></p></li></ol><p>Included a long discovery phase, private beta phases and an open beta before the gradual release.</p><p></p><p><strong>Outcomes:</strong></p><ul><li><p>Improved app performance by 100%</p></li><li><p>Led to an increase in our pricing by 150%+ to Enterprise customers by selling them the new version of the tool.</p></li><li><p>Conversion after free trial increased by 18%</p></li></ul>

Bring the tool up to the level of digital and design best practices + improve conversion from free trial.

Product Ownership

Product Management

User Research

Agorapulse - Complete App Re-Vamp and Tech Modernisation

<p><em>During Customer Discovery, we uncovered our users had a lot of pain points in their journey before coming into our Social Media Management app. This included managing their assets, adding labels and descriptions and sharing them internally.</em></p><p></p><p><strong>Goal:</strong> Create additional upward selling pressure by building a monetizable and highly-needed feature</p><p></p><p>We build an entire Asset Library MVP from scratch with a small team (2 Fullstack Engineers, 1 Designer and 1 QA) that included:</p><p></p><ul><li><p>Ability to upload and store images (up to 1TB depending on the plan)</p></li><li><p>Ability to add descriptions and labels to images</p></li><li><p>Ability to connect a Google Drive</p></li><li><p>Ability to use these assets when creating Social Media content without re-upload</p></li></ul><p></p><p>We added the MVP to the highest plans (Enterprise and Custom) while giving smaller plans a free trial (limited to a few uploads at a time). This allowed us to sell more easily the higher-priced plans.</p><p></p><p><strong>Outcome:</strong></p><ul><li><p>400+ users opted in day of launch</p></li><li><p>14% increase in quarterly upsell </p></li></ul><p></p>

Create additional upward selling pressure by building a monetizable and highly-needed feature.

Agorapulse - Asset Library (building a feature from scratch)

Grid

<p>grid. a pour mission de connecter les personnes librement et intelligemment de façon à promouvoir l'entraide et le progrès.</p><p></p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqo8lbq1cln6rh4hfsv6rjo.png"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqo8r4m1e3o6rci7palba5z.png"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqo94ng1clw6rh4chbu3mo5.png"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqo99ec1e3x6rci3wsv0hha.png"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqo9dd41e416rcic16oela4.gif"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqo9gkr1e436rci0l8rh8ml.png"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqo9k4h1cm06rh420racn6x.png"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqo9nd61cm46rh4hi3tewye.png"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqo9qyt1e4a6rcidub58j73.png"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqo9u711e4c6rcifytjgdxn.gif"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqoa8ud1cmk6rh45tkr95qe.png"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqoadxi1e4o6rci5h885u35.png"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqoahjg1cmo6rh40py239yu.gif"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqoal531e4q6rci9bdj9uw7.png"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqoaogn1cms6rh48aod5yhd.png"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqoasmz1cmv6rh439nw8kz8.png"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqoax881e4w6rci9u8g5yli.gif"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqob2eh1cn06rh48xhga9h9.png"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqob6fz1cn36rh4fwwkcbwo.gif"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqoba7u1e5c6rciezvt6mo2.png"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqobevn1e5h6rci2lzmc8i3.png"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqobjhx1e5n6rcicuce1112.png"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqobn621cnd6rh46l2w7o40.png"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqobqjk1e5r6rcieluz8ucc.png"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqobu7a1cng6rh48i6m6eu8.gif"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqocwcs1co96rh4e3u3czs2.gif"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkqod55q1cod6rh4hbcq2ocq.gif"><div class="image-overlay"></div></div></div></div>

Connecter les personnes librement et intelligemment de façon à promouvoir l'entraide et le progrès.

UX Product Design

Web Design

Grid. Concept de réseau social

<p><strong>Contexte : </strong>Speak est une entreprise de Community management qui a besoin d'avoir un espace personnalisé dans lequel tous ses membres peuvent communiquer et travailler efficacement dans leurs domaines respectifs.</p><p></p><p><strong>Réalisation :</strong></p><p></p><ol><li><p><strong>Espaces personnalisés :</strong> Chaque membre de l'équipe dispose maintenant de son propre espace, entièrement adapté à son domaine d'expertise. Cet espace dédié garantit que chacun dispose d'un environnement organisé et spécialement conçu pour maximiser son action.</p><p></p></li><li><p><strong>Calendriers personnels :</strong> Chaque membre de l'équipe dispose d'un calendrier personnel, entièrement configurable et synchronisable, permettant de gérer efficacement ses tâches et ses rendez-vous. Cette fonctionnalité aide à mieux organiser son temps de travail et à anticiper les échéances importantes.</p><p></p></li><li><p><strong>Espace de copywriting avec calendriers de publications :</strong> Pour les membres de l'équipe travaillant dans le domaine du copywriting, j'ai créé un espace dédié où ils peuvent planifier et organiser les publications pour leurs clients. Ces calendriers de publications permettent de suivre et d'optimiser leurs stratégies de communication avec leurs clients.</p><p></p></li><li><p><strong>Espaces clients personnalisés :</strong> Ces espaces offrent une expérience sur mesure et transparente ; il permet aux clients de visualiser et de gérer facilement leurs contenus.</p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkia2kwy0v726se167tdhy4i.png"><div class="image-overlay"></div></div></div></div></li><li><p><strong>Espace de dépôt pour le photographe :</strong> Le photographe de l'équipe dispose désormais d'un espace de dépôt spécifique où il pourra stocker, trier et partager ses photographies de manière organisée. Cela facilitera la recherche et l'utilisation ultérieure des images dans nos projets.</p><p></p></li><li><p><strong>Salon de Notification Automatisé :</strong> Nous avons mis en place un salon de notifications automatisé. Ce salon permet à chaque membre de l'équipe de recevoir en temps réel des notifications concernant d'autres membres ainsi que concernant leurs clients. Le dirigeant a un contrôle sur tous les espaces et peut voir en temps réel l'avancement de ses employés.</p><p></p></li><li><p><strong>Facturation automatisée :</strong> Grâce à la facturation automatisée, le dirigeant a un outil permettant en un coup d'oeil de visualiser les oublis potentiels de ses clients et d'avoir des relances de paiement automatique par mail.</p><p></p></li></ol><p>En combinant ces différents espaces personnalisés, les membres peuvent collaborer plus efficacement, échanger des informations de manière structurée et gagner en efficacité dans la gestion de leurs projets. Chaque membre a un accès facile aux ressources nécessaires pour accomplir ses missions avec succès.</p>

Réalisation d'une base de donnée comprenant des espaces personnalisés pour chaque membre afin de permettre une communication rapide et efficace dans l'entreprise. 

Notion

Airtable

Make

La réalisation est allée au-delà de mes attentes ! Je suis impressionné par le travail accompli par Julien qui a ajouté des fonctionnalités supplémentaires, telles que des outils de notifications instantanées et des liens de partage de contenu pour nos clients (ce n'était pas prévu au départ), contribuant ainsi à fluidifier mes tâches ! Super boulot !

Wanis Hamoumi

Ingénieur Fullstack

À propos

Expérience de travail

Ingénieur Full Stack

Ingénieur Full Stack

Formation

42

Université Côte d'Azur

Licences et certifications

Responsive Web Design

JavaScript Algorithms and Data Structures

Portfolio

Réalisation d'une application mobile sur-mesure pour une entreprise de community management

Speak

IPEPPER - Création d'un outil de SI RH

IPEPPER

Agorapulse - Complete App Re-Vamp and Tech Modernisation

Agorapulse

Agorapulse - Asset Library (building a feature from scratch)

Agorapulse

Grid. Concept de réseau social

Grid

Speak - Réalisation d'un CRM

Speak

Talents

Recruteurs

À propos