quivr/docs/tech-design.mdx

---
title: Technical Design
description: Learn how Quivr works under the hood
icon: microchip
---

## Backend Stack

### FastAPI: The Foundation of Quivr

FastAPI is central to Quivr's high-performance capabilities. Here, we explore its role and the benefits it brings to the table.

<AccordionGroup>
  <Accordion title="Introduction to FastAPI">
    FastAPI is a leading-edge web framework for building APIs with Python 3.6+.
    It stands out for its speed, efficiency, and compatibility with modern
    development needs. - **Speed**: FastAPI is one of the fastest web frameworks
    for Python... - **Type Checking**: Utilizes Python type hints for
    validation... - **Asynchronous Coding**: Supports asynchronous request
    handling...
  </Accordion>
  <Accordion title="Choosing FastAPI for Quivr">
    Our selection of FastAPI aligns perfectly with Quivr's design philosophy...
    - **Performance and Scalability**: FastAPI's speed makes Quivr highly
    efficient... - **Ease of Use**: Its intuitive design allows for rapid
    development... - **Rich Feature Set**: FastAPI comes with built-in support
    for data validation...
  </Accordion>
  <Accordion title="FastAPI vs Other Frameworks">
    FastAPI's performance metrics are superior when compared to counterparts
    like Flask and Django... - **Flask**: While Flask is simpler, FastAPI
    provides built-in support... - **Django**: Django is a full-stack framework,
    but for API development...
  </Accordion>
</AccordionGroup>

### Authentication: Secure Access to Quivr

Secure and streamlined authentication is key to accessing Quivr's features.

<Steps>
  <Step title="Account Creation">
    Sign up for Quivr and navigate to the `/user` page on your user dashboard.
  </Step>
  <Step title="API Key Generation">
    Generate your unique API key in the settings, your access token to Quivr's
    backend services.
  </Step>
  <Step title="API Key Usage">
    Include the generated API key in the request header for secure access.
  </Step>
</Steps>

### The Architecture of Our Kingdom: Robust and Scalable

Quivr's architecture is a testament to modern, scalable web service design:

<CardGroup cols={2}>
  <Card title="Load Balancer" icon="network-wired">
    The Load Balancer efficiently manages incoming traffic, ensuring optimal
    performance.
  </Card>
  <Card title="Container Service" icon="docker">
    Our Container Service orchestrates digital services, maintaining operational
    harmony.
  </Card>
  <Card title="Queue" icon="crown">
    The Queue system prioritizes and manages task execution.
  </Card>
  <Card title="Celery Worker" icon="list">
    Celery Worker handles queued tasks, ensuring timely and effective execution.
  </Card>
</CardGroup>

### Words of Wisdom: Keeping Your API Secure

<Warning>
  Always protect your API key. It's crucial for maintaining the security and
  integrity of your access to Quivr.
</Warning>

### The Balance of Power: Pros and Cons Analysis

Understanding the pros and cons of FastAPI helps in making informed decisions:

<AccordionGroup>
  <Accordion title="Advantages of Using FastAPI">
    FastAPI enhances development with its swift performance...
  </Accordion>
  <Accordion title="Considerations for FastAPI">
    While advantageous, FastAPI requires understanding of modern programming
    concepts...
  </Accordion>
</AccordionGroup>

### Interactive API Sandbox: Experience Quivr in Action

Engage with Quivr's functionality in real-time in our interactive API sandbox:

<Info>
  🌐 [Test and refine your API calls using our
  sandbox.](https://api.quivr.app/docs)
</Info>

## Frontend

### Next.js and Vercel: The Dynamic Duo

Quivr's frontend is crafted with Next.js, a cutting-edge React framework, and is hosted on Vercel, a platform tailored for frontend frameworks like Next.js. This combination provides a seamless, efficient, and scalable user experience.

### Next.js: The Power of React Enhanced

Next.js is chosen for its robust features that elevate the React development experience:

<AccordionGroup>
  <Accordion title="Server-Side Rendering & Static Generation">
    Next.js supports SSR and Static Generation, crucial for performance and SEO.
    This ensures Quivr's pages are pre-rendered for faster load times and
    improved search engine visibility.
  </Accordion>
  <Accordion title="API Routes">
    Next.js allows the creation of API endpoints within the application,
    enabling a seamless blend of client and server-side logic.
  </Accordion>
  <Accordion title="Enhanced Development Experience">
    With features like fast refresh and built-in CSS support, Next.js
    streamlines the development process, boosting developer productivity.
  </Accordion>
  <Accordion title="Scalability">
    Next.js's architecture facilitates easy scaling of applications to meet
    growing user bases and complex features.
  </Accordion>
</AccordionGroup>

### Vercel: Optimized Hosting for Next.js

Vercel, renowned for its global deployment capabilities and serverless functions, hosts Quivr's frontend:

<CardGroup cols={2}>
  <Card title="Optimized for Next.js" icon="react">
    Vercel, built by the creators of Next.js, ensures seamless integration and
    optimal performance for Quivr's frontend.
  </Card>
  <Card title="Edge Network" icon="network-wired">
    Leveraging Vercel's Edge Network reduces latency and speeds up content
    delivery, enhancing user experience.
  </Card>
  <Card title="Continuous Deployment" icon="octopus-deploy">
    Continuous deployment on Vercel allows for swift and efficient updates,
    keeping Quivr's frontend up-to-date.
  </Card>
  <Card title="Scalable Infrastructure" icon="layer-group">
    Vercel's infrastructure automatically scales to meet user demand, ensuring
    consistent performance even during peak times.
  </Card>
</CardGroup>

<Tip>
  By combining Next.js and Vercel, Quivr achieves a robust, scalable, and
  responsive web application, meeting the demands of modern web users and
  developers.
</Tip>
This integration of Next.js and Vercel is a testament to Quivr's commitment to delivering
high-quality, responsive, and dynamic web applications, catering to modern web development
needs.

## Architectural Overview

Explore the intricacies of Quivr's architecture through this detailed diagram:

<Frame>
  <img
    src="/images/architectural-high-level.png"
    alt="Quivr Architecture Diagram"
  />
</Frame>

## Quivr Community

Your input is invaluable in shaping the future of Quivr. Connect with us:

<Tabs>
  <Tab title="Feedback">
    Share your feedback and suggestions to enhance Quivr.
  </Tab>
  <Tab title="Community">
    Engage with peers in our forums and social platforms for support and
    collaboration.
  </Tab>
</Tabs>

---