Ambient Chat
Chat application with GPT-3 integration
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
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
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
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
