Ambient Chat
A curated collection of the best products on the web
User Research
Prototyping
NextJS
Vercel
Custom Screenshot API
Supabase
In university, my team recognized the value of tools in our daily lives and decided to create a collection of them. We started with a Notion database-page, but wanted to share it more widely. Using the Notion API, we developed a website where users can view our curated collection and submit their own discoveries. Our curators meticulously select each tool, guaranteeing the best recommendations. Our platform has helped countless individuals find new and innovative tools and gain inspiration.
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
