Integrations Technical Assessment

Project Overview

This repository contains a full-stack integration management application. The React frontend lets users initiate OAuth flows and interact with connected services, while the FastAPI backend orchestrates authentication, data retrieval, and Redis-backed credential storage. Supported third-party integrations include Airtable, Notion, and HubSpot.

Repository Structure

• frontend/: React application created with Create React App
• backend/: FastAPI service exposing integration endpoints
  • integrations/: Service-specific logic for Airtable, Notion, and HubSpot
  • redis_client.py: Async Redis helper utilities
• .zencoder/: Repo metadata and assistance rules

Prerequisites

• Python 3.11 (installed via the backend/.venv virtual environment)
• Node.js 18+ with npm
• Redis (local or remote instance reachable from the backend)
• Git (optional, for version control)

Environment Setup

Backend (FastAPI)

1. Open PowerShell.
2. Navigate to the backend directory and activate the virtual environment:

   Set-Location "c:\Users\TEMP\Downloads\integrations_technical_assessment\backend"
   .\.venv\Scripts\Activate.ps1

3. Install or refresh dependencies if needed:

   pip install -r requirements.txt

4. Configure environment variables before running the app:
   • REDIS_HOST: Hostname or IP of the Redis instance (defaults to localhost).

   $env:REDIS_HOST = "localhost"

Frontend (React)

1. Open a second PowerShell window.
2. Move to the frontend directory:

   Set-Location "c:\Users\TEMP\Downloads\integrations_technical_assessment\frontend"

3. Install dependencies (once per environment):

   npm install

Running the Applications

Start the Backend

Set-Location "c:\Users\TEMP\Downloads\integrations_technical_assessment\backend"
.\.venv\Scripts\Activate.ps1
uvicorn main:app --reload

• Service URL: http://127.0.0.1:8000
• Use Ctrl+C to stop the server.

Start the Frontend

Set-Location "c:\Users\TEMP\Downloads\integrations_technical_assessment\frontend"
npm start

• App UI: http://localhost:3000
• Use Ctrl+C to stop the dev server.

Running Both Together

1. Launch the backend with the commands above in one PowerShell window.
2. Start the frontend in a separate PowerShell window.
3. Ensure the frontend can reach the backend at http://127.0.0.1:8000. CORS is pre-configured for requests from http://localhost:3000.

Building for Production

• Frontend: npm run build (outputs to frontend/build)
• Backend: Deploy the FastAPI app with a production ASGI server (e.g., Uvicorn with workers or Gunicorn + Uvicorn workers) and point to the same main:app entry point.

Troubleshooting

• ModuleNotFoundError in backend: Ensure the virtual environment is activated and dependencies are installed via pip install -r requirements.txt.
• Redis connection issues: Verify REDIS_HOST, network accessibility, and that Redis is running on port 6379.
• Frontend cannot reach backend: Confirm both servers are running and that the backend address matches the frontend configuration (default http://127.0.0.1:8000).

Additional Resources

• FastAPI documentation: https://fastapi.tiangolo.com/
• React documentation: https://react.dev/
• Redis documentation: https://redis.io/docs/