An AI customer service chatbot built with Next.js and Openai.
ByteBuddy is an AI customer service assistant that can answer questions about ByteBazaar products and services. ByteBazaar is a small business that sells electronics and home appliances. This project required a lot of heavy lifting to create a seamless chat user experience and a responsive user interface.
This project was a freelance project for a local business that wanted to improve their customer service experience. The goal was to create an AI assistant that could answer questions about the business and its products and services.
The project was split into 3 phases and interations for the complete chat user experience. Phase 1 consisted simply in connecting the Openai API and allowed the user to ask questions and receive answers. Phase 2 was quite larger and was design to train the AI assistant to answer questions about the business products with a warm welcome to start a friendly conversation. Phase 3 was by far the largest and most complex, as it includes the chat UI and functionality with a responsive design for any screen size.
React made the most sense for the chat application because it required an integration with Openai's API as well as a good user experience. React hooks were used to manage the state of chat messages between the AI assistant and the user. Also, styled-components was used for its CSS-in-JS approach and simplicity to style with CSS. Lastly, Vercel was an obvious choice for deployment because of its seamless integration with Next.js.
Like most projects, I ran into a few bumps along the way, one particularly difficult area was organization and structure of the code. Because of this project's size, I realized how important maintaining an organized structure would be.
I worked hard to keep components as reusable as possible and utilized props for many slight variations. I also used styled-components to keep styles organized and scoped to their respective components.
I could spend all day talking about the lessons I learned while working on this project, but the most important ones involved my newfound understanding of React Hooks, Git version control and API integration. As one of my first React projects, I learned a lot about the power of code organization and structure. When I first began, I would write sloppy code and move on, but now I know how doing so can come back to bite you later; I now spend more time refactoring and improving every line of code I write, for the best readability and far fewer headaches.