Research

Technology Review

We performed extensive research into various technologies for each component of our system to ensure we selected the most suitable tools for our project. Our selection was guided by several key factors such as: accessibility requirements, integration capabilities, and development efficiency. We also opted for Azure tools where possible to leverage our partnership with Avanade.

AI API Selection

We evaluated three main options for integrating the AI chatbot into our application [3]:

Option	Pros	Cons
Azure OpenAI Assistant API	Built-in conversation management through threads Can add custom-tools which allows for AI function calling (AI can interact with backend) Integration and management through Azure leveraging our partnership Strong security compliance	Higher latency than local models Cost implications for high usage
Azure OpenAI Chat Completions API	Lightweight and efficient response generation Allows for custom instructions and simple to integrate with code Integration and management through Azure leveraging our partnership	Requires custom implementation of context management Less support for function calling capabilities Cost implications for high usage Higher latency than local models
Local LLM Models	No external dependencies Lower latency No usage costs Data doesn't leave the server	Significant computational resources required Lower performance than cloud models Manual updates needed for model improvements Limited context window size

Decision: We selected Azure OpenAI Assistant API with GPT-4o-mini.

Our partnership with Avanade provided access to Azure resources, making it free of charge to us. The Assistant API's built-in conversation management reduced development complexity. Initially, we were using the Chat Completions API with GPT-4o, but we found that the Assistant API was more suitable once we attempted to implement function calling. We chose GPT-4o-mini for its balance of performance and cost; it is approximately 17x cheaper than GPT-4o [4] while maintaining sufficient accuracy.

Frontend Framework

Option	Pros	Cons
React	Mature ecosystem with extensive libraries Our team had more experience with React Robust component reusability Strong TailwindCSS integration	Slightly steeper learning curve compared to Vue
Vue	Simpler template syntax	Smaller community than React

CSS Framework

Option	Pros	Cons
Tailwind CSS	Quick to write and large set of utility classes Simplifies responsive design creation which is key for accessibility	Initial learning curve
Traditional CSS/SCSS	Greater separation of concerns Allows for more control No external dependencies required	Time consuming in larger projects More difficult to maintain consistency

Decision: We selected React with Tailwind CSS for our frontend.

We selected React as our frontend framework due to our team's familiarity with it and its extensive ecosystem. We were also confident that it would integrate well with our backend and any services we would need to use. Tailwind CSS was chosen for its utility-first approach, which allowed us to quickly create responsive designs and maintain accessibility standards. This was especially important for our project given our focus on accessibility.

Backend Framework

Option	Pros	Cons
Flask (Python)	Our team has familiarity with Python Simple, minimalist framework with quick setup Strong ORM support with SQLAlchemy	Less built-in functionality than Express
Express (Node.js)	Same language across frontend and backend Large npm ecosystem	Requires async/await patterns for AI integration More configuration required

Decision: We selected Python Flask for our backend implementation.

We selected Python for the backend framework primarily due to the teams experience with it and its simple integration with Azure services. It is also a simple and minimalist framework which allowed us to quickly set up our backend and focus on the core functionality of our application.

Testing Frameworks

Frontend Testing

Option	Pros	Cons
Vitest + RTL	Vitest generally faster than Jest Native ESM support Simpler configuration with Vite	Newer ecosystem with fewer resources Some Jest plugins not available
Jest + RTL	Industry standard with extensive documentation Rich plugin ecosystem	Slower test execution More complex configuration Less integrated with Vite

Backend Testing

Option	Pros	Cons
pytest	Useful fixtures system Extensive plugin ecosystem Strong parameterization capabilities	Some features require plugins
unittest	Built into Python standard library No additional dependencies	More verbose test setup Limited fixture capabilities Less flexibility for complex testing

Decision: We selected Vitest + RTL for frontend testing and pytest for backend testing.

For the frontend, RTL was essential as we are using React. Vitest and Jest were considered but we opted for Vitest as it is generally faster and has simpler configuration with Vite (which we are using) [5]. For the backend, we chose pytest as it has a useful fixtures system but we also utilised unittest.mock for mocking services.

Email Service

Option	Pros	Cons
Gmail SMTP Server	Free for reasonable sending volumes Reliable service with good uptime Easy integration with Flask-Mail	Daily sending limits (2000 emails per day) [6] Not designed for bulk sending Requires app password for secure authentication
Azure Communication Service	Integration with other Azure services Higher sending limits than Gmail Better monitoring and analytics	Cost implications for high usage More complex setup Overkill for simple confirmation emails

Decision: We selected Gmail SMTP with Flask-Mail for our email service.

Gmail SMTP was selected as our provider due to its reliability and ease of setup. While it has a daily sending limit, it is more than sufficient for our expected email volume. It also has extremely simple integration and configuration with Flask due to the Flask-Mail library.

Deployment

Option	Pros	Cons
Azure Static Web App + App Service	Automated builds from GitHub Simple CI/CD integration Separation between backend and frontend Specifically for web application	Less flexible than containerized deployments Platform-specific configurations
Container Registry/Azure Container Apps	More consistent environments Better isolation between services Platform independence	More complex setup and management Additional DevOps overhead

Decision: We selected Azure Static Web App + App Service for deployment with PostgreSQL on Azure for our database.

We selected Azure Static Web Apps and App Service for deployment due to their simple CI/CD integration and simple set up [7]. We were running Docker locally but decided against containerization for deployment as we found it to be unnecessarily complex for our needs. We also chose Azure PostgreSQL for our database which allows us to represent complex relationships from our data model and has simple integration with our App Service.

Summary of Technical Decisions

To summarise we made the following technical decisions for our project:

Component	Selected Technology
AI API	Azure OpenAI Assistant API with GPT-4o-mini
Frontend Framework	React
CSS Framework	Tailwind CSS
Backend Framework	Python Flask
Frontend Testing	Vitest + React Testing Library
Backend Testing	pytest
Email Service	Gmail SMTP with Flask-Mail
Deployment	Azure Static Web App + App Service
Database	PostgreSQL on Azure

References

Winnie Nwanne, "Choosing the Right Tool: A Comparative analysis of the Assistants API & Chat Completions API," TECHCOMMUNITY.MICROSOFT.COM, May 15, 2024. https://techcommunity.microsoft.com/blog/azure-ai-services-blog/choosing-the-right-tool-a-comparative-analysis-of-the-assistants-api--chat-compl/4140438 (accessed Mar. 14, 2025).
OpenAI, "Pricing," OpenAI, 2024. https://openai.com/api/pricing/ (accessed Mar. 14, 2025).
C. Tozzi, "Vitest vs. Jest: Choosing The Right Testing Framework," saucelabs.com, Sep. 20, 2023. https://saucelabs.com/resources/blog/vitest-vs-jest-comparison (accessed Mar. 14, 2025).
"Send email from a printer, scanner, or app - G Suite Admin Help," Google.com, 2020. https://support.google.com/a/answer/176600?hl=en (accessed Mar. 14, 2025).
"Comparing Container Apps with other Azure container options," learn.microsoft.com, Nov. 23, 2022. https://learn.microsoft.com/en-us/azure/container-apps/compare-options (accessed Mar. 14, 2025).
RNIB, "Welcome to RNIB," RNIB, 2019. https://www.rnib.org.uk/ (accessed Mar. 22, 2025).
D. Hub, "Dialogue Hub," Dialogue Hub, 2020. https://dialoguehub.co.uk/dialogue-cafe (accessed Mar. 22, 2025).