Ambient Chat

Chat application with GPT-3 integration

Project Banner Image for Ambient Chat

Prototyping

VueJS

NodeJS Express

SocketIO

Airtable

Ambient Chat is a chat application that began as a simple idea for a sleek chat room interface. Using VueJS and NodeJS Express with SocketIO, I developed a complete chat platform that allows users to send, receive, and store messages from other users. In addition, I incorporated OpenAI's GPT-3 technology to enable users to chat with AI bots that feel authentic and natural.

Challenge

How can I create a chat application that is both aesthetically pleasing and user-friendly? And how can I integrate GPT-3 to create a chatbot that feels authentic and natural? (Chat-GPT didn't exist at the time)

Action

Organizing my codebase

Organizing my codebase

Before diving into development, I spent time blueprinting my application in FigJam to plan out the structure of my classes and components. I found this to be a crucial step in creating a clean and organized codebase. By breaking down the application's functionality and visualizing the various components that would be necessary to achieve it, I was able to streamline the development process and ensure that everything would connect seamlessly.

Building the core components

Building the core components

Once I had sketched out my ideas and determined the architecture of my application, I began building classes and components using VueJS, my chosen frontend framework. My first task was to create a core component that I knew would be essential later in the development process. Meanwhile, on the backend, I initialized a NodeJS server and installed the Express framework, which allowed me to start testing the sending and receiving of data. By taking a strategic approach to development, I was able to quickly establish the foundation of my application and start building out its core functionality.

Refining the user experience

Refining the user experience

After building the frontend and backend components, I moved on to styling the application using CSS. I found it important to ensure that the design was both aesthetically pleasing and user-friendly. I also focused on making the application responsive, so it would look great on all devices. Once the styling was complete, I dockerized the application to make it more scalable and efficient. This also made it easier to deploy and manage, which was a big plus for me. For the database, I decided to use Airtable API, which allowed for easy integration with my application. I found that Airtable provided a simple and intuitive way to manage and store data, which made it a great choice for my project.

Result

Around 100 people have used the application on the experimental version. I also received positive feedback from people who tried it out, the most favourite feature being the chatbot.

Video documentation

Video ThumbnailPlay Button

2023 Florian. All Rights Reserved.