M4 Master ShopGPT - AI Shopping Assistant  

Team

  • Ilham Muhammad
  • Thu Huong Vu
  • Kim Ngan Le Dang
  • Matthias Hamborg

Supervision

Christopher Lennan, Jakob Panten
techstack

Concept & Design

Figma

  • Used for creating and visualizing design concepts, and UI/UX elements.

Canva

  • Utilized for designing graphics, logos for the chatbot.

Miro

  • Used as a visual collaboration tool, allowing for the sharing of ideas, documents, and links, fostering a collaborative and productive environment.

App Development

NextJS

  • Chosen as the web framework for building the application, providing server-side rendering, efficient routing, and an enhanced developer experience.

React

  • Used for frontend development, React enables the creation of interactive and reusable UI components, while TypeScript enhances code reliability and scalability.

Tailwind CSS

  • Employed as a utility-first CSS framework for rapid UI development and consistent styling across the application.

Docker

  • Utilized for containerization, enabling easy deployment and scalability of the application in different environments.

Weaviate Vector DB

  • Integrated for efficient storage and retrieval of vectorized data, enhancing the speed and accuracy of search operations within the application.

OpenAI API

  • API to use the latest model (GPT 3.5 / GPT 4) of OpenAI as the main intelligent processing of our web application.

OpenSearch API

  • idealo’s custom product search API.

LangChain (JS)

  • Provided essential functionalities for language processing, allowing the AI assistant to comprehend user queries, analyze text and image inputs, and generate contextually relevant and accurate responses.

Application Architecture

Application Architecture

Project Management

GitHub Repo

  • Used for version control, collaborative code management, and documentation of the project’s source code.

GitHub Project Kanban

Employed as a project management tool, providing an organized board for tracking tasks, milestones, and progress within the development process.

Discord

  • Utilized as a communication platform for team discussions, updates, and coordination during the project.

Microsoft Teams

  • The primary communication channel used by the team members to collaborate, exchange ideas, and provide support throughout the development journey.

Image Sources