Frontend

The ChatGPTFirewall frontend is built using React, with a significant contribution from Microsoft's Fluent UI v9 library for its array of components. This selection was crucial for our development process, especially as we were initially familiarizing ourselves with React. The Fluent UI library was chosen for its potential to meet our application's design needs and the ease with which it could allow future implementations of customizable themes, such as a dark mode.

Our project's structure adheres to a standard React configuration, organizing the codebase into components and pages folders. This approach has helped maintain clarity and manageability as the project evolved. For backend interactions, we use AJAX calls encapsulated in a custom Request function, standardizing our API calls throughout the application.

We chose TypeScript to ensure type safety and facilitate smoother integration with backend models, aiming to improve the development experience within our team. The integration of Auth0 for authentication was streamlined by using TypeScript, reinforcing secure access without adding complexity to our development process.

On the frontend, the focus has been on enabling users to organize documents into rooms and submit queries related to these documents. Before these queries are sent to the LLM, a replacements map is available for review, aligning with our approach to handle data with caution, particularly concerning user privacy.

These development decisions reflect our journey and the learning opportunities we encountered while building the ChatGPTFirewall frontend. They are not endorsements of the application's current capabilities but rather a reflection of our developmental path and the technical choices made along the way.