- Intro
- Challenge
- Project Screen Shot
- New features created
- Inspiration and motivation
- How it was developed
Neo Interactive Webpage by Virtual Assistant - is a Web application that was developed in honor of Neo Financial.
Some sections of Neo's official website were recreated with the insertion of new innovation features, which the main functionality is a virtual assistant (chatbot).
The Virtual Assistant is able to interact with the user and control the web application interactively, being able to direct the user to specific sections of the site.
got lost on the site?
> don't know where to find information?
> ...ask Neo's virtual assistant that it will take you to the desired session. 😉🖤
The aim of this project is to recreate sections of Neo Financial's official website with improvement on existing features and development of new features with a focus on innovation.
All images and content are property of Neo Financial and were taken from the official website for the period December 25, 2021 to date.
✅ [ ONLINE ] - Access the application at: www.neo-together-with.matheusicaro.com
Interactive or controlled website is a trend that has emerged after a popularization of virtual assistants in recent years. Basically it's having a virtual assistant (Chatbot) available on the site and that has the ability to perform actions independently without customer action, just based on the understanding of the user's questions and answers.
An interactive webpage was developed through the virtual assistant. Basically, there are two scenarios in which were considered as a simple conversation and an advanced conversation.
Simple Conversation: the simple conversion represents interactions in which the chatbot responds to the user with only texts, as shown in the image below:
Advanced conversation: the advanced conversion when a virtual assistant identifies that it will be necessary to perform a command in the web application to meet the user's request, as shown in the image below:
The virtual assistant was built using IBM's Watson Assistant as a natural language processing engine. All knowledge, training and conversation flow developed in Watson Assistant is available at this link.
The motivation of this project was to apply this concept of interactive web application inspired by an award received in 2021 in the first internal Hackathon from Inter Bank.
Bore details about this project: www.matheusicaro.com/in/projects/talking-to-babi
This trend of virtual assistants that interact with a simple web view, can be extended to other types of interfaces such as mobile applications, mainly in marketplace applications or super apps that contain several other products and segments in a single app.
In that project, which was awarded in the hackaton in 2nd place on the IOS platform, it demonstrates an interaction for viewing products not found in the search fields with the potential to be extended to assist in possible sales or purchases of services with an attendant when visiting a store a mall for example.
The project is composed of a front-end and a back-end that integrates with IBM's Watson Assistant services
- FRONT-END: developed in React with GraphQL (Apollo Client) . Documentation available at this link.
- BACK-END: developed in Node.js with GraphQL (Apollo Server) . Documentation available at this link.
- CHATBOT: have been trained to have knowledge relevant to the information coming from the web page. Documentation available at this link.
- Used React with:
- Used Material-UI V5 for lib for view components
- Used Styled Components lib for styling
- Used Redux Context API for store management
- Used Reack Hooks with stateful and stateless components.
- Used Husky for analyzing lint tests and configurations before committing to the repository
- Used Prettier lint for lint style
- Used Node.js with:
- User IBM Watson Assistant as integration to provide the use of artificial intelligence for understanding natural language.
- Used Jest for unit testing
- Used Winston for the storage of the logs.
- Used Axios for promises based HTTP client
- Used Husky for analyzing lint tests and configurations before committing to the repository
- Used Prettier lint for lint style
- Used IBM Watson Assistant as an NLP engine (Natural Language Processing) and construction of conversational flows.
- Used AWS Route 53 as a highly available, scalable domain name system service.
- Used AWS CloudFront as a highly scalable content delivery network services.
- Used AWS S3 Bucket as a cloud object storage to static web files.
- Used AWS BeanStalk as an orchestration service for deploying cloud applications.
- Used AWS EC2 as cloud instances for application availability.
- Used AWS CodeDeploy as a fully managed deployment service that automates application deployments.
- Used AWS CodePipeline as a continuous delivery service for the application build, test and deployment phases
- Used AWS CodeCommit as source control service.
- Used MongoDB.