A web interface for a chatbot dedicated to text processing, analysis, and statistics generation, leveraging the data from the 'Satisfaction.ai' AI developed by xBrain.
Dadiana is an innovative project developed by xBrain, specifically designed to provide clients with a back-office that allows real-time tracking of data generated by their artificial intelligence, Satisfaction.AI. This project aims to enhance customer data management and provide precise, actionable insights live.
The primary goal of Dadiana is to create an intuitive and functional interface that enables Satisfaction.AI users to simplify the tracking of customer interaction data and insights. This platform allows them to visualize performance, analyze interactions, and access critical information all in one place.
Satisfaction.AI is an artificial intelligence solution developed by xBrain, mainly used in chatbot systems to improve customer experience. Dadiana serves as a centralized dashboard to gather and analyze all collected data, making information actionable and accessible in real-time.
The project provided me with the opportunity to expand my technical skills. Several technologies and tools were introduced during the development of Dadiana:
GraphQL: A technology I discovered through this project that transformed how data is retrieved and manipulated compared to traditional REST APIs. GraphQL allows for specifying exactly what data is needed and in what format, optimizing queries and reducing network overhead.
SVG and Adobe Illustrator: I used Adobe Illustrator to create optimized visuals, particularly in SVG format, for the user interface. The SVG format can be scaled without losing quality, making it lightweight and perfectly suited for the web.
The backend of Dadiana was developed by another team using Python, employing GraphQL for interaction with the front-end. My primary work involved integrating these backend features into the interface using Apollo Client, a library dedicated to managing GraphQL queries in React applications.
Choosing GraphQL for the project streamlined data interaction. Instead of having multiple entry points as with a traditional REST API, GraphQL centralizes all requests to a single endpoint. This improves API call efficiency and facilitates the integration of new features without requiring major server-side modifications.
During the development of Dadiana, here are the main tasks I worked on:
Build and Deployment of the Demo: A key aspect of my work involved constructing and deploying the demo version of Dadiana, allowing clients to test features and provide feedback for refining the product before full production.
Integration of API and GraphQL Queries via Apollo Client: I integrated backend functionalities developed in GraphQL into the user interface via Apollo Client, ensuring smooth communication between the backend and front-end, dynamically retrieving and displaying data in real-time on the platform.
Creation of Icons with Adobe Illustrator: In designing the application, I used Adobe Illustrator to create custom icons and optimized their export in SVG format. These icons were then integrated into the Dadiana interface to provide a consistent and appealing user experience.
Integration of Sketch Prototypes: The application was developed based on prototypes created in Sketch, a popular UI design tool. I ensured the integration of these prototypes into the project, adhering to design constraints and ensuring good ergonomics.
Internationalization (Multilingual Support): Since Dadiana is intended for clients from different regions, I implemented an internationalization system to support multiple languages. This feature allows the interface to easily adapt to various markets by providing dynamic content translation.
Web Scraping with Puppeteer and Node.js: One of the more technical tasks I performed involved web scraping chat data from Satisfaction.AI. Using Puppeteer (a Node.js library that provides an API to control a browser via the DevTools protocol), I automated the retrieval of chat data from Chatra.io, a live chat software. This data was then stored in MongoDB Atlas for use in Dadiana.
Team Task Management: In addition to technical development, I also played a role in managing the team's tasks, consisting of two developers. This responsibility included coordinating the various project stages, managing priorities, and tracking deliverables to ensure smooth progress.
The development of Dadiana utilized a modern set of technologies to ensure application performance, flexibility, and maintainability:
React.js: The main library used for front-end development.
Moment.js: For managing dates and times, particularly for displaying chat timestamps.
React-intl: Used for internationalizing the interface.
React-router: To manage navigation within the application.
Apollo-boost: A simplified package for configuring Apollo Client, easing GraphQL integration.
Material-UI 4: Used for the user interface, offering responsive components and a modern design.
The login to access the prototype is:
Email: demo@xbrain.io
Password: B?Nn*U@2xtL3w5m7
xBrain is a French startup based in California (USA) specializing in AI for natural language understanding and processing. Its comprehensive solution, Satisfaction.AI, is dedicated to customer relations and enables the automation of managing conversations between humans and machines through the implementation of cross-channel conversational agents and a system for regaining control of conversations. Satisfaction.AI offers ready-to-use solutions tailored to specific industries, such as banking, insurance, and e-commerce.
xBrain
Web
Subscribe to my newsletter to receive special offers and the articles / tutorials I occasionally publish on my blog.
* You can unsubscribe at any time by clicking the unsubscribe link in every email.
Automation of data collection from Chatra.io instant messaging, with optimized processing and storage in a MongoDB database.
A natural language understanding artificial intelligence solution that enables the creation of chat bots to enhance customer service.
